Vue3 フロントエンド開発の教科書を読んだ

を読んだ。

手に取った経緯

新規プロジェクトを進めるにあたって、Railsのテンプレートにマウントする形でVueを採用したとき、Vue3 + TypeScript + Viteの組み合わせがモダンそうだなと思った。
最初にざっくり全体をおさえるには、Udemyの講座が非常に役に立った。

各公式のドキュメントを読んだりはして概ね書けるようにはなったが、特にVue3(setup構文) + TypeScriptの部分で手探りの部分が多く、体系的に学ぶことで取りこぼしをなくすためにこの本を選んだ。

良かったところ

• 今の時点で最新の技術の組み合わせで書いてあるので、サンプルコードの書き方がそのまま役に立ちやすい
• 単体テスト(Vitest)やState管理のPiniaについても章が割かれているので足がかりになる
• 各サンプルコードが長すぎず、注釈番号なども振ってあるため読みやすい

学びがあった部分

v-on:inputなどでeventを引数に取ったときe.targetをHTMLInputElementにキャストする

onUpdate(e: Event) => {
  const element = e.target as HTMLInputElement;
  emit('update:modelValue', element.value);
}

e: anyで書いてたりとか、e: { target: HTMLInputElement }とかで書いてたりしたのでこの形に落ち着きそう

input type="checkbox"のtrue-value, false-value

<input type="checkbox" v-model="hoge" true-value="hoge" false-value="fuga">

v-bind:valueを使うことがほとんどだと思うが、こういうのがあるのは便利

v-bind:keyはコンポーネント内で一意でなければならない

v-forで同じオブジェクトを回したときidとかをkeyに使うことが多いが、DOMの階層が違ったとしても同一コンポーネント内でのkeyの重複は許されないので、v-bind:key="'hoge' + id"みたいな感じで工夫する必要がある。

インデックスシグネチャ

const list: {[key: number]: string;} = {
  1 => "hoge",
  2 => "fuga"
}

オブジェクトのキーにどの型を使うかは上記のように書ける

リアクティブな変数の配列の入れ替え

// リアクティブが切れる
const reactiveObj = reactive(['Alice', 'John'])
reactiveObj = ['Mike']

// リアクティブが持続する
const reactiveObj = ref(['Alice', 'John'])
reactiveObj.value = ['Mike']

reactiveを使う場合は一旦clear()してからpush()しないと監視されなくなる。
下のように書きたいし、reactiveは色々とハマりやすかったので大体の場面でrefを使っていた

CompositionAPIの利点

よく挙げられるものとして関心の分離(OptionsAPIと違い、似たような処理をだいたい同じ場所に書くことができる)があるが、dataの初期化などライフサイクルをあまり意識しなくて良くなるということが書いてあり、確かにと思った。
ただ、行を入れ替えると動かなくなったり、意識しておかないと処理が散らばりやすいというデメリットもあるので、手触りに応じて使えばいいと思う

definePropsを使ったとき、template内でpropsの中身が展開される

それまでは const props = defineProps<Props>();でpropsを一旦受け取ってから、template側で{ props.title }のように利用していたのだが、そうしなくてもいいらしい。
ただ、一旦受け取っておいてprops.の形で利用したほうが分かりやすいと思うので多分使わない

Provideではreactive()を使用する

refを使用してProvideしたとき、Injectされたデータに対して.valueを呼び出すと型エラーが起こるので、reactive()を使ったほうが良いとのこと。
ただ、これに関してはInjectionKeyという仕組みがあるし、refを使っているサンプルコードも上がっているのでそこまで気にしなくて良い気はする。

scope付きSlot

slotを使うとき、データの向きが子->親になるときがあるが、親コンポーネントでv-slot:default="slotProps"のようにslotPropsで受け取って利用することを明示して書ける

動的コンポーネント

<component v-bind:is="currentComp" />

のように書き、currentCompにコンポーネント名を指定することで動的にコンポーネントの呼び分けができる。

まとめ

探せば公式ドキュメントに書かれていることも多いが、公式ドキュメントのリンクを辿って隅々まで読むというのは難しいので、やはり本の形にまとまっているのはありがたい。
サンプルコードもほどよい感じで、新しめのスタックでVueを学びたい人におすすめできると思う。