読んだ経緯#

個人開発で Nuxt.js を使用していたのですが、Vue は 2 の知識しかなく、最新の Vue3 を使ったことがなかったので、どの部分が Nuxt.js の部分なのか分からず、一度書籍で体系的に Vue3 を学びたいと思ったのでこの本を読みました！

「Vue3 フロントエンド開発の教科書」の紹介#

「Vue3 フロントエンド開発の教科書」は、Vue.js の最新バージョンである Vue 3 と TypeScript を使って、フロントエンド開発を本格的に学びたい人におすすめの書籍です。この書籍では、Vue3 の基礎から Vite を使用した実行環境の作成、Vue Router を使ったルーティングの設定、Pinia による状態管理、Vitest を使ったユニットテストの方法まで体系的に学ぶことができます。

この本は全 13 章で構成されており、全ページ数は 415 ページになります。

各章の紹介#

ざっとこの本の章を紹介します。

各章の概要

• 第 1 章 フロントエンド開発の潮流と Vue

  • JavaScript の歴史やフレームワークが登場してきた経緯などを紹介しています。

• 第 2 章 Vite と Vue プロジェクト

  • Vue で開発するための環境構築を学びます。
    Node.js のインストール方法、VSCode に入れておいた方が良いプラグインの説明・「create-vue」を使用した Vue プロジェクトの作成方法を学びます。

• 第 3 章 Vue プログラミングの基本

  • Vue の基本構文を学びます。
    特に Vue の最大の特徴といっても良いリアクティブシステムについて学びます。

• 第 4 章 データとイベントのディレクティブ

  • データバインディングについての章です。
    属性とのバインディングやイベントとの連携などはこの章になります。

• 第 5 章 双方向データバインディングとその他のディレクティブ

  • ユーザーが入力したフォームと連携できる双方向データバインディングについての章になります。
    また、その他のディレクティブについての解説もあります。

• 第 6 章 制御のディレクティブ

  • 条件分岐の「v-if」、繰り返し処理の「v-for」など制御に関するディレクティブについての章になります。

• 第 7 章 スクリプトブロックのバリエーション

  • script ブロックの様々なパターンの紹介。
    この章でライフサイクルフックについても学べます。

• 第 8 章 コンポーネント間連携

  • 親から子への Props の受け渡しや、子から親への受け渡し方法を学べます。
    Provide/Inject を使用した親子間のデータの受け渡し方法も学べます。

• 第 9 章 子コンポーネント利用のバリエーション

  • 「slot」を使用した子コンポーネントの利用や動的にコンポーネントを切り替える、動的コンポーネントについての章になります。

• 第 10 章 Vue Router

  • 「Vue Router」を使用した、ルーティング設定の方法を学びます。

• 第 11 章 Pinia

  • Pinia を使用した状態管理についての章になります。
    Provide/Inject との違いなども学べます。

• 第 12 章 非同期処理

  • 非同期処理に関して簡単な説明や IndexDB を利用した、データベースとの連携や WebAPI の読込などについて学習できます。

• 第 13 章 ユニットテスト

  • Vitest でのユニットテストの方法を学びます。

良かったところ#

この本を読んで良かったところをまとめます。

Vue3 と TypeScript を学べる#

この書籍では「Composition API」を使用した Vue3 と TypeScript を使用したフロントエンド開発の方法を学べます。2022 年の書籍になりますが、自分みたいに Vue2 時代の知識しかない人でもざっと Vue3 の概要を学べるので、Vue3 を学びたい人にはおすすめです。

解説が丁寧#

とにかく解説が丁寧に書かれているので、詰まるところがなく読むことができました。また例えば、双方向バインディングなどがどのような仕組みで動いてるかなど丁寧に解説されてるので、Vue の仕組みなどを理解することができました。

Map や Set などのデータ構造の紹介#

この本では、Map や Set などを使用してデータ構造を扱う部分が多々ありました。Map や Setなどは Vue 特有ではなく、JavaScript の標準機能ですが、自分ではあまり使ったことがなかったので、この本で学び便利そうなので使ってみようと思いました。

また、その際のv-forなどでの回し方も丁寧に解説されているので、この本を読んでいるとどういうときにMapやSetを使うのかなどの理解が深まりました。

まとめ#

最新の Vue3 を復習するために、「Vue3 フロントエンド開発の教科書」を読んだので紹介しました。自分みたいに、Nuxt.js を使用しているが、Vue3 の知識が曖昧な方はぜひこの書籍で体系的にざっと学んでみることをおすすめします！