【新刊紹介】『速習 Vue.js 3 - Composition API編』発売、Vue.js 3の新たな標準が学べる入門書

　執筆コミュニティ「WINGSプロジェクト」代表の山田祥寛さんによる、JavaScriptフレームワーク「Vue.js」の入門書『速習 Vue.js 3 - Composition API編』が4月27日に発売されました。本書は、新たな標準環境Vite、Pinia、Vitestなどに対応。Vue.js 3の使い方を13個のPartに分けて、サンプルコードとともに詳しく解説しています。サンプルをダウンロードして実際に動かしながら、人気のJavaScriptフレームワークを学んでみませんか？

　本書は、2020年9月に刊行された『速習 Vue.js 3』をVue.jsの新しいAPI「Composition API」対応で全面的に書き直したもの。Vue.js 3の使い方を13個のPartに分けて、サンプルコードとともに詳しく解説しています。導入から、SPA（Single Page Application）開発のための基礎知識まで、短時間で習得しましょう。

担当編集者からのコメント

　「「速習」シリーズ」は、WINGSプロジェクトが進めるAmazon Kindle電子書籍のシリーズ。短時間でサクッと読める、差分の知識を手軽に補う――をコンセプトとしています。2015年にリリースして以来、お陰様で巻を重ねて、本書で19冊目となります。

　その本書、「速習 Vue.js 3 - Composition API編」は、ビュー（見た目）に特化したシンプルなJavaScriptフレームワーク「Vue.js」の解説書です。

　Vue.js 3については、2020年に刊行した「速習 Vue.js 3」がありますが、その時からですら、Vue.jsを取り巻く環境は大きく変化しました。Vue.js 3で標準搭載されたComposition API（と、その省略記法であるsetup属性）がデフォルトの記法となりました。伴い、周辺ツールも大幅に刷新しています。

　この辺は、別稿「Vue.jsの世代交代が到来！ Vue 3デフォルト時代の「Vue.js開発新常識」」でも取り上げているので、併せてご覧いただくと良いかと思います。

　本書は、旧著では手薄であったComposition API（＋setup属性）に全面的に対応すると共に、これらの新標準に対応した書籍です。

　とは言え、あくまで「速習」シリーズ。Vue.jsが初めて、という人でも、短時間でフレームワークプログラミングに馴染めるよう、「こんにちは、世界！」アプリからはじめ、SPA（Single Page Application）開発までを順序立てて解説しています。

　書籍の性質上、ベースとなるJavaScriptそのものの理解は前提となります。そちらの理解を補いたい方は、同著者の「JavaScript逆引きレシピ 第2版」（翔泳社）も併せて参照してください。

　ということで、本書が、皆さんがVue.jsに触れる一助となることを願っています。ご感想、ご意見をお待ちしております。以下、刊行前に先行で本書をお読みいただいた「春の嵐」さんからのレビューもどうぞ！

一般読者からのコメント（春の嵐さん）

　「速習」というシリーズ本で、Vueの.js入門者向け解説本です。Composition APIで説明されています。

　以前のVue.jsではVue CLI＋Options APIが主に使われていましたが、今後はViteベースの新しいCLIツールcreate-vue＋Composition APIを使うようです。

　本書は、その新しい方法で全編解説がなされています。

　本書を最初に開いた際、目次に見慣れない単語が並んでおり、難しそうに感じましたが、、実際に読んでみると、サクサク読むことができました。概念図や結果画面が多く掲載されており、数時間で目を通すことができました。

　その後再度、サンプルをダウンロードして動かしながら、読みました。薄さのわりに中身は結構濃いので、動作を確認しながら読んだ方がより理解が深められると思います。

　個人的には、「Part 9：組み込みコンポーネント」や「Part 12：Pinia」がとても興味深かったです。

　たとえば、「Transition」で、ToDoリストの項目追加時にアニメーションを付与し、見た目を少しリッチにできたり、「Suspense」で重い処理が完了するまで、ローディングメッセージを表示し、ユーザーの体感速度を調整できたりするのは、役立ちそうです。

　また「アクションサブスクリプション」でステートの内容をストレージに保存するのも、ちょうど開発で悩んでいたテーマだったので、さっそく使ってみたいと思いました。

　時折登場するNoteには、省略構文やサンプルコードの別解、注意事項などが説明されており、プラスアルファな情報が得られます。JavaScriptの解説は本書の範囲外ですが、調べるキッカケになりますし、本書で不足な点を調べるのに支障もありませんでした。

　これからVue.jsを始めるなら、最初の1冊に最適な本ではないでしょうか。

仕様

• 書名：『速習 Vue.js 3 - Composition API編』
• 著者：山田祥寛
• 出版社：WINGSプロジェクト
• 頁数：271ページ
• 定価：700円（税込）
• 色数：4色
• 発売日：2022年4月27日

目次

　はじめに

• 対象読者
• 動作確認環境について

　Part 1：イントロダクション

• 1.1 JavaScriptフレームワークとは？
• 1.2 jQueryの問題点とJavaScriptフレームワーク
• 1.3 主なJavaScriptフレームワーク

　Part 2：はじめてのVue.js

• 2.1 Vue.jsのインストール方法
• 2.2 サンプルアプリの内容を確認する
• 2.3 学習を進める前に

　Part 3：Vueアプリの基本ルール

• 3.1 Vueアプリで「Hello, World」
• 3.2 リアクティブシステム
• 3.3 算出プロパティとメソッド

　Part 4：ディレクティブとデータバインディング

• 4.1 ディレクティブによるデータアクセス - v-text
• 4.2 {{…}}式を無効化する - v-pre
• 4.3 文字列をHTMLとして埋め込む - v-html
• 4.4 属性値にJavaScript式を埋め込む - v-bind
• 4.5 値を一度だけバインドする - v-once
• 4.6 要素にスタイルプロパティを設定する - v-bind:style
• 4.7 要素にスタイルクラスを設定する - v-bind:class
• 4.8 {{…}}式による画面のチラツキを防ぐ - v-cloak

　Part 5：イベント処理

• 5.1 イベントの基本
• 5.2 イベントオブジェクトを参照する
• 5.3 定型的なイベント処理を宣言的に指定する - イベント修飾子
• 5.4 キーボードからの入力を識別する - キー修飾子
• 5.5 マウスの特定のボタンを検知する - マウス修飾子

　Part 6：フォーム開発

• 6.1 フォーム開発の基本
• 6.2 さまざまなフォーム要素の例
• 6.3 バインドの動作オプションを設定する - 修飾子
• 6.4 双方向データバインディングのカスタマイズ

　Part 7：条件分岐とループ

• 7.1 式の真偽に応じて表示／非表示を切り替える - v-if
• 7.2 式の真偽に応じて表示／非表示を切り替える - v-show
• 7.3 配列／オブジェクトを繰り返し処理する - v-for
• 7.4 v-forによるループ処理の注意点

　Part 8：コンポーネント連携

• 8.1 コンポーネント連携の種類
• 8.2 コンポーネントへのパラメーターの引き渡し - プロパティ
• 8.3 子コンポーネントから親コンポーネントへの伝達 - カスタムイベント
• 8.4 コンポーネント配下のコンテンツをテンプレートに反映させる - スロット
• 8.5 子孫コンポーネントへの値の引き渡し - Provide／Inject

　Part 9：組み込みコンポーネント

• 9.1 コンポーネントを動的に切り替える - <component>要素
• 9.2 アニメーション機能を実装する - <Transition>要素
• 9.3 テンプレート配下のコンテンツを任意の場所に反映させる - <Teleport>要素
• 9.4 非同期処理の待ちメッセージを表示する - <Suspense>要素

　Part 10：ディレクティブ／プラグイン

• 10.1 ディレクティブの自作
• 10.2 プラグイン

　Part 11：ルーティング

• 11.1 ルーターの基本
• 11.2 パスの一部をパラメータ―として引き渡す - ルートパラメーター
• 11.3 複数のビュー領域を設置する
• 11.4 入れ子のビューを設置する

　Part 12：Pinia

• 12.1 Piniaの組み込み
• 12.2 Piniaによるカウンターアプリ
• 12.3 Piniaストアの活用

　Part 13：ユニットテスト

• 13.1 ユニットテストの基本
• 13.2 ユニットテストのさまざまな手法