【新刊紹介】『速習 Vue.js 3』発売、人気のJavaScriptフレームワークを学べる入門書

　CodeZineに寄稿いただいている執筆コミュニティ「WINGSプロジェクト」代表の山田祥寛さんによる、JavaScriptフレームワークVue.js解説書『速習 Vue.js 3』が9月19日に刊行されました。本書は9/19にリリースされたばかりの最新Vue.js 3に対応。Vue.js 3の使い方を12個のPartに分けて、サンプルコードとともに詳しく解説しています。隙間時間を使って、テンポよく人気のフレームワークを学んでみませんか？

　本書は、JavaScriptフレームワークVue.jsについて短時間で概要を掴みたい方のための書籍です。Vue.js 3の使い方を12個のPartに分けて、サンプルコードとともに詳しく解説しています。後半では、Vue CLIを使った開発も紹介しています。隙間時間などを利用してサクッとVue.jsをマスターしましょう。

 

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

　本書はWINGSプロジェクト刊行のKindle電子書籍です。短時間でサクッと読める軽めの本をコンセプトとした「速習」シリーズの最新刊となります。同シリーズでは、これまで「速習 Spring Boot」「速習 webpack 第2版」「速習 ECMAScript 2020」「速習 TypeScript 第2版」などを送り出してきました。

　本書は、ビュー（見た目）に特化したシンプルなJavaScriptフレームワーク「Vue.js」の解説書。Vue.jsの基本からコンポーネントの開発、Vue CLI（コマンドラインツール）、Vue Router（ルーティング）、Vuex（データ管理）まで、一通りの知識を短時間で学べるように、必要な知識をコンパクトにまとめて構成しています。

　9/19にリリースされたばかりの最新Vue.js 3に対応しており、Vue.js 2からの主な変更点については、Appendixでまとめています。バージョン 3から新たにVue.jsに取り組む方はもちろん、バージョン 2からVue.jsを使っているという方もきっとご利用いただけるのではないかと思います。

　「JavaScriptでの開発にフレームワークが必要なの？」「面倒くさくないの？」と気になっている方のために、本書の冒頭部分をちょっとだけ覗いてみましょう。

　たとえば、なにかしらの入力をトリガーにデータを取得し、その結果をページに反映させる、といった処理も、jQueryでは、「入力値を文書ツリーから取得し」「Ajax通信に引き渡し」「取得した結果を（たとえば）<ul><li>要素に加工したものをページに埋め込む」という操作が必要になります。JavaScript側では、常に入出力にあたって、文書ツリーを意識しなければならないのです。

　この交換は大概面倒なもので、レイアウトとコードの混在は、アプリ全体の見通しを悪くします。日常的に文書ツリーの操作を繰り返すSPA（Single Page Application）ともなれば、jQueryで実装するのは現実的ではないでしょう。

　そこで求められたのが、文書ツリーとオブジェクト（JavaScript）との間を取り持つJavaScriptフレームワークの存在です。

　...中略...

　Vue.jsはビュー（見た目）の部分に特化したフレームワークなので、導入はカンタンです。学ぶこともごく限られています。Angularに比べると、原始的に感じるところもありますが、「既存のアプリ（たとえばjQueryで管理していたアプリ）が複雑になってきたので、フレームワークを導入したい」という場合には、気軽に後乗せできるという手軽さが強みです。

　周辺ライブラリも充実しているので、あとからフロントエンド開発の範囲が広がってきた場合に、徐々にスパイラルアップしていくことも可能です。

　いかがでしょうか。冒頭のほんの一部だけですが、少し興味がわいてきたでしょうか。「もっと見てみたい」と思われた方はぜひ、続きを読んでみてください。ご感想、ご意見をお待ちしております。

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

　私自身は、jQueryで簡単なページを作成したことがあるというレベルです。Vue.jsも気にはなっていたものの、これまで触れる機会はありませんでした。すぐさま仕事での必要性があるわけではなかったのですが、ちょうどWINGSプロジェクトの速習シリーズでVue.js 3対応の本が出たことを知り、レビュアー募集に応募させていただきました。

　「速習」というだけあって、1つ1つのパートは短く、テンポよく読めますし、サンプルもダウンロードして手元で試せるので、学習コストは低いなと感じました。特に、Part 9まではCDNを使っており、書籍の内容を手軽に確認できるのが便利でした。

　Part 10以降は、Vue CLIを使っており、ライブラリのインストールにちょっと時間がかかります。コマンドラインツールを使うのも初めてだったので、少しだけ手間取りましたが、特に迷うことはなかったです。最初のサンプルだけ、本の通りに見様見真似でコマンドを打って、いちから作成してみました。手順を追ってプロジェクトを作成していき、内容を確認、コードを追加していくという流れなので、無理なくコマンドラインでの開発にも慣れていけます。

　Part 11、12はVue Router、Vuexという拡張ライブラリの解説です。色々と聞き慣れない用語がたくさん出てきて、始めは戸惑いましたが、解説のための図も豊富になってくるので、問題なく理解できます。速習と言いながら、結構な応用まで触れてくれるのはありがたいです。

　最後のAppendixには、バージョン2から3での変更点がまとめられています。私はそうなんだ、という程度でしたが、バージョン2から触ってきている人には、役立つ情報なのではないでしょうか。

　本全体を通して、解説の途中にNoteというコラムのようなものがあり、そこに「こんな書き方もできる」といった別解や用語の補足、注意事項などが書かれていました。まだ、別解は試していないので、次の休みにでも試してみたいと思います。

　Vue.jsの入門書として1冊目に選んで正解だったな、と思っています。いまからVue.jsを勉強する人におすすめしたい本です。

仕様

• 書名：『速習 Vue.js 3』
• 著者：山田祥寛
• 出版社：WINGSプロジェクト
• 頁数：211ページ
• 定価：636円（＋税）
• 色数：4色
• 刊行日：2020年9月19日

目次

　はじめに

• 対象読者
• サンプルプログラムについて
• 動作確認環境について

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

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

　Part 2：Vue.jsの基本

• 2.1 Vue.jsのインストール方法
• 2.2 Vue.jsアプリの基本
• 2.3 ディレクティブによるデータアクセス - v-text
• 2.4 {{...}}式を無効化する - v-pre
• 2.5 文字列をHTMLとして埋め込む - v-html
• 2.6 属性値にJavaScript式を埋め込む - v-bind
• 2.7 プロパティ値をアプリ独自のルールで加工する - 算出プロパティ

　Part 3：イベント処理

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

　Part 4：フォーム開発

• 4.1 さまざまなフォーム要素の例
• 4.2 バインドの動作オプションを設定する - 修飾子
• 4.3 双方向データバインドのカスタマイズ

　Part 5：条件分岐とループ

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

　Part 6：もっとデータバインディング

• 6.1 属性に値をバインドする - v-bind
• 6.2 値を一度だけバインドする - v-once
• 6.3 要素にスタイルプロパティを設定する - v-bind:style
• 6.4 要素にスタイルクラスを設定する - v-bind:class
• 6.5 {{...}}式による画面のチラツキを防ぐ - v-cloak

　Part 7：コンポーネント

• 7.1 コンポーネントの基本
• 7.2 コンポーネントへのパラメーターの引き渡し
• 7.3 子コンポーネントから親コンポーネントへの伝達 - カスタムイベント
• 7.4 コンポーネント配下のコンテンツをテンプレートに反映させる - スロット

　Part 8：もっとコンポーネント

• 8.1 大規模なコンポーネントを開発しやすく - Composition API［3］
• 8.2 テンプレート配下のコンテンツを任意の場所に反映させる - Teleport［3］
• 8.3 非同期処理の待ちメッセージを表示する - Suspense［3］

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

• 9.1 ディレクティブの自作
• 9.2 プラグイン

　Part 10：コマンドラインツールVue CLI

• 10.1 Vue CLIのインストール
• 10.2 プロジェクトの自動生成
• 10.3 単一ファイルコンポーネント

　Part 11：ルーティング

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

　Part 12：Vuex

• 12.1 Vuexの組み込み
• 12.2 Vuexによるカウンターアプリ
• 12.3 Vuexストアの構成要素

　Appendix Vue.js 3での変更点

• Vueクラスの初期化
• dataオプションの記述
• Global APIの変更
• キー修飾子（キーコード）の廃止
• フィルターの廃止
• その他の追加／変更点