【新刊紹介】『速習Vue.js』発売、JavaScriptフレームワークを素早くマスターできる解説書

　CodeZineに寄稿いただいている執筆コミュニティ「WINGSプロジェクト」代表の山田祥寛さんのKindle本『速習Vue.js』が3月28日に刊行されました。

　ビュー（見た目）に特化したシンプルなJavaScriptフレームワークVue.jsの使い方を10個のPartに分けて、サンプルコードとともに詳しく解説。後半では、vue-cliを使った開発も紹介しています。

　速習シリーズは本書で第4弾となります。JavaScriptをある程度理解している方や、jQueryから移行したい方に向けて、Vue.jsの基本を短時間で習得するための知識を詰め込んだ1冊です。

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

　WINGSプロジェクト刊行のKindle電子書籍、5冊目となります。

　隙間時間にサクッと読める軽めの本をコンセプトとした「速習シリーズ」を、これまで「速習 ECMAScript 6」「速習 TypeScript」「速習 ASP.NET Core」と3冊送り出してきました。

　山田本というと、紙書籍では時に凶器になりそうなほど分厚く重量級なものもあるのですが、本シリーズは対照的に、ギュッと内容をコンパクトにまとめた「軽さ」を重視しています。

　おかげさまで、これまでの3冊は好評いただき、今回はその速習シリーズの第4弾「速習 Vue.js」となります。

　内容は、ビュー（見た目）に特化したシンプルなJavaScriptフレームワーク「Vue.js」の解説書です。JavaScriptがある程度分かる方、そろそろjQueryから移行したい方などを対象にVue.jsの基本を短時間で学べるように、必要な知識をコンパクトにまとめて構成しています。

　ちょっとした隙間時間で読めるように、各トピックを短く区切って構成しています。

　「何のためにVue.jsを使うの？」「難しくないの？」と、気になる方のために、少しだけ本の冒頭を覗いてみましょう。

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

　…中略…

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

　…中略…

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

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

　各機能をシンプルなサンプルコードとともに解説しています。そのサンプルはサポートサイトからダウンロード可能です。また、後半では、vue-cliを使った開発も紹介しています。ぜひ、ご覧になってみてください。

一般読者からのコメント（h.seriuさん）

　WINGSプロジェクトのKindle版速習シリーズであるJavaScriptフレームワークのVue.js入門書。Vue.jsに関しては名前だけは知っているという程度だったので早速読んでみた。

　ページ数も167ページとライトなボリュームのため、週末の空き時間を使って4日ほどで読破。サンプルソースコードもポイントを押さえたシンプルなもので分かりやすい。

　AngularJS1.4、Angularのビュー機能を使用した経験があったので理解できない内容もなく読み進められた。特にvue-cliによるプロジェクト開発のパートでは、Angularのローカル環境でのlight-serverでの開発とほぼ同じだなという感想を持った。

　内容的には、以下の内容でPart01からPart10まで構成されている。

Part01：イントロダクション

　各種JavaScripフレームワークAngular、Vue.js、Reactの紹介から、なぜ長年の実績のあるjQueuryではなくVue.jsが注目されているかの説明

Part02～Part08：Vue.js文法を中心とした解説

• 　Vue.jsのインストール方法からv-text、v-pre、v-html、v-bindの紹介
• 　イベントの基本からイベント修飾子、キー修飾子、マウス修飾子の紹介
• 　フォーム要素とフレームワークの最大の魅力（と個人的に考えている）双方向データバインディングの紹介
• 　条件ループと繰り返しとしてv-if、v-else、v-else-if、v-show、v-forの紹介
• 　コンポーネントの基本とスロットの紹介
• 　ディレクティブ／フィルター／プラグインの基本と自作方法の紹介

Part09：コマンドラインツールvue-cli

　Node.jsを使用してのインストール手順とプロジェクト作成の解説

Part10：vue-cliによるプロジェクトの開発

　ルーターの基本を中心した解説でプロジェクト単位での開発演習

　値段も定価 454円（＋税）とリーズナブルなので1冊目のVue.js入門書としてお勧めです。

仕様

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

目次

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

• JavaScriptフレームワークとは？
• jQueryの問題点とJavaScriptフレームワーク
• 主なJavaScriptフレームワーク
• 対象読者
• サンプルプログラムについて

Part 2：Vue.jsの基本

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

Part 3：イベント処理

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

Part 4：フォーム開発

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

Part 5：条件分岐とループ

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

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

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

Part 7：コンポーネント

• コンポーネントの基本
• コンポーネントへのパラメーターの引き渡し
• コンポーネント配下のコンテンツをテンプレートに反映させる - スロット

Part 8：ディレクティブ／フィルター／プラグイン

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

Part 9：コマンドラインツールvue-cli

• vue-cliのインストール
• プロジェクトの自動生成
• 補足：単一ファイルコンポーネント

Part 10：ルーティング

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