CodeZineニュース

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

2022/05/02 09:00

ポスト

ポスト

　執筆コミュニティ「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 CLI	create-vue（Vite）	アプリ開発のためのCLIツール
Vuex	Pinia	状態管理ライブラリ
Mocha／Jest	Vitest	テストライブラリ

　この辺は、別稿「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日

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 ユニットテストのさまざまな手法

関連リンク: 速習 Vue.js 3 - Composition API編

この記事は参考になりましたか？

印刷用を表示

ポスト

この記事の著者: CodeZine編集部（コードジンヘンシュウブ）

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事