Rのつく財団入り口スマートフォン用の表示で見るRのつく財団入り口ITエンジニア界隈で本やイベント、技術系の話などを書いています。本格入門書ロー◎製薬の目薬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勢が集結した仕事レベルの本格開発向けの本です。一応、このエントリの人のバックグラウンドとフロントエンド力(笑)えー主軸はもろにサーバーサイド(≒バックエンド)エンジニアです。PerlでBBSが動いていた時代、その後JavaのServletが上陸してWebの時代が始まった時代から仕事で開発をしていたインターネット老人会乙な世代です。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情報を調べまくっていました。以下、各章ごとに振り返りと感想などを。プログレッシブフレームワークVue.js2013年に誕生し続いてきたVue.jsの変遷と概要の章。Web自体の歴史も90年代から解説してあり、個人的には懐かしいところです。この2010年代に業界に入った若い方には縁がないかもしれませんが、こうした過去の経緯を知るとなぜ今の技術があるのかが分かる一面もあります。この歴史の中でフロントエンドが発展してきたというのも知っておくと役立つと思います。Vue.jsの特徴として学習コストの低さ、コンポーネント指向であること、データバインディング、段階的に機能を増やしていけるプログレッシブ・フレームワークの設計思想など。Worldを表示するVueインスタンス、オンラインでブラウザ上で動作が確認できるJSFiddleの話やVue関連コミュニティの話など。本書含め、最近のフロントエンドやJavaScriptの本はだいたい一番最初に歴史が解説してあって親切だし読んでいても面白いですね。自分的にはこの1章はスラスラ読んで理解できて、ああやっぱりこの1年でだいぶ理解が進んだなと安心しました。最初にUI構築の考え方として、jQueryとの対比の話が述べられています。DOMツリーがそのままUIを持ち、イベントごとにDOMツリーを直接変更していく。UIの状態をDOMツリーと別のJavaScriptオブジェクトで持ち、これを中心に考える。UIはこのJSオブジェクトで表現し、UIとDOMツリーをVue.jsがマッピングし、イベントでJSオブジェクトを通じて状態を変更していく。これがVue.jsのコーディングスタイルである。本質はより短く書けるAPIの集合でしかないjQueryは設計の考え方がないのでなんでも適当に実装できてしまうが、Vue.jsはこの思想があるので規模が大きくなってもきちんとした設計を保ったまま開発していけるよ...という思想ですが、最初にこの話があるのはよいですね。フロントエンド系の本だとサンプルコードがだいたい約束のToDoアプリのことが多いですが、本書は鉛筆などを買える文房具の購入フォーム画面を例に基本部分を解説していきます。約束のVueインスタンスやマウント手順、Dataプロパティの定義、Mustache記法によるテンプレート、フィルタや算出プロパティ、各種ディレクティブなど一通り。時々登場するコラムも、アーキテクチャパターンのMVVMパターンに触れていたり、既存アプリケーションへの組み込み方、リストのレンダリングは配列操作メソッドを再定義している話、算出プロパティのキャッシュの仕組みなどなど、何気に重要なお役立ち情報が多いです。実務レベルの開発だと必須になるVueコンポーネントについての概念と実装手順の章。Componentsとの関連の話もあり重要です。注釈で、「コンポーネント」という言葉は文脈によって意味が違うことも但し書きがあり、やっぱりこんへん混乱しがちなんだなと思います。最初は簡単なフルーツ一覧表示のtableタグのコンポーネントを例に取り、親子関係やローカルコンポーネントなどを解説していきます。面白いのは実は何通りかあるテンプレート構築手順で描画関数というのもあるんですね。コンポーネント内にrenderオプションでcreateElement関数の実行結果を返し描画だけやるのですが、このへんまで行くと同じくJSフレームワークであるReactチックな感じがしてきます。$childrenを使って直接参照もできるけど、設計の混乱を招くため良くないとはっきり書いてあります。フレームワーク側の提供するベストプラクティスに従った方がよいのですね。Vue.jsでは画面の中でどの単位でVueコンポーネント化するかが自由なので悩むのですが、コンポーネント設計での分割指針も書いてあってここが有用です。ほか、コラムではコンポーネント単位のコードでの単体テスト方法としてテストランナーのKarma、テスティングフレームワークにmochaを使った最初のテスト例も。Routerを使ってSPA用のURLルーティングを実現していく章。最初に設計としてまず全体を考えてからコーディング、パターンマッチング...と作業は進んでいきます。徐々にサンプルコードも長くなり、本章ではユーザ登録フォームとログイン・ログアウトの処理が出てきます。ネストしたルーティングやエイリアスなど高度な使い方も解説されています。Router、状態管理はVuexを使うことを推奨、だが必ず使えば良いという訳ではないということで導入指針が述べられています。両方とも使わない:URLルーティングがサーバーサイドで、複雑なコンポーネント構成がない、画面がシンプルなアプリケーション。従来のサーバーサイドメインのECサイトやキャンペーンサイトなどの1枚絵のランディングページ。Routerのみを使う:シンプルなSPAベースの管理画面や軽快なページ遷移を提供するゲームなど。(明確に記述されてはいないが、恐らくコンポーネントの数も少ないことを想定していそう。)Vuexのみ使う:1ページ内で複数のコンポーネントが通信してデータを連携するアプリ。RouterとVuexを両方使う:複数ページかつ複雑なコンポーネント構成の大規模SPA。メールやカレンダーアプリなど。僕が実案件でVue.jsを使ったケースでは周辺情報をいろいろ調べた結果、この要件だとシンプルに両方使わないが正解だろうという結論に自然と達してそうしたのですが、本書を読んで改めてあの時のは正しい選択だったのなと思い返しました。このへんはアプリケーション全体の設計時に迷いそうなので何気に超重要情報です。いう設計観点の記述が多いのはとてもありがたいです。最近はてブで話題になったQiitaの記事でも、Vuexはむやみに入れないほうが良いという論がありました。確かにカプセル化された巨大なグローバル変数みたいなものだというのはありますね。Vue.jsの高度な機能オプション的に様々な機能がある高度な機能を述べていく章。アニメーションで動かしていくトランジション、動きのイベントの前後にJavaScriptの処理をフックさせる方法、コンポーネント内のコンテンツを外側から受け付けるスロットの機能など。実はV-で始まるディレクティブは自作できるとのことでカスタムディレクティブの方法。コラムでコンポーネントとミックスインとの違いも解説されていて重要です。jQuery系にも直接DOM操作をしてしまうライブラリは多いですが、これらをVue.js用にカスタムディレクティブの形でラッパーしてくれたラッパー(Wrapper)ライブラリが提供してあることが多いので、これを使うと良いとあるのはへぇと思いました。何かを中に包み込んでラップしたものを作ってそちらを使う手法、GoFデザインパターンだとAdapterパターンに近いやつですね。サーバーサイドの開発でもこういうのはよくやるんですが、抽象度が上がっていくとこの辺は同じなんだなあと思いました。普段はテンプレートをコンパイラが自動的に描画関数に変換してくれているところ、描画関数は実は直接コーディングできるという高度な話も載っています。必要なケースはかなり限られるとのことで、スキップしても良いのでしょう。この中身の話はReactの世界に近づいている感があります。ほか、オブジェクト指向の継承と似ているけどちょっと違うミックスインは、名前のつけかたとして「動詞+able」を推奨とあります。CountableとかSerializableとかSortableとかですね。このへん、他の言語におけるインターフェースの命名規約と同じで面白いです。Componentsの章。Componentsと呼ぶこともあるそうです。Components(状態を持たない関数コンポーネント)も略してSFCだそうでややこしいですね。CLIも使う方式で例が進んでいきます。Stormが紹介されています。Loaderだけだとはっきり書いてあります。Loader固定と考えていいんですね。CLIを使うとうまく設定してくれる話も詳しく載っています。<style>の3ブロックはもう固定の約束なのかと思っていたら実はカスタムブロックとして自作もできるとのことで、ブロック要素を自作する高度な話もコラムに乗っています。提供している状態管理ライブラリのVuexの実装方法、そしてより重要になってくる設計の章。状態を含むアプリケーションが持つデータの流れを「データフロー」と定義し、この設計が重要だと展開していきます。このへんを調べていくとよく出てくる、Facebook提唱のFluxアーキテクチャの図も出てきます。Milkを思い出しました。この各タスクにくっついたラベルを文字列でなくIDで持てば、修正時に全更新しなくて済むよ...と、RDBで言ったら外部キーで持つような話を例に進んでいきます。データフローの頻出パターンとして「信頼できる唯一の情報源」「状態の取得・更新のカプセル化」「単方向データフロー」の3つが重要、これをVueで実装したライブラリがVuex。アクション→ミューテーション→ステート→ゲッターの4つの流れをまとめて「モジュール」という単位で呼ぶのは初めて知りました。実際の例として、さきほどの牛乳を買ったりするタスク管理アプリをサンプルコードとして解説しています。doneを持ったオブジェクトの配列として持たせる形ですね。この方式を使うとタスクの読み書きVuexストア内に集中し、アプリ側のコードは呼び出しのみになって良い設計になるよ...と論じています。高度な話としては、Vuexストアとコンポーネントの繋がりを最小限に疎結合にする手法として、Reactで提唱されている表示コンポーネント(見た目だけのコンポーネント)とコンテナーコンポーネント(Vuexのストアにアクセスできるコンポーネント)の2つに分ける考え方はVueにも適用できる、という話が解説されています。実装よりも抽象度が一段上がって設計の話になると、こういう風に別のフレームワークでの考え方も適用できるのだなと改めて思います。Routerが読み取って持っている値をVuexに渡したい...などの時に使えるvue-router-syncというライブラリが紹介されています。開発環境のセットアップ仕事で使っている人には待望の、本格的な開発を解説していく章。このへんからぐっと難しくなっていきます。Twitterやブログを見ていると、初学者の人はこのあたりの章で挫折したというのを割と見かけますね。まあVueコンポーネントや単一ファイルコンポーネントをうまく使うだけでもVue.js導入の価値はありますから、ハードルの高さを感じたらこの8〜10章は後回しにして、前半をきっちり理解する作戦でもよいかと思います。最初にフロントエンド(クライアントサイド)とバックエンド(サーバーサイド)問わず、一般的なWebアプリケーションフレームワークがだいたい持っている機能要素を一覧で説明。Vue.jsはプログレッシブ・フレームワークの思想があるので、高度な要素は使っても使わなくてもよいし後から別ライブラリで入れて拡張していける...という話を述べています。ここで対比として最初から全部乗せのフルスタックなフレームワークも存在することも書いてあり、本書では明言はされていませんがAngularのことを指していますね。注釈で規模の定義もしてあります。この小/中/大規模って言葉ではけっこうフィーリングで使いがちなのですが、この本なりの定義がしてあるのもありがたいです。大規模:開発者3人〜で20画面〜、+複雑な画面遷移+状態管理8〜10章で開発していくのはカンバンアプリケーションです。最初にログイン画面、ログインするとTODO/WIP/DONEの3つのタスクリストがあり、その中に一つ一つのタスクがあり、追加したり更新したり削除したりという具合。SPAのよくある構成でサーバーサイドはAPIとしてJSONを通信するだけ、サンプルコードでは省略されていますがNode.jsのExpressフレームワークで作られているという想定で進んでいきます。CLI経由で行います。initを使っているそうです。本書の開発例では以下の順にセットアップを行っています。各種ツールや設定ファイル、フォルダ構成など。CLIを使うとフォルダ構成は自動で定まる。CLI経由だと一緒に揃う。単体テストとしてはテストランナーとしてKarma、テストライブラリでMochaなどを使う。E2Eテスト(結合テストとかシステムテスト)では、Seleniumの上で動くNightwatchというライブラリを使う。対応ブラウザは現在Chromeだけ。CLIでは通信先URLを別のURLに自動的に変えてくれるプロキシ機能を元から持っている。サーバー側がどのフレームワークかにより、webpackテンプレートの設定ファイルで調整できるようになっている。例に上がっているのはRuby言語のRails、Python言語のDjango、PHP言語のLaravel、JS/Node.jsのExpress。コーディング環境はVSCodeを使い、VSCodeエクステンションでVeturを使ってシンタックスハイライトさせるのを推奨。コードチェックにはeslint-plugin-vueをnpmから入れる。DevToolsを使う。ChomeとFireFoxで動く。状態管理ライブラリは公式のVuexをnpm経由で入れる。サーバと通信するライブラリはjQueryでなく、axiosを使う。E2EテストのライブラリNightWatchに準備がいる。僕もアーキテクト職としてサーバーサイドメインの開発をする時に、こんな風に案件ごとにライブラリやフレームワークやツールを決めたり、セットアップ手順をExcelの手順書に明確に書いて展開したり、バージョン管理システムに予め諸々登録してお膳立てをしたり開発メンバをフォローしたり...とだいたい似たようなことをしていて共感するのですが、大規模開発になるほどだいぶ手順が多くて大変ですね。Vue.jsで中〜大規模の新規プロジェクトを始める時はこの本の本章の手順をお手本にしてやるような感じでよいと思います。CLIは実案件では使わなかったのですが、最初に知った時は「プロジェクトを新規に作る時にフォルダ構成とかライブラリとか諸々いい感じに準備してくれるスターターキットみたいなやつ」という雑な理解の仕方をしていました。CLIの効果が増していきますね。した、フレームワークごとのエコシステムで標準で提供しているツールを使い、自然とベストプラクティスに沿うように開発していくのは大規模開発では重要なのだなと改めて思いました。規模が大きくなってくるとコード書く前にとにかく設計が大事...ということで、以下の3要素に分けて設計を進めていく章。Designの手法に従って決めていきます。5段階のどこに何が入るのか範囲が分かりにくいのですが、お題のカンバンアプリで画面要素のどこがどの段階に入るのか例を載せているのでイメージしやすいです。コンポーネント化すると決まったものはすべて単一ファイルコンポーネント化し、名前の先頭にここではPrefixでKbnをつけています。先頭から揃える方がファイルが並んだ時にわかりやすいんですね。ものすごくどうでもいいのですが、SIerマンとしてはKbnと書かれるとKanbanでなくKubunを連想して、区分マスタ管理画面とか区分コード取得部品とかそういうのを連想してしまいます。認証情報、タスク情報、タスクリストの情報、ページ全体のボード情報を「状態モデリング」という本書独特の用語で表し、具体的に何の情報がいるのかすべて明らかにし、JSオブジェクトで定義してVuexストアに持たせるようにしていきます。単純に名前の語感の話なのですが、ここでの「状態」は「情報の種類」とか「データの種類」とかでもいいような?と思いました。Vuexの図を使い、実際に何を渡していくのかを設計していきます。SIer寄りの開発だとこういう設計情報をきっちり図表を交えてExcelなどに書き、矛盾のない状態で実装に移っていったりするのですが、なんとなくWeb系エンジニアってExcelを使わなさそうなイメージがあります。実際の開発ではこのデータフローの設計はどういう媒体に書いていくのかなと思いました。ルーティング設計3つめはルーティング。Routerの設定ファイルに書いていきます。このときログインしているかをチェックすることを、ルートメタフィールドという書き方でオプション設定できます。本格開発3章目が実際のコード。開発はなんとテスト駆動開発(TDD)方式を導入ということで、テストコードも載っています。アプリケーション自体のコード例はログインページを中心に一部のみになっているのですが、まあ本のボリュームもあるし仕方ないところでしょう。単体テストコードはアロー関数が多い独特の書き方です。なんとなく流れは分かるのですがテスト用のライブラリが提供する関数群の説明はあまり載っていません。所感としては実際に動かさなくても単体テスト用コードでもかなり深いところまでテストができる、またちゃんとやるとコード量は多くてけっこうめんどくさいな...と、サーバーサイドのフレームワークでテスト用ライブラリを使ってTDDを徹底する場合と同じような印象を持ちました。DevToolsでどうデータを見ていけばいいかが画面キャプチャ付きで載っています。これは分かりやすいですね。E2Eテストのテストコード例も一部載っています。エラーハンドリングとしてライフサイクルの中にerrorCaptured関数を定義することができる話はへーと思いました。最後は高度な話としてパフォーマンス改善の話が載っています。逆に毎回計算が走ると算出プロパティも大変なケースもあるのでウォッチャを使うと良いあまり見ない関数型コンポーネントの活用方法テンプレートの事前コンパイルテンプレートコンパイラのオプションの話(詳細はkazuponさんのspeakerdeckの資料へ)など、非常に高度なテクニックも載っています。jQueryからの移行よくあるDOM要素の操作のパターンで、jQueryの書式だとこう書くのがVue.jsだとこうなる、という対応の記述。学習していくと自然と分かりますし探すとQiitaや技術ブログでもありそうなネタですが、一覧になっているのがありがたいです。無秩序にjQueryを使いすぎてメンテナンスが難しくなった古いシステムを一気にVue.jsに移行...なんて話はよく聞きますが、本書では「特に保守の必要がなければ移行の必要はない」、と現実的な答えを出しています。jQueryとVue.jsでは解決する問題が違う。「重要なのは仕様や問題を把握して適切な技術を選択すること」だと。これはほんと技術選定や設計の真理ですね。インターネットの情報がほとんど無料で手に入る時代、注目度を上げるために煽って「jQuery=オワコン」「まだjQueryで消耗してるの?」系の話はよく目に入って来ますが、惑わされることなく自分の前の課題に対応していく姿勢も必要になります。本格解説書である本書が明快に解答しているのはありがたいです。開発ツールフロントエンド界隈でよく見聞きするStorybookの話。開発中の画面をプレビューするような感じのツールでしょうか。静的型付き言語として、TypeScriptを使った場合にVue.jsでどう書くかの例が載っています。主要ライブラリもだいたいTypeScriptの型定義に対応しているそうですね。3.0ではさらにTSサポートが強化されるそうなので、しばらく待ったほうが良いのかもしれません。著者陣のPLAID野田陽平さんの記事と公式の記事。jp.vuejs.orgまた、Facebookが提供しているReact用の型サポートのFlowは、Vue.jsには向いていないという結論で本書ではちょっとしか載っていません。この詳細は本から外した没ネタとしてkazuponさんの記事に詳しい話が載っています。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』の方が若干上かなと思います。対象読者層がこの2冊では被りつつも若干違うせいのもあるでしょう。これを機にVue.jsをしっかり学ぶなら、まずは猫本『基礎から学ぶVue.js』+本書『Vue.js入門』の2冊セットが万全の構えかと思います。サポートページでは、誤植表のほかに本書の8章~のサンプルのカンバンアプリケーションのコードもダウンロードできます。gihyo.jpkazuponさんへの刊行記念のインタビュー記事。僕もフロントエンドを学び直す前はフレームワークの浮き沈みの激しさがやっぱり敬遠の原因になっていたのですが、このへんもどうやら安定期に入ってきたとのこと。JS周辺技術+Angular/React/Vue.jsの3つを基本の柱に知っておけば大丈夫のようで、モダンJSに再入門する人もそろそろ安心です。gihyo.jpブログをmediumに移転した、kazuponさんご自身による紹介記事。2017年6月から執筆開始したとのことで苦労が偲ばれます。このクラスの本格本になると発売まで1年以上掛かるのですね。medium.com付録:商業書籍によるVue.jsの学習順序を考えてみる僕がVue.jsの情報を急いで集め始めた2018年2月頃~は、Vue.jsの機運が高まってこれから日本語でちゃんと読める商業書籍も出てくる、次の技術書典でも何冊か出るみたいだ......!という頃合いだったのですが、2019年現在はだいぶ出揃ってきました。単行本(ソフトカバー)この商品を含むブログを見る『動かして学ぶ!Vue.js開発入門』が2019年1月。本屋で手に取ってみたのですが、タイトル通り動かして学ぶ本。内容は字も大きくてカラー、単一ファイルコンポーネントなど高度な機能は触れず、とにかくVueインスタンスの様々なディレクティブを試して実際にプログラムが動くのを確認しながら進む本。Pythonの入門書で幾つか見られるような、プログラミング自体が初心者の人向けの本と似たような感じです。仕事レベルの本格開発には不十分ですが、普段はHTMLを書いていてJavaScriptにこれからチャレンジ、あるいはプログラミング自体にチャレンジという人にはよさそうです。Nuxt.js超入門』が2019年2月。様々なプログラム言語のフレームワークやライブラリの超入門シリーズを幅広く出している掌田津耶乃さんの本。Frameworkの本、PHPのSynfonyの本、PythonのDjangoの本なども出しています。こちらも字は大きくてカラーで分かりやすく、上の『動かして学ぶ!Vue.js開発入門』と対象読者層はほぼ同じ初心者向けのようです。最後にNuxt.jsの話も載っているのが差別化か。掌田津耶乃さんの本はPHPのLaravelの入門書が参考になりました。最新プログレッシブフレームワーク入門』。この2冊の内容は後発の本にもだいたい含まれているし、ネット上や技術書典の同人誌などでも得られるのでそろそろ古めではあります。Nuxt.js超入門』でまずは実際に動くものを作って慣れてみる。ES2015以降のモダンJavaScript自体をちゃんと学ぶなら『JavaScript本格入門』なども並行。大型本この商品を含むブログを見るあるいは、JS自体でももう少し易しめの初心者向け入門書も最近は何冊かあります。慣れた後で、猫本か本書へ進んでいく流れ。JavaScript自体はある程度分かり、仕事レベルで学びたい2018年5月に出た猫本『基礎から学ぶVue.js』でまず始めて、応用&実践編的な位置付けで次に本書『Vue.js入門』へ。Kindle版この商品を含むブログを見るiwasiman.hatenablog.com他のJSフレームワーク経験もあったり腕に覚えのある方で、仕事レベルでさらに本格的に学びたい猫本をニャーンと華麗にスキップして本書『Vue.js入門』1冊に絞り、しっかりがっつり学ぶ。