【感想】基礎から学ぶ Vue.js【JavaScript】

基礎から学ぶVue.jsの猫本

　皆さんこんにちは。設計図共有サイトは活用してますかー？(挨拶)
　そんな、MS傘下になった設計図共有サイトの vuejs/vue に本体があるVue.jsがついにスター数10万突破、Reactも10万を越えました。Vue.jsは2018年現在ネットでも目にすることが多くなり活発になってきましたが、発売前から話題だった本書の感想をば。自分の観測範囲だとTwitterでも発売前後、けっこう反応がありましたね。
　著者はWebデザイナー/Webエンジニアとして活動中のmioさん。本の大きさは『JavaScript本格入門』とか『パーフェクト〜』とかの一般的ながっしりした技術書より一回り小さいA5サイズ、手軽に手に取れます。表紙のVロゴより目立っているにゃんこは本文中でもたびたび登場、中もカラフルで図表も多く、とても読みやすいです。一部では猫本とも呼ばれている模様。チェリー本とかサイ本とか忍者本とか金魚本とか技術書もいろいろありますね。

基礎から学ぶ Vue.js

作者:mio
発売日: 2018/05/29
メディア: 単行本（ソフトカバー）

note.mu mio3io.com

CHAPTER 1 Vue.jsとフレームワークの基礎知識

　おなじみVue.jsとはなんぞやという話、フレームワークの話から。ここでも公式や採用サイト、UIコンポーネントサイトのキャプチャ、コンポーネント化やスケールアップはこういうものだ…という図など文字以外の情報が多く、視覚的に理解させようという意図がよく見て取れます。
　Twitterでも話題になっていましたが、ライフサイクルダイアグラムの図の例えが「猫が起きてから寝るまで」になっているのはとても分かりやすいですね。確かに歯磨きも一日のライフサイクルに組み込んでいればフック処理と言える…！ところでこのにゃんこは朝と夜は磨かないのでしょうか…笑
　そしてVue.jsをすでにある程度わかっている人に要注目なのが、各章にあるCOLUMNとPOINT。実装時のハマりポイントなど重要情報がかなり詰まっています。1章には一番外側のVueインスタンスを囲うタグがまだDOMと認識されていないときに[Vue warn] : Cannot find element ...が出る話が載っていますが、あ〜これ僕もいちばん最初にやらかしました…

CHAPTER 2 データの登録と更新

　Vue.js公式がリアクティブシステムと称しているデータバインディングの章。ここでもJavaScriptとHTMLの実際のコード部分は色分けしてあり分かりやすいです。v−forを使ったリストレンダリングの例はスライムやドラゴンが出てくるRPGネタになっていて、プログラミング学習サービスなどを連想させます。
　v−forディレクティブにはv-bind:key="..."で不変でユニークなキーを指定しないとおかしくなることがある、あと意外と見落としがちな$elでルート要素が参照できる話、$refsでデータや要素が参照できる話も載っています。個人的には<pre>{{ $data }}</pre>でデータ全体をJSON表示できるというテクニック、これ全然知らなかった…！
　COLUMNでもJavaScript特有のthisが指す先が変わる話、仮想DOMの有用な解説が詳しく乗っています。Vue.jsを使うなら基本的にDOMでなくデータを操作する話は、UIライブラリ等の絡みでやむを得ずjQueryと共存させたりする場合は重要ですね。

CHAPTER 3 イベントとフォーム入力の受け取り

　v-on:click=""でボタンクリックのイベントを定義してデータを更新したりするやりかたの章。ここでもイベント修飾子やキー修飾子のエイリアスなど、細かいところまで解説しています。双方向データバインディングの流れも文章だけでなく図で示してあって理解しやすいです。
　そしてCOLUMNには、Vue.js管理部分の外側のネイティブJSやjQuery側からどうしてもイベントを渡したいときは、JSのdispatchEventを使うと可能という重要情報が…。オールVue.jsで小さなサイトを作ったり新規にSPAを作るなら不要でしょうが、既存のWebアプリケーションの一部にVue.jsを組み込んだりするケースではこういう情報が貴重です。

CHAPTER 4 データの監視と加工

　最初のうちはmethods:に定義した普通のメソッドと何が違うの？となりがちな算出プロパティやwatchプロパティ、フィルタの章。縦幅横幅の変更や、果物一覧リストの絞り込みを例に進んでいきます。
　ここでJSのデータ操作やユーティリティを集めた軽量ライブラリのLodashが出てきますが、序文などでどういうものか軽く説明があってもよかったのかなと思いました。(JS界隈ではきっと常識なのでしょうが、単に知らなかったので。)
　特定のデータや算出プロパティを監視して自動的に処理を行えるウォッチャについても、オプションやインスタンスメソッドで登録する方法、実行頻度の調整や複数の値の監視など詳しく解説されています。データ更新と非同期に行われるDOM更新の更新後の値に確実にアクセスできるというnextTrickの使い方は本書で初めて知りました。

CHAPTER 5 コンポーネントでUI部品を作る

　本格的な開発だと必須になってくるVueコンポーネントやスロット、テンプレートの書き方の章。ここでもブラウザの一画面をコンポーネントで分割した図や、コンポーネントから実体化していく色違いにゃんこズなど、図を多くしながら解説していきます。実際に作らないと分かりにくい親子間の通信の props down, event up の話もかなりのボリュームを割いて説明しています。コンポーネント同士が親子でない場合も、親というか一番外側のVueインスタンスを通して実は通信できるイベントバスも一緒に解説してあるのがありがたいですね。
　.syncを使うと実は複数の属性と同期できる、状態を持たない関数型コンポーネントというのもある、親コンポーネントのタグ記述部分で特別なis属性を使うと複数コンポーネントが切り替えられる…など、初めて見るようなかなり高度な使い方も載っています。

CHAPTER 6 トランジションとアニメーション

　文脈によって様々な意味を持つトランジションは、Vue.jsでは要は適用したい要素を <transition> タグで囲んでいろんなオプションやCSSを指定すると、ふわっと消えたりふわっと現れるあれを手軽に実現できる機能です。
　Vue.jsを初めて調べたときは「ふ〜ん」で飛ばしていたのですが(おい)、本書はWebデザイナー目線の本だけあって非常に気合が入っています。なんか、今までに見たVue.jsのまとまった情報の中で一番トランジションについて詳しいような気がします。(笑)　サポートページのトップも <transition> タグで囲われたにゃんこ3匹ですね。
　適用するCSSクラス名の変え方、Enter系クラスとLeave系クラスのカスタマイズ、グルーピングやタイミングの調整、リストのトランジションやイベントフックでのハンドラー登録など盛りだくさん。イメージの解説でもにゃんこが縦横無尽、上下左右にふわふわシュッと大活躍しています。
　実際の動く例は書籍用サポートサイトで見ることができるのですが、シュッと消えたり小気味よくするするっと動くのがCSSベースでけっこう簡単にできちゃうんですねえ。碁盤のような縦横に並んだ一覧リストのシャッフル入れ替えとかけっこう感動します。古い時代のJavaScriptでものを動かすのはけっこう難しいようなイメージが個人的にはまだ残っていたのですが、どんどん進化しているんだなあと改めて実感します。

CHAPTER 7 より大規模なアプリケーション開発

　ここらへんから本格的に、Vue.js周辺のエコシステム＋フロントエンド周辺のJS技術を使った本格的なアプリケーション開発の話になってきます。

モジュール化した複数のJSファイルをまとめるバンドルツールのwebpackの話。概念が絵で示されていて分かりやすい。
コンポーネントのHTML/JavaScript/CSSを拡張子.vueのひとつのファイルにまとめる単一ファイルコンポーネント。スコープ付きCSSについても解説。
ES2015モジュールとして、ES2015記法でのクラスやファイルの書き方。
サーバサイドJavaScript実行環境のNode.jsの導入方法。
トランスコンパイラのBabelについて。
Vue.js開発を支援するコマンドラインのツール Vue CLI。導入、コマンドの打ち方、フォルダ構成や設定。開発時と本番時のURLの違いに悩むにゃんこがかわいい(笑)
自作のUIコンポーネントなどをVue.jsプラグインとして登録する方法、実例。
ES2015記法のJavaScriptの書き方のサマリ。

本書はフロントエンドの技術全部を解説する本ではないので、それぞれの解説は軽くに留めてあるところもあります。初学者の方はおそらく、このあたりからぐっと難しく感じると思います。ここまでの章の理解をまず深めて、本章で扱われているそれぞれのフロントエンド技術についても別の本や資料などで別途押さえておくとよいでしょう。
　COLUMNでは単一ファイルコンポーネントの正体として、ふつうにコンポーネントとして定義するのと実はイコールだという話が載っています。このへんもVue.jsの理解が進むと自然とハラオチするのですがありがたいところです。

CHAPTER 8 Vuexでアプリケーションの状態を管理する

　複数コンポーネントからなる構成でデータと状態を一元管理してくれる状態管理の拡張ライブラリ、Vuexの話。ビューエックスでなくビューックスと読むのが本流らしいです。サーバサイド開発経験者の方向けにいうと、Singletonなインスタンスで中のメモリ上で各種データを持っていて、専用のgetter/setter経由オンリーでどこからでも取り出せる、簡易DB的な便利なクラスのような存在です。
　このVuexも理解するまでちょい難しいのですが、文字通りのバケツリレーの図で示したり実例を挙げながら、分かりやすく説明しています。非同期処理はcommit呼び出しの前、Vuexの導入は設計段階で早めに確定すべきなど、大事なところも解説しています。
　高度な使い方ではストアの分割やnamespaceでの区別、監視方法なども説明があります。
　最後のCOLUMNでは、全データ全状態をすべてVuexに置くのでなく、コンポーネント内で完結するデータはコンポーネント内に持ってもよいのではないかという話が載っています。Vue.jsはこのへん柔軟な思想のようですが、実際にものを作ってみると、確かにその方が自然かなと思います。アプリケーションレベルや画面レベルで事前に検討・設計し、方針を定めておくのも大事ですね。

CHAPTER 9 Vue RouterでSPAを構築する

　最後はシングルページアプリケーション専用、VueコンポーネントとURLを紐づけてくれるURLルーティング機能を提供する拡張ライブラリ、Vue Routerの話。
　画面イメージや最初は簡単な例を上げて実装方法を解説していきます。URLのハッシュモードを人スリモードに変えると /#/ が消えるとか、this.$route でルートの設定が取れるとかはへぇと思いました。パラメータ付きの遷移やネストされたページなど複雑な場合も、簡易ア◎ゾン的な商品購入ページを実例にとって順次説明していっています。遷移時にフック処理を入れるなど高度な使い方も説明もあります。ちなみに画面イメージに星5つのレビューネタが仕込まれているので要チェックです。
　最後の方で<transition>を導入して商品購入サンプルにもシャレオツなページ遷移が加わり、やっぱりこのへんがデザイナー視点の本だなあとちょっと思いました。
　最後のCOLUMNではSPAの注意点として、Vue.js任せでなく直接DOM操作でイベントリスナーを追加するコードがあると、明確にremoveしないとパフォーマンス低下やメモリリークの原因になる話が載っています。
　画面遷移ごとにHTTPリクエストとレスポンスを通して画面がリフレッシュされるサーバサイドメインの伝統的なWebアプリケーションだと、JS実装の比重が低ければこのへんはあまり気にしないのですが、やはりSPA特有の現象もあるのだなと思います。

気になったところ

★誤植は少しだけあるようですが、書籍用サポートページ＞コード&動作デモ＞誤記について　に掲載されています。
　そしてこのサポートページの充実度がすごい。本文中のほぼすべてのコードが載っていてコピペで写経でき、デモも豊富に用意されています。さらにVue.jsの実例集、チュートリアル、各種連絡先などなど完備されています。 cr-vue.mio3io.com

★ほか、あえて言うなら技術書の中では表紙がかわゆいので、人によっては電車の中とかで開くと気恥ずかしさを感じる人もいるかも知れません(笑) だったらブックカバーつけろって話ですね。そこは癒やし&和み効果があるので貴方の机にも一冊ということで。
　ちなみに、ほ〜らとーたんの新しい本だぞ〜とAmazonから届いたのをうちの娘に見せたところ、ニッコリ反応していました。しかしながら、ディープなラーニングを続ける1歳児の頭脳で表紙のニャーニャーをどこまで画像認識できていたのか、だいぶアヤしいところであります。

まとめ：Vue.js入門本の決定版だニャ

　同人誌を除いて商業流通で手に入る日本語のVue本としては『Hello!! Vue.js』『速習Vue.js』に続いての3冊目になります。新しい技術を扱った本はいくつあってもありがたいのですが、サポートページも本の内容もだいぶ時間をかけて準備してきたのでしょう、ひときわ充実しています。
　図表で伝えることをかなり意識しており、本文も多色刷りで全体的にかなり読みやすいです。オラ●リーのぶ厚い地味なレイアウトの本だと眠くなってしまうような人でもきっと挫折せずに進められるでしょう。イメージで言っていますが、なんとなく主軸がプログラミングがバリバリというよりデザイン寄りの人にはこういう本が向いているような気がします。
　ではデザイナー向けの軽い本なのか…というとさにあらず。内容はだいぶ詰まっていて、初心者がハマりがちなポイントや参考情報もかなり充実しています。僕も急ぎフロントエンドの学習を始めてVue.jsの基礎はだいたい分かったつもりだったのですが、読んでいてけっこう知らないことがぽろぽろ出てきました。このようにある程度学びが進んだ人にも得るものがあると思います。
　本がコンパクトなのでプロジェクトでフロントを担当する人に「これ読んどいて！」と渡すこともできますし、完全に初めての人は充実のサポートページを元に、色々コードを書いたり動かしてみたりでひとつじっくり学んでいくのも良いでしょう。