Zenn
Open22

Vue3 + TypeScript で 三目並べを作る

TypeScript
Vue.js
プログラミングをするパンダプログラミングをするパンダ

プロジェクトの作成

$ vue create tic-tac-toe

> tic-tac-toe@1.0.0 vue /Users/sample_program/vue/tic-tac-toe
> vue "create" "tic-tac-toe"



Vue CLI v5.0.0-alpha.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Lin
ter, Unit
? Choose a version of Vue.js that you want to start the project with 3.x (Previe
w)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated confi
g files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: NPM
プログラミングをするパンダプログラミングをするパンダ

computed は getter。local stateやdataのselector相当ということかな。

methods でも同様のことができるが、computedの結果はキャッシュされる。「リアクティブ」な依存がある場合は、依存する値が更新されたら、computedの結果も更新される。

結果だけ見れば、この2つのアプローチはまったく同じになりますが、算出プロパティはリアクティブな依存関係に基づいてキャッシュされるという違いがあります。算出プロパティはリアクティブな依存関係の一部が変更された場合にのみ再評価されるのです

「リアクティブ」ってどんな意味？

プログラミングをするパンダプログラミングをするパンダ

Vueの「リアクティブ」とは

データと DOM は関連付けられ、すべてが リアクティブ（反応的） になっています。

https://v3.ja.vuejs.org/guide/introduction.html#宣言的レンダリング

おそらく、「値が変更されると、DOMも変化する」ということなら、local state 相当ということかな。

他にもmountedが出てきた。これはなんだろう。マウント時に実行するメソッドかな（componentDidMount相当？）

ぴったりな章を見つけた

リアクティブとは何か？

https://v3.ja.vuejs.org/guide/reactivity.html#リアクティブとは何か

Vue の最大の特徴の 1 つは、控えめなリアクティブシステムです。モデルはプロキシされた JavaScript オブジェクトです。それらを変更するとビューが更新されます

やっぱりコンポーネント単位のlocal stateということみたい。「プロキシされたJSオブジェクト」ということはオブジェクトの更新について immer と発想が似ているのかな

プログラミングをするパンダプログラミングをするパンダ

ProxyによるJSオブジェクトの更新は、ReactのsetStateやReduxのアプローチと異なる。
前者は、あるグローバルなオブジェクトの変更を監視しているが、React/Reduxでは古いオブジェクトを受け取り、更新関数が新しいオブジェクトを作成して返却する

プログラミングをするパンダプログラミングをするパンダ

composition API を調べる

propsがsetUpの中に渡される。setUpの返り値は computed, methods, templateなどで利用できる

setup オプションは props と後で紹介する context を受け付ける関数であるべきです。さらに、setup から返される全てのものは、コンポーネントの残りの要素 (computed プロパティ、methods、ライフサイクルフックなど) およびコンポーネントの template に公開されます。

https://v3.ja.vuejs.org/guide/composition-api-introduction.html#setup-コンポーネントオプション

プログラミングをするパンダプログラミングをするパンダ

refを使うとstringやnumberといったプリミティブな値もreactiveにできる

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1
プログラミングをするパンダプログラミングをするパンダ

composition apiってcustom hooksと同じって思ってたけど、ロジックの切り出しは機能の一部でしかなかった

import { ref, computed } from 'vue'

const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)

counter.value++
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2