【感想】速習Vue.js 速習シリーズ【JavaScript】

IT 読書開発プログラミング JavaScript フレームワーク Vue.js フロントエンド

速習シリーズのVue.js本

　最近本も出てきて活気づいてきたjavaScript フレームワーク Vue.jsの入門書がまた出ています。著者は『JavaScript本格入門』などで知られる山田祥寛さんの本。短い時間で基礎を一通り網羅しようという電子書籍オンリーの速習シリーズの一冊です。

速習Vue.js 速習シリーズ

作者:山田祥寛
発売日: 2018/03/28
メディア: Kindle版

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

　これまで世界中で使われてきたjQueryの問題点と、JavaScript フレームワークとはなんぞやという話、そして2018年春の現時点で有名なものとしてAngular/React/Vue.jsの3つを紹介。フレームワークはあくまで手段で、万能の銀の弾丸ではないという但し書きも添えて、その中でVue.jsの立ち位置としては導入が簡単で既存アプリへの導入もしやすく、学習コストも比較的低いので取り入れやすいですよ…という触りの部分を一通り流しています。
　作者の山田祥寛さんはAngular4の本としてはとても役に立つ『Angularアプリケーションプログラミング』の作者でもありますが中立的な立場で書いており、絶対のフレームワークというのはなくて適材適所ですよと述べています。このへんは良いですね。 iwasiman.hatenablog.com

　この、フレームワークやライブラリなど諸々は結局は適材適所だ……という話は真理でもあり、エンジニアなら大抵知っていることでもあります。なんですがどーもJS界隈の各種ネット情報やQiitaとか海外の翻訳記事を見ていると、自分の推している特定のFWをアゲて他をサゲるような意見が時々見られますね。他のプログラム言語だとあまり見ないので、新たに学ぶ身からするとなんでJS周りだけこういうのがあるんだろうなあというのは不思議なところでもあります。

Part 2：Vue.jsの基本

　Vue.jsのインストール方法として<script>タグで埋め込む一番簡単な使用方法、データバインディングの各種方法の説明。忘れがちな、式を受け付けずにそのまま表示する v-pre も載っています。
　Vue.jsの特徴的な機能である computed プロパティに書く算出プロパティについては、アプリ独自のルールでデータを加工して表示したい時に使うのが本来の使い方だと述べています。ネットの記事や公式サイトの例のひとつにある firstName と lastName の結合表示ではなく、メールアドレスを加工して表示するというより実践的な例を挙げています。
　methodsプロパティに定義した単なるメソッドでもまったく同じ事ができる件については、算出プロパティは依存するプロパティが変更された場合のみ評価される。値を常に変更したい時はメソッドを使うと良いと述べています。このへんは初めて触る人は混乱しがちなので、よく説明されていると思います。

Part 3：イベント処理

　ボタンクリックなどでお馴染み v-on ディレクティブなどの話。イベントハンドラーのメソッドの第1引数(変数名は通常e)で取れる主なメンバも書いてあって役立ちます。v-on：click側に引数を書いた時は、第2引数以降に$eventと書くとイベントハンドラー側で取れる話はけっこう見落としがちですね。
　キー押下のイベントについては主なキーコードのエイリアス、マウスのキーの取り方も一覧化してあり、こうした細かい点がよく補足されている印象です。

Part 4：フォーム開発

　ネットの紹介記事などでもよく見る v-model ディレクティブを使った双方向バインディングの章。Vue.jsを使っているとinputタグのvalue属性は無視されることも欄外のノートにしっかり書いてあったりして地味に重要です。(僕も実際に試してやっと理解しました……)
　フォーム部品についてはテキストボックス、ラジオボタン、チェックボックス、単数・複数のセレクトボックスと一通りの例と解説が載っています。
　v-model.number= のようにnumber修飾子をつけると数値に変換されるので受けたJS側での変換コードが不要、trimをつけると空白除去、lazyでフォーカスが外れるまで描画が遅延されることも載っています。
　また v-modelは v-bind と v-on:input ディレクティブを組み合わせた書き方と動作としては等価であることも解説してあります。このへんも初学者だとコードを実際に書いていくうちに意外と混乱しがちなので、ありがたいですね。

Part 5：条件分岐とループ

　こちらも基本、v-ifディレクティブを使った分岐の話。v-showを使うとDOM上には存在を続けて、スタイルがdisplay: none;になって非表示にされるだけなのも実例を挙げて解説しています。
　実務では一覧表示でほぼ必須で出てくる v-forは配列の絞込には算出プロパティを使ったほうがよいことも解説してあります。
　これらのディレクティブはHTMLの属性的に書くので、不要でも <div>や<span>で囲ったりしますが、使いたくない時は <template> 要素を使うと良いことも記述があります。(僕も一通り学んだつもりだったのにこれ見落としてました……)
　よくネットのVue.jsやってみました記事などで失敗例に出てくる、配列を操作して表示を自動で変更したいときは、Vue.jsがサポートしている一連の配列操作メソッドでないと感知されないことも補足されています。この話は公式ガイドのリストレンダリングのところに書いてあるんですがぱっと見だと分かりづらいのか、やっぱり最初は見落とす人が多いようです。(含む自分)

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

　バインディングの応用編の章。

タグの属性をまとめて指定したい時は v-bind="[JSオブジェクト名]"でも行ける。
v-bind:text-content.prop のようにすると対象要素のtextContentプロパティ(=実際の表示内容)も変えられる。
v-onceをタグにつけると一度だけ変換される。
v-bind:style="[JSオブジェクト] で行うスタイルバインディング。
v-bind:href= のようにするとタグのhref属性も変えられる。
v-bind:class="[JSオブジェクト でtrue/false形式で指定するとCSSのクラスも変えられる。オブジェクト、変数の配列、混在なども可能。
pタグなどに v-cloakディレクティブを付けると、一瞬の生の式表示を消して初期化状態で表示してくれる。別途CSSで v-cloakクラスとしてdispay:noneなどを定義。

v-bind:style と v-bind:class は既存のスタイルがあるとうまくマージしてくれたり、Vue.jsはよく出来ているのですが、このへんの解説の例は公式ガイドのものより分かりやすいかもしれません。

Part 7：コンポーネント

　本格的な開発ではほぼ必須になってくるVueコンポーネントの話。
コンポーネントの定義方法、グローバル登録とローカル登録、親のインスタンスやコンポーネントからパラメータを引き渡し、propsで受け取る方法など一通り。
　prop-param1="123"のように渡すと数値でも文字列扱いになること、元の値を維持したいなら v-bind:prop-param1=...とバインディングする必要があること、また v-bind:prop-param1="'123'"とクオートで囲うと明示的に文字列と認識され、コンポーネント生成時だけ値が渡ってその後の変化は渡されない(=バインディングされていない)話などもしっかり解説されています。
　渡ってきたパラメータを props を受けた側では変更してはいけない(親の側で変えるかもしれないから)なども、実践的です。このへんも実際に試してあれこれいじってやっと体感的に分かってくるところでもあるので、最初から解説してくれるのはありがたいですね。
　他、slotを子コンポーネントのtemplate部分で使うと、呼び出し側でのコンテンツを埋め込める話など。

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

　JSコード内で Vue.directive('customDirective', { ... のように作ると、 <span v-customDirective="param1"></span> のように実はディレクティブも自作可能。

Vue.use({プラグイン名}, {パラメータ}); のように書くとscriptタグやnpmでインストールプラグインも使用可能で、実は所定の書き方で独自プラグインも自作可能。

　フィルター処理はVue.js 1.x では機能として存在したが2.xでは削除されたので、プラグインで作る形。

　このへんはネットの日本語の解説記事などでもほとんど見ないので、貴重な情報です。

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

　手軽に新規プロジェクトを作る時に推奨されている公式モジュールvue-cliの使い方の章。ただし初学者が一番最初から使うのは非推奨で、Node.js周りをある程度知ってからやった方がよいと但し書きされています。
　vue-cliで作ったプロジェクトのディレクトリ構成もあり参考になります。単一ファイルコンポーネントについては補足としてちょっと触れるだけに留まっています。

Part 10：ルーティング

　vue-cliで自動生成されたプロジェクトを前提にしたルーティングの章。実際にはvue-cliの内部動作として公式モジュールのvue-routerが一緒にインストールされ動作しますが、vue-routerの名前は前面には出てきません。
　URLでコンポーネントを起動したい、リンククリックで飛びたい場合などの指定やパラメータの持たせ方など。

まとめ：Vue.jsの基礎を一通り、短時間で学べる本

　対象読者はJavaScript自体はある程度分かっており、新たなフレームワークを学んだりしたい人となっています。速習シリーズなのでレイアウトはPDFそのままですが、まあここは仕方ないでしょう。167ページで読むだけなら数時間、１日でさっと学べます。全体的に初心者が躓いたり混乱しそうなところがよく補足してあり、実践的な印象です。
　既にある程度Vue.jsを分かっている方なら読むだけでも知識の穴埋めに。本当に初めての人はサンプルコードをDLして一式動かし、あちこちいじって動作を変えたりエラーを出したりすることでも習得していけると思います。お値段も安いので電子書籍環境のある方なら買って損はないでしょう。

サンプルコードのダウンロード： www.wings.msn.to

iwasiman.hatenablog.com

　先日の記事で上げました技術書典発、nasum (id:Tomato-360) さんの本『Hello!! Vue.js』も入門本なので被っているといえば被っているのですが、比べてみますと……

両方にある：Vue.jsとはなんぞや、基本一式、v-bind/v-on/v-modelなど各種ディレクティブを使った書き方、イベント処理、フォーム部品一式、算出プロパティ、vue-cliを使った構築、vue-routerによるURLルーティング
『速習Vue.js』のみ：あちこちにノートで補足情報、イベント処理でキーイベントの取り方など詳しい話、データバインディングの応用編として各種styleやclassなどの指定方法、ディレクティブやプラグインの自作方法
『Hello!! Vue.js』のみ：Vue.jsのProgressive Frameworkの思想、Reactとの対比、PHPのLaravel/RubyのRailsと実例を上げた始めた方、実際のアプリケーションでの実装例(ToDoリストアプリ)、単一ファイルコンポーネント、状態管理ライブラリVuex