JSフロントエンドフレームワーク Vue.js の本格入門書
ロー◎製薬の目薬V・◎ートのマーク……じゃなかったVue.jsのVのロゴもブイっと眩しく輝く本格入門本。480ページという大ボリュームのがっつりした骨太な本です。
著者の中心となった川口和也さん(@kazu_pon)は、OSSとしてのVue.js自体の開発のコアチームでコントリビュートしてきた第一人者。僕がこの前sp.53で出てしまったテック系Podcast「しがないラジオ」の初期の頃のsp.9a/sp.9bや、同じくPodcastの「soussune」episode28でもゲスト出演されています。他のメンバーもそうそうたる顔ぶれ、Vue.jsを自社プロダクトのKARTEで活用していることで知られるPLAIDの方もおられますね。おっ、しがないラジオMeetup#2でご挨拶できた、めるさん(@c5meru)の名もありますぞ。
というように、日本のVue勢が集結した仕事レベルの本格開発向けの本です。
- JSフロントエンドフレームワーク Vue.js の本格入門書
- 1. プログレッシブフレームワークVue.js
- 2. Vue.jsの基本
- 3. コンポーネントの基礎
- 4. Vue Routerを活用したアプリケーション開発
- 5. Vue.jsの高度な機能
- 6. 単一ファイルコンポーネントによる開発
- 7. Vuexによるデータフローの設計・状態管理
- 8. 中規模・大規模向けのアプリケーション開発① 開発環境のセットアップ
- 9. 中規模・大規模向けのアプリケーション開発② 設計
- 10. 中規模・大規模向けのアプリケーション開発③ 実装
- Appendix
- まとめ：Vue.jsの仕事レベルの本格入門＆実践の書
- 付録：商業書籍によるVue.jsの学習順序を考えてみる
一応、このエントリの人のバックグラウンドとフロントエンド力(笑)
えー主軸はもろにサーバーサイド(≒バックエンド)エンジニアです。PerlでBBSが動いていた時代、その後JavaのServletが上陸してWebの時代が始まった時代から仕事で開発をしていたインターネット老人会乙な世代です。Google MapやAjaxやjQuery登場が衝撃を与えた2000年後半、その後のJavaScriptの苦難からの復権の時代も覚えています。
なんですが僕の属している比較的SIer寄り、エンタープライズ寄り、業務システム寄り、B2BやB2Eの開発では、アプリケーションの価値がユーザー・エクスペリエンスというやつよりもサーバーサイドの精密なロジックの中や複数人開発と機能拡張に耐えうる整然としたアーキテクチャ、サーバー側できっちり弾く堅牢なセキュリティ、綺麗に設計されたデータベースの中にあることが多いです。
また2000年代はJavaScriptがまだ発展途中だったこともあり、開発の中でクライアントサイドとJSが占める比率が低いことが多く、メインディッシュはサーバーサイド、付け合わせの副菜でちょっとJS的なスタイルが周囲では主でした。ブラウザによる挙動の違いやレガシーIE問題周りもありますね。このあんましJSを使わないという流れがなんとな～く2010年代も続いてる感がありました。本書の1章にもこのあたりの歴史の記述があります。
2010年代にJavaScriptの勢いがどんどん増していくのも若干離れた位置から見てはいたのですが、栄枯盛衰が激しすぎて混沌としてハードルの高さを感じたり、今までもJSはなんとなくで使っていたので自分も若干苦手意識があったりで、敬遠していたところがありました。フロントエンド力よわよわマンであります。
2018年に機会に恵まれたので一機入魂、ES6のモダンJSを復習しなおしてフロントエンドの基礎を学習。クライアントがJS＋サーバーサイドがPHPのLaravelの構成でJSの比率が非常に大きいWebアプリケーションに、フロントエンド技術の基本を導入して立て直して開発を進める案件をやりました。
この中でフルリニューアルやオールSPA化までは行かなかったのですが、特に複雑な画面、jQueryでDOM要素を直接操作しまくってグレイトなことになっていた画面(まあお察し下さい)に執念のリファクタリングを実施。メイン機能をVueコンポーネント化して切り離し、表示とデータとロジックを分離し、その後のデバッグや改造や機能拡張に耐えうるJSコードに改良するという実案件での実績を上げることができました。この案件のためにまだ商業本が揃う前の頃から、Vue.js情報を調べまくっていました。
以下、各章ごとに振り返りと感想などを。
1. プログレッシブフレームワークVue.js
2013年に誕生し続いてきたVue.jsの変遷と概要の章。Web自体の歴史も90年代から解説してあり、個人的には懐かしいところです。この2010年代に業界に入った若い方には縁がないかもしれませんが、こうした過去の経緯を知るとなぜ今の技術があるのかが分かる一面もあります。この歴史の中でフロントエンドが発展してきたというのも知っておくと役立つと思います。
そしてVue.jsの特徴として学習コストの低さ、コンポーネント指向であること、データバインディング、段階的に機能を増やしていけるプログレッシブ・フレームワークの設計思想など。
仮想DOMの内部的な話や、始めの一歩として約束のHello Worldを表示するVueインスタンス、オンラインでブラウザ上で動作が確認できるJSFiddleの話やVue関連コミュニティの話など。
本書含め、最近のフロントエンドやJavaScriptの本はだいたい一番最初に歴史が解説してあって親切だし読んでいても面白いですね。自分的にはこの1章はスラスラ読んで理解できて、ああやっぱりこの1年でだいぶ理解が進んだなと安心しました。
2. Vue.jsの基本
基本の章。最初にUI構築の考え方として、jQueryとの対比の話が述べられています。
- jQuery: DOMツリーがそのままUIを持ち、イベントごとにDOMツリーを直接変更していく。
- Vue.js: UIの状態をDOMツリーと別のJavaScriptオブジェクトで持ち、これを中心に考える。UIはこのJSオブジェクトで表現し、UIとDOMツリーをVue.jsがマッピングし、イベントでJSオブジェクトを通じて状態を変更していく。これがVue.jsのコーディングスタイルである。
本質はより短く書けるAPIの集合でしかないjQueryは設計の考え方がないのでなんでも適当に実装できてしまうが、Vue.jsはこの思想があるので規模が大きくなってもきちんとした設計を保ったまま開発していけるよ…という思想ですが、最初にこの話があるのはよいですね。
フロントエンド系の本だとサンプルコードがだいたい約束のToDoアプリのことが多いですが、本書は鉛筆などを買える文房具の購入フォーム画面を例に基本部分を解説していきます。
約束のVueインスタンスやマウント手順、Dataプロパティの定義、Mustache記法によるテンプレート、フィルタや算出プロパティ、各種ディレクティブなど一通り。
時々登場するコラムも、アーキテクチャパターンのMVVMパターンに触れていたり、既存アプリケーションへの組み込み方、リストのレンダリングは配列操作メソッドを再定義している話、算出プロパティのキャッシュの仕組みなどなど、何気に重要なお役立ち情報が多いです。
3. コンポーネントの基礎
実務レベルの開発だと必須になるVueコンポーネントについての概念と実装手順の章。
コラムでW3C提唱のWeb Componentsとの関連の話もあり重要です。また注釈で、「コンポーネント」という言葉は文脈によって意味が違うことも但し書きがあり、やっぱりこんへん混乱しがちなんだなと思います。
最初は簡単なフルーツ一覧表示のtableタグのコンポーネントを例に取り、親子関係やローカルコンポーネントなどを解説していきます。
面白いのは実は何通りかあるテンプレート構築手順で描画関数というのもあるんですね。コンポーネント内にrenderオプションでcreateElement関数の実行結果を返し描画だけやるのですが、このへんまで行くと同じくJSフレームワークであるReactチックな感じがしてきます。
よくprops down, events upの言葉で表わされるコンポーネント間通信もコラムで、親子のやりとりは$parent, $childrenを使って直接参照もできるけど、設計の混乱を招くため良くないとはっきり書いてあります。やはりフレームワーク側の提供するベストプラクティスに従った方がよいのですね。
そして、Vue.jsでは画面の中でどの単位でVueコンポーネント化するかが自由なので悩むのですが、コンポーネント設計での分割指針も書いてあってここが有用です。ほか、コラムではコンポーネント単位のコードでの単体テスト方法としてテストランナーのKarma、テスティングフレームワークにmochaを使った最初のテスト例も。
4. Vue Routerを活用したアプリケーション開発
Vue.js公式が提供しているURLルーティングのライブラリ、Vue Routerを使ってSPA用のURLルーティングを実現していく章。最初に設計としてまず全体を考えてからコーディング、パターンマッチング...と作業は進んでいきます。徐々にサンプルコードも長くなり、本章ではユーザ登録フォームとログイン・ログアウトの処理が出てきます。ネストしたルーティングやエイリアスなど高度な使い方も解説されています。
なお章末コラムで、公式にルーティングはVue Router、状態管理はVuexを使うことを推奨、だが必ず使えば良いという訳ではないということで導入指針が述べられています。これめっさ重要なので紹介しますと、
- 両方とも使わない：
URLルーティングがサーバーサイドで、複雑なコンポーネント構成がない、画面がシンプルなアプリケーション。従来のサーバーサイドメインのECサイトやキャンペーンサイトなどの1枚絵のランディングページ。 - Vue Routerのみを使う：
シンプルなSPAベースの管理画面や軽快なページ遷移を提供するゲームなど。(明確に記述されてはいないが、恐らくコンポーネントの数も少ないことを想定していそう。) - Vuexのみ使う：
1ページ内で複数のコンポーネントが通信してデータを連携するアプリ。 - Vue RouterとVuexを両方使う：
複数ページかつ複雑なコンポーネント構成の大規模SPA。メールやカレンダーアプリなど。
僕が実案件でVue.jsを使ったケースでは周辺情報をいろいろ調べた結果、この要件だとシンプルに両方使わないが正解だろうという結論に自然と達してそうしたのですが、本書を読んで改めてあの時のは正しい選択だったのなと思い返しました。
このへんはアプリケーション全体の設計時に迷いそうなので何気に超重要情報です。こういう設計観点の記述が多いのはとてもありがたいです。
最近はてブで話題になったQiitaの記事でも、Vuexはむやみに入れないほうが良いという論がありました。確かにカプセル化された巨大なグローバル変数みたいなものだというのはありますね。
5. Vue.jsの高度な機能
オプション的に様々な機能がある高度な機能を述べていく章。シュッとアニメーションで動かしていくトランジション、動きのイベントの前後にJavaScriptの処理をフックさせる方法、コンポーネント内のコンテンツを外側から受け付けるスロットの機能など。
実はV-で始まるディレクティブは自作できるとのことでカスタムディレクティブの方法。コラムでコンポーネントとミックスインとの違いも解説されていて重要です。
jQuery系にも直接DOM操作をしてしまうライブラリは多いですが、これらをVue.js用にカスタムディレクティブの形でラッパーしてくれたラッパー(Wrapper)ライブラリが提供してあることが多いので、これを使うと良いとあるのはへぇと思いました。
何かを中に包み込んでラップしたものを作ってそちらを使う手法、GoFデザインパターンだとAdapterパターンに近いやつですね。サーバーサイドの開発でもこういうのはよくやるんですが、抽象度が上がっていくとこの辺は同じなんだなあと思いました。
普段はテンプレートをコンパイラが自動的に描画関数に変換してくれているところ、描画関数は実は直接コーディングできるという高度な話も載っています。ただ必要なケースはかなり限られるとのことで、スキップしても良いのでしょう。この中身の話はReactの世界に近づいている感があります。
ほか、オブジェクト指向の継承と似ているけどちょっと違うミックスインは、名前のつけかたとして「動詞＋able」を推奨とあります。CountableとかSerializableとかSortableとかですね。このへん、他の言語におけるインターフェースの命名規約と同じで面白いです。
6. 単一ファイルコンポーネントによる開発
中規模以上の開発ではほぼ必須になる、.vueファイルの中にHTMLとCSSとJSロジックを書いてひとつのVueコンポーネントにするSingle File Componentsの章。
SFCが正式略称ですがVue Componentsと呼ぶこともあるそうです。同じくJSフレームワークのReactの世界だとStateless Functional Components(状態を持たない関数コンポーネント)も略してSFCだそうでややこしいですね。
ここまで来るとJSのビルドが必須になるのでほぼ必要ということで、手順でNode.jsをインストールし、セットアップにVue CLIも使う方式で例が進んでいきます。
.vueファイルを実装する際の色変え、シンタックスハイライトができるエディタとしてはVisual Studio Code、Web Stormが紹介されています。
ビルドの概念の図の中ではbrowserifyなどのライブラリも名前が出てきますが、単一ファイルコンポーネントが提供するすべての機能を利用できるのは、バンドルツールのwebpack、そしてwebpackでビルドする際に必要なライブラリのVue Loaderだけだとはっきり書いてあります。過去にはいろいろ経緯がありましたが、もうwebpack+Vue Loader固定と考えていいんですね。
単一ファイルコンポーネントの実装でHTMLをより省略して書ける、Railsでよく見るHamlやPug記法で書くやり方、CSSプリプロセッサのSassやLessで書くやり方、JSの代わりにTypeScriptで書くやり方もVue CLIを使うとうまく設定してくれる話も詳しく載っています。
また、SFCといったら<template>, <script>, <style>の3ブロックはもう固定の約束なのかと思っていたら実はカスタムブロックとして自作もできるとのことで、ブロック要素を自作する高度な話もコラムに乗っています。
7. Vuexによるデータフローの設計・状態管理
公式が提供している状態管理ライブラリのVuexの実装方法、そしてより重要になってくる設計の章。
状態を含むアプリケーションが持つデータの流れを「データフロー」と定義し、この設計が重要だと展開していきます。このへんを調べていくとよく出てくる、Facebook提唱のFluxアーキテクチャの図も出てきます。
複雑なデータの例としてToDoリストが出てくるのですが、Vue.jsの本を買うのは2つめのタスクで1つめのタスクは「牛乳を買う」になっていて、なんか老舗ToDoアプリのRemember The Milkを思い出しました。この各タスクにくっついたラベルを文字列でなくIDで持てば、修正時に全更新しなくて済むよ…と、RDBで言ったら外部キーで持つような話を例に進んでいきます。
データフローの頻出パターンとして「信頼できる唯一の情報源」「状態の取得・更新のカプセル化」「単方向データフロー」の3つが重要、これをVueで実装したライブラリがVuex。アクション→ミューテーション→ステート→ゲッターの4つの流れをまとめて「モジュール」という単位で呼ぶのは初めて知りました。
実際の例として、さきほどの牛乳を買ったりするタスク管理アプリをサンプルコードとして解説しています。Vuex側にはタスクひとつひとつにid,name, doneを持ったオブジェクトの配列として持たせる形ですね。この方式を使うとタスクの読み書きVuexストア内に集中し、アプリ側のコードは呼び出しのみになって良い設計になるよ…と論じています。
高度な話としては、Vuexストアとコンポーネントの繋がりを最小限に疎結合にする手法として、Reactで提唱されている表示コンポーネント(見た目だけのコンポーネント)とコンテナーコンポーネント(Vuexのストアにアクセスできるコンポーネント)の2つに分ける考え方はVueにも適用できる、という話が解説されています。
やはり実装よりも抽象度が一段上がって設計の話になると、こういう風に別のフレームワークでの考え方も適用できるのだなと改めて思います。
また最後にはURLからVue Routerが読み取って持っている値をVuexに渡したい…などの時に使えるvue-router-syncというライブラリが紹介されています。
8. 中規模・大規模向けのアプリケーション開発① 開発環境のセットアップ
仕事で使っている人には待望の、本格的な開発を解説していく章。このへんからぐっと難しくなっていきます。Twitterやブログを見ていると、初学者の人はこのあたりの章で挫折したというのを割と見かけますね。
まあVueコンポーネントや単一ファイルコンポーネントをうまく使うだけでもVue.js導入の価値はありますから、ハードルの高さを感じたらこの8〜10章は後回しにして、前半をきっちり理解する作戦でもよいかと思います。
最初にフロントエンド(クライアントサイド)とバックエンド(サーバーサイド)問わず、一般的なWebアプリケーションフレームワークがだいたい持っている機能要素を一覧で説明。
Vue.jsはプログレッシブ・フレームワークの思想があるので、高度な要素は使っても使わなくてもよいし後から別ライブラリで入れて拡張していける…という話を述べています。ここで対比として最初から全部乗せのフルスタックなフレームワークも存在することも書いてあり、本書では明言はされていませんがAngularのことを指していますね。
注釈で規模の定義もしてあります。この小/中/大規模って言葉ではけっこうフィーリングで使いがちなのですが、この本なりの定義がしてあるのもありがたいです。
- 中規模：開発者1〜2人で10画面前後、＋状態管理
- 大規模：開発者3人〜で20画面〜、＋複雑な画面遷移＋状態管理
8〜10章で開発していくのはカンバンアプリケーションです。最初にログイン画面、ログインするとTODO/WIP/DONEの3つのタスクリストがあり、その中に一つ一つのタスクがあり、追加したり更新したり削除したりという具合。
SPAのよくある構成でサーバーサイドはAPIとしてJSONを通信するだけ、サンプルコードでは省略されていますがNode.jsのExpressフレームワークで作られているという想定で進んでいきます。
開発支援ツールとしてVue CLIが必須になっており、あれこれ準備したりもすべてVue CLI経由で行います。注意点としては2018年8月リリースの Vue CLI 3.0〜では新しいプロジェクトを作る時にvue createコマンドを使いますが、本書では既存プロジェクトを考えてレガシーコマンドのvue initを使っているそうです。
本書の開発例では以下の順にセットアップを行っています。
- 各種ツールや設定ファイル、フォルダ構成など。Vue CLIを使うとフォルダ構成は自動で定まる。
- テスト環境もVue CLI経由だと一緒に揃う。単体テストとしてはテストランナーとしてKarma、テストライブラリでMochaなどを使う。
- E2Eテスト(結合テストとかシステムテスト)では、Seleniumの上で動くNightwatchというライブラリを使う。対応ブラウザは現在Chromeだけ。
- サーバー側が未実装の時は…モックサーバーを作ったり、APIを呼ぶ箇所や呼ぶ先で固定値を返したりはよく思いつくが、Vue CLIでは通信先URLを別のURLに自動的に変えてくれるプロキシ機能を元から持っている。
- サーバー側がどのフレームワークかにより、webpackテンプレートの設定ファイルで調整できるようになっている。例に上がっているのはRuby言語のRails、Python言語のDjango、PHP言語のLaravel、JS/Node.jsのExpress。
- コーディング環境はVSCodeを使い、VSCodeエクステンションでVeturを使ってシンタックスハイライトさせるのを推奨。
- コードチェックにはeslint-plugin-vueをnpmから入れる。
- デバッグはブラウザエクステンションのVue DevToolsを使う。ChomeとFireFoxで動く。
- 状態管理ライブラリは公式のVuexをnpm経由で入れる。
- サーバと通信するライブラリはjQueryでなく、axiosを使う。
- テストユーティリティとしてVue Test Utilsを準備。
- E2EテストのライブラリNightWatchに準備がいる。
僕もアーキテクト職としてサーバーサイドメインの開発をする時に、こんな風に案件ごとにライブラリやフレームワークやツールを決めたり、セットアップ手順をExcelの手順書に明確に書いて展開したり、バージョン管理システムに予め諸々登録してお膳立てをしたり開発メンバをフォローしたり…とだいたい似たようなことをしていて共感するのですが、大規模開発になるほどだいぶ手順が多くて大変ですね。もうVue.jsで中〜大規模の新規プロジェクトを始める時はこの本の本章の手順をお手本にしてやるような感じでよいと思います。
また、僕は結局Vue CLIは実案件では使わなかったのですが、最初に知った時は「プロジェクトを新規に作る時にフォルダ構成とかライブラリとか諸々いい感じに準備してくれるスターターキットみたいなやつ」という雑な理解の仕方をしていました。開発メンバが増えて規模が大きくなればなるほど、Vue CLIの効果が増していきますね。
やはりこうした、フレームワークごとのエコシステムで標準で提供しているツールを使い、自然とベストプラクティスに沿うように開発していくのは大規模開発では重要なのだなと改めて思いました。
9. 中規模・大規模向けのアプリケーション開発② 設計
規模が大きくなってくるとコード書く前にとにかく設計が大事…ということで、以下の3要素に分けて設計を進めていく章。
コンポーネント設計
コンポーネントの粒度はフロントエンド界隈でよく聞くAtomic Designの手法に従って決めていきます。Atoms, Molecules, Organisms, Templates, Pages の5段階のどこに何が入るのか範囲が分かりにくいのですが、お題のカンバンアプリで画面要素のどこがどの段階に入るのか例を載せているのでイメージしやすいです。
コンポーネント化すると決まったものはすべて単一ファイルコンポーネント化し、名前の先頭にここではPrefixでKbnをつけています。やはり先頭から揃える方がファイルが並んだ時にわかりやすいんですね。
ものすごくどうでもいいのですが、SIerマンとしてはKbnと書かれるとKanbanでなくKubunを連想して、区分マスタ管理画面とか区分コード取得部品とかそういうのを連想してしまいます。(笑)
Atomic Design ~堅牢で使いやすいUIを効率良く設計する
- 作者:五藤 佑典
- 発売日: 2018/04/25
- メディア: 単行本（ソフトカバー）
状態モデリングとデータフローの設計
続いてデータの設計。認証情報、タスク情報、タスクリストの情報、ページ全体のボード情報を「状態モデリング」という本書独特の用語で表し、具体的に何の情報がいるのかすべて明らかにし、JSオブジェクトで定義してVuexストアに持たせるようにしていきます。
単純に名前の語感の話なのですが、ここでの「状態」は「情報の種類」とか「データの種類」とかでもいいような？と思いました。
続いてデータフローの設計として、ボタン押下などのアクションを全部抽出、Vueコンポーネント→アクション→ミューテーション→ステート→Vueコンポーネントへ戻る のVuexの図を使い、実際に何を渡していくのかを設計していきます。
SIer寄りの開発だとこういう設計情報をきっちり図表を交えてExcelなどに書き、矛盾のない状態で実装に移っていったりするのですが、なんとなくWeb系エンジニアってExcelを使わなさそうなイメージがあります。実際の開発ではこのデータフローの設計はどういう媒体に書いていくのかなと思いました。
ルーティング設計
3つめはルーティング。ユーザがどういう操作をするとURLがどう代わり、そこでどのコンポーネントが動くのかを設計し、そしてVue Routerの設定ファイルに書いていきます。このときログインしているかをチェックすることを、ルートメタフィールドという書き方でオプション設定できます。
10. 中規模・大規模向けのアプリケーション開発③ 実装
本格開発3章目が実際のコード。開発はなんとテスト駆動開発(TDD)方式を導入ということで、テストコードも載っています。アプリケーション自体のコード例はログインページを中心に一部のみになっているのですが、まあ本のボリュームもあるし仕方ないところでしょう。
単体テストコードはアロー関数が多い独特の書き方です。なんとなく流れは分かるのですがテスト用のライブラリが提供する関数群の説明はあまり載っていません。
所感としては実際に動かさなくても単体テスト用コードでもかなり深いところまでテストができる、またちゃんとやるとコード量は多くてけっこうめんどくさいな…と、サーバーサイドのフレームワークでテスト用ライブラリを使ってTDDを徹底する場合と同じような印象を持ちました。
デバッグ作業についてはコマンドの npm run dev で開発サーバを起動し、またブラウザ拡張機能のVue DevToolsでどうデータを見ていけばいいかが画面キャプチャ付きで載っています。これは分かりやすいですね。E2Eテストのテストコード例も一部載っています。エラーハンドリングとしてライフサイクルの中にerrorCaptured関数を定義することができる話はへーと思いました。
最後は高度な話としてパフォーマンス改善の話が載っています。
- 割とネットの資料などでも見かける、
v-ifとv-showを切り替えるとよい話 - 算出プロパティを活用するとよい話
などもありますが、
- 逆に毎回計算が走ると算出プロパティも大変なケースもあるのでウォッチャを使うと良い
- あまり見ない関数型コンポーネントの活用方法
- テンプレートの事前コンパイル
- テンプレートコンパイラのオプションの話(詳細はkazuponさんのspeakerdeckの資料へ)
など、非常に高度なテクニックも載っています。
Appendix
Appendix A jQueryからの移行
よくあるDOM要素の操作のパターンで、jQueryの書式だとこう書くのがVue.jsだとこうなる、という対応の記述。学習していくと自然と分かりますし探すとQiitaや技術ブログでもありそうなネタですが、一覧になっているのがありがたいです。
また、無秩序にjQueryを使いすぎてメンテナンスが難しくなった古いシステムを一気にVue.jsに移行…なんて話はよく聞きますが、本書では「特に保守の必要がなければ移行の必要はない」、と現実的な答えを出しています。jQueryとVue.jsでは解決する問題が違う。「重要なのは仕様や問題を把握して適切な技術を選択すること」だと。
これはほんと技術選定や設計の真理ですね。インターネットの情報がほとんど無料で手に入る時代、注目度を上げるために煽って「jQuery＝オワコン」「まだjQueryで消耗してるの？」系の話はよく目に入って来ますが、惑わされることなく自分の前の課題に対応していく姿勢も必要になります。本格解説書である本書が明快に解答しているのはありがたいです。
Appendix B 開発ツール
フロントエンド界隈でよく見聞きするStorybookの話。開発中の画面をプレビューするような感じのツールでしょうか。
そして静的型付き言語として、TypeScriptを使った場合にVue.jsでどう書くかの例が載っています。
主要ライブラリもだいたいTypeScriptの型定義に対応しているそうですね。
Vue.js 2.* にTypeScriptを導入した話は割とネットでも見かけますが、2019年じゅうに出るのではと言われているVue.js 3.0ではさらにTSサポートが強化されるそうなので、しばらく待ったほうが良いのかもしれません。
著者陣のPLAID野田陽平さんの記事と公式の記事。
また、Facebookが提供しているReact用の型サポートのFlowは、Vue.jsには向いていないという結論で本書ではちょっとしか載っていません。この詳細は本から外した没ネタとしてkazuponさんの記事に詳しい話が載っています。
Appendix C Nuxt.js
サードパーティ製のものとして、内部でVue.jsを使ったユニバーサルVue.jsアプロケーションを作れるフレームワークNuxt.jsの紹介。こういう話で出てくる用語はコラムによると、最近は以下の使い分けをするそうです。
- ユニバーサル(Universal)：クライアント・サーバの互いに異なる環境でもJSが動くこと
- アイソモーフィック(Isomorphic)：クライアントとサーバで同じHTMLページを生成する技術
Nuxt.jsは静的サイトの作成まで、詳しく載っています。
まとめ：Vue.jsの仕事レベルの本格入門＆実践の書
Vue.jsの情報はネットのあちこちにも散在しておりそこからも学ぶことは出来ますが、1冊にまとまり整った形で本書から得ることができます。
また本エントリでも何度か触れましたが、各章のコラムが優秀で、地味に重要情報が何気なく書いてあることが多いです。
内容も後半になればなるほどプロユースの仕事向け、エラーハンドリングやパフォーマンス、高度なテクニックなど、Vue.jsに関わる情報がだいたい一通り網羅されています。
特に設計に重点を置いているのがありがたいですね。アプリケーションが大規模になればなるほど設計が重要…というのはフロントエンドでもサーバーサイドでもまったく同じなのだなと改めて思いました。ということで、仕事レベルの本格開発でVue.jsを使うなら本書があれば一通りカバーできる、開発現場に必携の一冊となるでしょう。
一方、欠点というほどではないですが……タイトルはVue.js「入門」とありつつ開くと入門本なのは最初の数章で終わって残りはガチな本格開発本であるという、タイトル詐欺的なところは若干あります。まあこれは技術書あるあるですね。(笑)
また簡単なサンプルの分かりやすさや図表の豊富さ、イメージのしやすさなどなど含めた総合的なとっつきやすさは、一部で猫本としてもおなじみの『基礎から学ぶVue.js』の方が若干上かなと思います。対象読者層がこの２冊では被りつつも若干違うせいのもあるでしょう。やはりこれを機にVue.jsをしっかり学ぶなら、まずは猫本『基礎から学ぶVue.js』＋本書『Vue.js入門』の2冊セットが万全の構えかと思います。
サポートページでは、誤植表のほかに本書の8章～のサンプルのカンバンアプリケーションのコードもダウンロードできます。
kazuponさんへの刊行記念のインタビュー記事。僕もフロントエンドを学び直す前はフレームワークの浮き沈みの激しさがやっぱり敬遠の原因になっていたのですが、このへんもどうやら安定期に入ってきたとのこと。JS周辺技術＋Angular/React/Vue.jsの３つを基本の柱に知っておけば大丈夫のようで、モダンJSに再入門する人もそろそろ安心です。
ブログをmediumに移転した、kazuponさんご自身による紹介記事。2017年6月から執筆開始したとのことで苦労が偲ばれます。やはりこのクラスの本格本になると発売まで１年以上掛かるのですね。
付録：商業書籍によるVue.jsの学習順序を考えてみる
僕がVue.jsの情報を急いで集め始めた2018年2月頃～は、Vue.jsの機運が高まってこれから日本語でちゃんと読める商業書籍も出てくる、次の技術書典でも何冊か出るみたいだ……！という頃合いだったのですが、2019年現在はだいぶ出揃ってきました。
- 作者:森 巧尚
- 発売日: 2019/01/15
- メディア: 単行本（ソフトカバー）
『動かして学ぶ！Vue.js開発入門』が2019年1月。本屋で手に取ってみたのですが、タイトル通り動かして学ぶ本。内容は字も大きくてカラー、単一ファイルコンポーネントなど高度な機能は触れず、とにかくVueインスタンスの様々なディレクティブを試して実際にプログラムが動くのを確認しながら進む本。Pythonの入門書で幾つか見られるような、プログラミング自体が初心者の人向けの本と似たような感じです。
仕事レベルの本格開発には不十分ですが、普段はHTMLを書いていてJavaScriptにこれからチャレンジ、あるいはプログラミング自体にチャレンジという人にはよさそうです。
- 作者:掌田津耶乃
- 発売日: 2019/02/05
- メディア: 単行本
『Vue.js & Nuxt.js超入門』が2019年2月。様々なプログラム言語のフレームワークやライブラリの超入門シリーズを幅広く出している掌田津耶乃さんの本。最近だとJava/ScalaのPlay Frameworkの本、PHPのSynfonyの本、PythonのDjangoの本なども出しています。
こちらも字は大きくてカラーで分かりやすく、上の『動かして学ぶ！Vue.js開発入門』と対象読者層はほぼ同じ初心者向けのようです。最後にNuxt.jsの話も載っているのが差別化か。
掌田津耶乃さんの本はPHPのLaravelの入門書が参考になりました。しかしネガティブなことを書くのもアレですが、この方の本はサンプルコードや本文に誤植が多めなんですよね……
短い時間でVue.jsの概要を知りたい
2018年3月～4月に出た『速習Vue.js』『Hello!! Vue.js 最新プログレッシブフレームワーク入門』。ただしこの２冊の内容は後発の本にもだいたい含まれているし、ネット上や技術書典の同人誌などでも得られるのでそろそろ古めではあります。
プログラミング自体やJavaScript自体に慣れていない人が学びたい
上で述べた『動かして学ぶ！Vue.js開発入門』か『Vue.js & Nuxt.js超入門』でまずは実際に動くものを作って慣れてみる。ES2015以降のモダンJavaScript自体をちゃんと学ぶなら『JavaScript本格入門』なども並行。
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
- 作者:山田 祥寛
- 発売日: 2016/09/30
- メディア: 大型本
あるいは、JS自体でももう少し易しめの初心者向け入門書も最近は何冊かあります。
そして慣れた後で、猫本か本書へ進んでいく流れ。
JavaScript自体はある程度分かり、仕事レベルで学びたい
2018年5月に出た猫本『基礎から学ぶVue.js』でまず始めて、応用＆実践編的な位置付けで次に本書『Vue.js入門』へ。マークアップエンジニアやフロントエンドエンジニアで、デザインが主軸の方なんかはまずは猫本から始めるのがおススメですニャ～
他のJSフレームワーク経験もあったり腕に覚えのある方で、仕事レベルでさらに本格的に学びたい
猫本をニャーンと華麗にスキップして本書『Vue.js入門』1冊に絞り、しっかりがっつり学ぶ。
Vue.jsを理解した後、Nuxt.jsをさらに学ぶ
猫本＋本書のセットか本書オンリーの後に、2018年10月発売の『Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発 』で学ぶ。
著者の花谷さんは、テック系Podcast しがないラジオの sp.41a/sp.41b にも出演されていますね。お若いのにすげぇ...!!ってなりました。
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発
- 作者:花谷 拓磨
- 発売日: 2018/10/17
- メディア: 単行本（ソフトカバー）
Nuxt.jsは、内部でVue.js/主要なライブラリ/ツール/サーバーサイドレンダリングの仕組み...などを一式内包した、本格的なSPAであるユニバーサルVue.jsアプリケーション開発のためのフレームワーク……なので、開発アプリケーションの特性によってはVue.js本体だけで十分なケースもあるかと思います。
自分的にもここまで使う機会はなさそうなんですが、後で参考として読もうと思っています。
『基礎から学ぶVue.js』、本書『Vue.js入門』、『Nuxt.jsビギナーズガイド』の３冊は表紙の色合いも似ているのでセットで買いやすいです。
ということでVue.js入門本の紹介でした。以前に作ったまとめはこちらの記事にあります。2018年4月時点の記事ですが本リストはその後更新したりしています。
そして最近のお話
最近、はてなブックマークで伸びているエントリで興味深かったのが、最近のフロントエンドとSPAを概観した以下の記事。Twitterでも話題になっていました。
最前線に立っている御本人の意見も、ブコメにも様々な立場や世界観からの意見が集まっていて面白い。
僕が主に携わっている仕事からするとサーバーサイドって当分なくならないし、わざわざSPAにする必要がないケースも多いよなあというところなんですが、これは本当にその人の立場によって違うでしょうね。今後も動静を見守っていこうと思います。