Vue3 フロントエンド開発の教科書
WINGSプロジェクト 齊藤新三 著 山田祥寛 監修 技術評論社
はじめに
当方、私立の中学校高等学校で二十余年教壇に立ってきたいわゆる普通の学校教職員です。業務面でやってきたのはVBA for Aplicationくらいで、ExcelVBAを通じて他のアプリケーションを制御するとかPhotoshop等でバッチファイルを組んで効率化を目指すくらいのリテラシーしかありません。差し引いてお読みいただくようお願いいたします。
復権するVue.js v3.2以降のための“教科書”
本著は出版情報の段階から予約注文していましたが、同じ監修者による『これから始めるVue.js 3 実践入門（SBクリエイティブ刊、以下『実践入門』）』を出版の時点から読み込むだけ読み込んでいたので、実際届いてみてタイトルに“教科書”とあるとおりの、「狙いが明確な書籍」であるという印象を持ちました。
情報量という意味では『実践入門』は既存の書物を圧倒して詳細であり、サンプルファイルの有用性も含めてVueの基礎から可能性についてまでこれでもかときちんと解説されていたわけですが、VueCLIが非標準とされPiniaがVuexに並び立ち、混迷の時期の発行になったのが惜しまれます。Vueのエコシステムの世代交代の問題に過ぎないのですが、一読者としては表層的なUIの部分でのVue2.x系との違いを手習いするものの、後半のアプリケーションの全体設計に触れ、内部の設計を見直すという肝心な実践の部分では、エコシステムの世代交代を様子見せざるを得ないところがありました。
そうした状況は本著の刊行された2022年秋までに大きく様変わりし、Vueを導入しやすい環境が調ってきたと言ってよいと思います。
昨年Ver3.2でscript setupが登場し、ビルド時間が劇的に短縮されたViteがVueCLIに代わって主流に置かれたことによって、ロジックが見えやすく各ファイル間の連携をその都度確認しやすくなり、Vueを使った開発体験の主眼が変わりました。またよりシンプルなPiniaがVuexを退けて公式化してしまったことも合わせて、本体がTypescriptで書き直されたVue3.x系 と Vite + Piniaを合わせたフレームワークとしての信頼性は、SPAなり小規模のWebアプリなりを組むための有効で定番の手段として、Vueを再認知させるまでになっているように感じます。またこの2022年秋の時点でも未確定の部分、サービスのデプロイメントに関わるセキュリティやファイル管理の問題についても、相性が悪いと言われていたVuexとNuxt.jsとのあいだの調整が、PiniaがゲームチェンジャーとしてVuexに代わる公式の存在となり、その高度さから次期Nuxt.jsのステート管理部分と選択式、というかたちで調整されているとのことで、Nuxt3.0のメジャーリリースに期待が高まる、前向きな“待ち”の時期にあります。
また、あえてここでネガティブな側面で補足をするならば、職場の業務との兼ね合いでGoogle WorkspaceとFirebaseにSlidevやVuePressV2（いずれもいまだβ版）を導入しようと悪戦苦闘している素人の私個人としては、VueMasteryやVueSchool.ioを受講してフォーラムを検索し情報収集もしているものの、現状ではパッケージとしてすんなり外部のサービスに展開できるほど全体に整備された便利な状況にはなっていないように思います。もちろん私の習熟度の問題が極めて大きいのですが、言ってみれば「現状では、良くも悪くも、自分に必要なスケールとユースケースでのフロントエンド開発を自分でするしかない」のが、Vueの現在をとりまく情勢であるように思います。
本著はその意味において、極めて時宜にかなった、タイミングに祝福された書籍と言えるのではないかと思います。
あくまでフロントエンドの、言ってみればBootstrapやVuetifyの一部としてUIをレンダリングする部分で使われることの多かったバージョン2.xまでのVue.jsのリアクティブシステムのイメージから一線を画した、“フレームワークとしてのVue.js環境の教科書”として編まれていることが時節的にも特徴となっており、非常に理解しやすい章立てになっています。
Viteを基盤としたVueのファイル構成や、JavascriptにおけるVueのリアクティブシステムのパフォーマンス上の利点などは、開発の体系がシンプルにまた明確になった今だからこそ概観し論じることができるものであるし、Piniaが必要ならば上位存在として包括的にNuxt3.0を管理できるという見通しがあるからこそ、Props・EmitからProvide・InjectそしてPiniaまでの情報の流れについての筋の通った説明と、slotやv-bindなどの小項目を手段として区別して整理する簡要な説明が可能になっているのだと思います。
TypeScriptやハックを“通じて”、Vue.jsで開発する効率や使い方が見通せる本
しかしながら、ただ時宜にかなった幸運な本、とするのは著者にたいへんな失礼になります。
本著の内容は私にとっては完全に手習いをする対象、まさに教科書として今後とも参考にしていくほかないのですが、私が本著に敬服したのは、時宜を得たうえで、そこで大きく攻勢に出ているところです。
著者の説明は極めて知的でありながら非常に練られており、あとがきにもあるように開発スケジュールやリリースされた情報をもとに何度も練り直されているのがとてもよく分かります。私自身はTypeScriptを使わないのと、昨年手習いした他書籍のVueCLI + TypeScript + Firebaseのサンプルが、型指定のところに誤植があってかえってビルドが記載どおりには通らなかったことがあり、ここで学べればいいなと思ってはいたものの、本著がTypeScriptによる教科書であることには多少身構えていました。しかし実際には、言語による説明は親子間関係や引数など型の継承が効果的であるところにとどめられており、またコードを簡略化した模式図が継承される型を示してくれることで、“TypeScriptを使うことを通じて”それぞれの手段の使い方と連携を明解に見通す作りになっているところが、解説書としてたいへんに優れている点だと感じます。
またそうした明解で緊密な書籍の構成によって、2022年秋の現時点で扱えて実践することができる範囲での応用のアイデアを果敢に攻めているところも魅力であると思います。例えば本著第10章の基本編で、Nuxtに頼らなくてもVue Routerに親子間で取得するルーティングパラメータを渡すことで個々のケースでの表示画面のルーティングリンクを生成させるアイデアは、概念としてVueの諸機能を個々に説明するあいだは解説することが困難なものであると思われますが、これが解説の一環として述べられているのは書籍の構成の妙というほかありません。
その他、Piniaは外部データストレージサービスとの連携の手段として応用されることが「基本編」のなかで解説されていたり、外部サービスにデプロイする記述はなくても自前の物理サーバーでは不要であろうところまで応用編では説明されていたりなど、アイデアが先進的でしかも使い方が先走っていることによって、諸機能の内容解説と発展的な実践例の紹介を兼ねており、一般の読者の予想のやや斜め上を行く、これでもかこれでもかというほどにサービス過剰な、展開の面白い書籍の内容になっているとも言えると思います。
プロフィールを見ますと大阪の専門学校で教えてらっしゃるとのことで、なるほど納得、世話焼きのお人柄がしのばれます。
おわりに
Vue2.x開発環境と流行するTypeScriptとの相性の悪さ、VuexとNuxt2の決着しないステート管理の問題、Windowsに至ってはNode.jsのバージョン管理の問題などもあり、ただでさえどことどこが繋がっているか分かりにくいVueにフレームワークとして腰を据えて向き合うということは、少なくとも雑務の多いなか片手間で学習するほかない一般のオフィスユーザーにとっては長い間きわめて困難な作業であったのではないかと思います。
私個人としてはWebクローリングを含めたテキストマイニングと並行して、日本語のテキスト分析や係り承け関係の研究とその可視化について興味を持っており、Vueは長らくその表示手段として以前から書籍を買い集めて読んでは来ましたが、システムを構築する手段という認識は困難でした。
今年は実際にシステム開発を目標に夏の研修期間を使って大量に資料を買い込みVueに関するオンライン講義を受けているため、レビューを買って出ながらも現段階ではサンプルコードのハンズオンの検証までできていませんが、本著はタイトルどおりようやく刊行された「教科書」として、Vue3系におけるそれぞれの機能や項目のとらえかたを初中級者に指し示す間違いのない良著であると思います。
最後に欲を申し上げるとするならば、Nuxt3.0が、いかにNuxt2.x+VueCLIの環境からのスムーズな移行をアシストできるかによって、今後のユーザー人口やマーケット規模が関わってきてしまうのだろうと推測はいたしますが、本著の著者の齊藤先生や監修の山田先生には、Nuxt3.0が出た段階で、各クラウドサービスへのデプロイのしかたやコンポーザブル関数の実際的な切り出し（カスタムフック化）のしかた、WebAPIのホスティングなど、システムを実際に配置展開したうえで事後に拡張していくさいの実践的なアイデアの書籍を次に執筆していただけないかなと思います。
Vueのエコシステムとそれに基づいたコミュニティーが、今後大きく発展していくことを祈っています。
