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

Vue 3　フロントエンド開発の教科書

仕事で Vue3 をちょっとだけ触ったのですが、今までやっていた 2 となんかめちゃくちゃ違うぞ……？となったので入門のために読みました。

Vue3 というよりは、2 にもあった Composition API という書き方についてそう感じていたらしい、ということに気がついたのは半分ぐらい読み進めてからの話

そのまま写経だと面白くないので、Docker に node 入れてやってみたり（古い node × Vue2 のプロジェクトがいくつかあるのでローカルを汚したくなかった）、登録するデータを Pokemon インターフェースにしてみたりなどしました。

最初はもたついていましたが作業スピードもどんどん上がってきて、たくさんプロジェクトを作りまくるのもいい勉強？になるなと思いました。

学んだこと

• Composition API の書き方
• slot の使い方
  • Vue2 にもあったけど、正直よく分かっていなかった
• interface って何だ
• TypeScript の書き方
  • そもそも触ったことがなかった
  • こちらもそのうち専門の本で勉強しようと思った
• Pinia の使い方
  • 「ぴにゃ」ではない
• Vitest を使ったユニットテストの書き方
• axios を使った API の叩き方
  • fetch() でも叩けるけど、axios を使った方がうれしい

ちょっとつまづいたところ

• ブラウザで確認しようとしてERR_EMPTY_RESPONSE
• Store の書き方が Options API だったので、見よう見まねで Composition API の形へ書き直した
  • state の値をリセットできる $reset を使おうとしたが、Options API でないと使えないらしい（参考：Access $reset when using composition-style API? · Discussion #1012 · vuejs/pinia · GitHub）
  • とりあえず function reset みたいなものを作って、デフォルト値をセットし直すようにした
  • Pinia では、今のところは素直に Options API を使った方がよさそうな気がする
• お天気 API を叩いてエラー出しまくった
  • API Key が有効化されていないだけだった
  • あほ

補足事項

Props と Emit あたりは知ってるからいいや〜と作業せずに流し読みしてしまったのですが、後半でその Props と Emit のところで作るプロジェクトを再利用する箇所がありました。結局前に戻って作成しました。

内容は飛ばしたりせず、ちゃんとページ順に1つずつ作った方がいいです！