ＶｕｅとＮｕｘｔ３の学習に時間を捧げてはや３年･･･ 動画講座を三社受講して知識だけは増えたけど思うように行かない文系学校教師による一年越しのレビュー記事です。
齊藤さんによる昨年の書籍『Vue3 フロントエンド開発の教科書』に引き続き、レビュー用に献本をいただいた上でのレビューになります。初心者ゆえ謙虚に丁重にレビューしますが、なかなかもどかしかったVueまわりについての愚痴も含めてだいぶ溜まっていますので、お見苦しいところがあってもご容赦ください。それからスケジュール上、この記事で書ききれない続編がたぶんありますがご了承ください。
一言で言うと
Nuxt3を静的ホスティングサービスにデプロイすることは、現段階の情勢では至難の業です。それを極めて懇切丁寧に説明してくだっているので、職場の研修期間である８月より前にこの本が欲しかった･･･ というのが、私の偽らざる本音です。間違いなく良書です。だからいま苦しんでいる初心者もデプロイ作業に掛かっている現場の人も、多分買ったほうがいいと思います。思うけれども、たぶん現実のシビアさに面白くない気分になってしまう。でもそれはエコシステムとしてのVueとNuxtがハードな進化を求めているからであって、この本が悪いわけではないです。むしろ、親切なのだと思っています。
もうすこし言葉を補うと
h3jsやNitroを内包しそのアップデートに依存するようになったNuxt3系は、高速で多機能になった反面で、多くのホスティングサービスが対応しきれない部分が多くなってしまっています。そこをふまえて、TailwindCSSや他の標準的モジュールのインストールなどVueが本来持つべきフロントエンドのGUIによるユーザーエクスペリエンスについての部分の説明を大幅にカットし、Nuxt3の基本的なディレクトリ構造とそれに依存したルーティング機能やミドルウェアの働きについて説明を集中させた点、そしてページごとにレンダリングモードを使い分けられるHybrid Renderingの機能紹介からすぐにデプロイ先サービスごとの得手不得手の話に進む点の二つが、この書籍の大変優れている点だと思います。
昨年の書籍のレビューで触れたとおり、著者はたいへん構成を練って実直な執筆をなさっている（最初のほうのVue3.2~の説明も非常に短くポイントが押さえられています）と思いますので、書籍の短所のようなものは挙げにくいところがありますが、手短かに不満だったところを挙げれば、やはり「これをやればあのウェブサイトのクローンができる」みたいな見た目の完成をイメージさせる派手な売り方をしていないその実直さが、数年前の私みたいな「初学者でサイト運営したい、でもWordPressは激重で･･･」というライトな開発志願者の心をキャッチしない、ということになるかと思います。
石の上にも三年座ってみた初心者のレビューが聞きたいですか･･･？
現場でバリバリ開発に携わっている方にとってはこれ以上のレビューは必要ないものと思いますが、ここからは他の講義動画やVue, Nuxt関係書籍をふまえた初心者の感想をいくらか述べておきます。
まず私の開発の意図は、リアクティブシステムを使ってGUIに必要な情報をインタラクティブに反映させていける受験指導用の教材をリモートで配信していくことにあります。上位国立大学の国語の入試問題の解答解説には、頭で現代思想を分かっているとか古典の知識があるとかそういうこと以上に、テキスト本文をその場で論理的に読み取って文脈間のつながり／文脈上の排他・対立関係を目視確認して適切に集約することが要求されるため、言葉で四の五の言うよりも、論点や観点ごとの文脈間の関係性を線やリンクでつないでやる／切断するといった情報どうしのグラフ化の作業がどうしても必要と考えているのです。
フロントエンドＧＵＩの改善のつもりが、あまりに遠くまで来てしまった
とはいえそもそもそれを達成する最善の策がそもそもVueやNuxtであるのか？という点については、別のフレームワークに手を出すゆとりがないのでちょっと分からないのですが、Vue3.2へのバージョンアップとVite(やその中のRollUp)によるホットローディングの実現あたりで、Reactより速いのは以前からだけれどもフレームワークとしての速度がSvelteよりわずかに高速になった、というところまで改善しているようなので、Script Setupの書き方に何とか納得をして、VueCLIの学習コストを投げ捨ててでもViteとTypescriptに移って、そのせいでリリースが遅れたNuxt3系にも手を出して･･･などと実績が伴わないまま初学者としてひたすら追っかけを続けてきてしまいました。
このように、初学者としての学習コストの増大・要求される学習スピードの半端ない速さ、というのが、Vueユーザーの比率を飛躍的・爆発的に下げてしまった大きな原因の一つであると思います。UdemyのRustやPythonの学習動画のバージョンは２，３年くらいはほとんど更新されないで今も人気講座として通用するのに対して、VueだとCompositionAPI非対応の講座は顧みられもしないし、VueCLIはディスコンなのにBootstrap非依存の開発環境へと移り切れていない動画もユーザーも非常に多い。そして何より、ホスティングサービス側のデプロイメント受け入れ作業の方が全く追いついていない。要求される学習スピードについていけていないのは業者の側も同じ、というのが、Nuxt3.0がリリースされてもうすぐ１年、というこの時期のいつわらざる現状だというしかないと思います。
サーバーサイドまで破綻なくカバーするひな形の供給が追いつかない
Webアプリによるサービス開始を念頭に置いて、私が直面するのはComponentの切り分け、NuxtPageのなかの各ページ.vueの階層構造（≒サーバーAPIがルートパラメータをどのように扱うか）と同時に、一般的なHTMLとしてのブラウザ表示・インターフェースの部分です。
できれば業者が売り出しているテンプレート・ひな形が使いたい。TailwindCSSのライセンスを取得するとReactだとサーバーサイドNext.jsのテンプレートファイルも付いてくるがNuxt.js版は無い。「Nuxt3でこういうのがしたい」に応えてくれるひな形がなかなかリリースされない
のは、ライトユーザーにとっては非常に大きなダメージです。（※11月段階でおそらく唯一お勧めできるNuxt3.xのテンプレートはPinx(https://themeforest.net/item/pinx-vuejs-admin-template/47799543)じゃないかと思います。Tairo(https://themeforest.net/item/tairo-multipurpose-nuxt-tailwind-css-dashboard-system/45383013)も良いんだけどLayer機能前提なのでデプロイメントやモジュールの導入のさいにWebで調べた情報が読み替えられなくて諦めました）
Vite対応版はあってもBootstrap利用前提のVueCLI版より数が少ないしNuxt3.x対応版は圧倒的に数が少ない。RollUpが読み替えてくれてNuxtがテンプレートを受け入れてくれるものが部分的にあったところで、それがコンポーネント全てで達成されるわけではないし、そもそも文法が違うしストア先がVuexなので現状のNuxt3.xに合わせるには二重三重の読み替えが必要になります。
npmモジュールがNuxt3.xに対応するスピードが遅い・そもそも対応してくれるかどうかも問題になります。クライアントサイドの補助としてVue対応をしてきたモジュール開発者がサーバーサイド対応をそもそも考えるかという問題もあるし、モジュールを公開する時点で、開発者側がServerAPIとPages/[hoge]/[fuga]のどちらへのアクセス（おそらく排他アクセス）を前提にするのか、ルートミドルウェアによる制御とその標準仕様をどのように公開時に責任持ってどれだけチュートリアルに記載するかという問題もある。
地味に困っているのはNuxtのLayer機能（Extendsってやつです）で、これがワークスペースを拡張するけどそれに対応したモジュール導入の仕方が分からない（情報乏しくて困っているけどこれは私だけか･･･？でも恐らく“ -w ”などのインストールオプションを想定していないモジュール開発者もいるだろうと思われる。とにかくもう日本語の情報が少ない。英語力が自分に無い。中国語の文献も分からないしジャーゴンが多くて自動翻訳も何だかよく分からない）と思うので、シロウトがなんとなくウェブサイトできるかも･･･と期待してNuxtに乗り出すことは、もしかしたら2.xの時よりもだいぶ困難になっているのかもしれないと思ったりもします。
実際に顧客の要望に合わせて開発作業を進めている人からすれば、どれも取るに足らないことかもしれませんが、自分にとってのニーズを抱えて開発するという用向きのライトユーザーにとっては「Nuxt3、沼だからやめときな」という状況にあるように思えて仕方ありません。
Nuxt沼への最短ルートとその切り抜けかた＝『Nuxt3 フロントエンド開発の教科書』
レビューとしての中まとめとして書籍の話しに戻っておきますが、読者に色目を使うことなく、その辺の難しさを各所にわたって簡潔にわかりやすく指摘して指摘し倒す、というのが本書『Nuxt3 フロントエンド開発の教科書』の特徴なのかと思います。一見さんにはNuxt3がそもそも魅力的なフレームワークとして映らないと思う。だけれどもおそらくそれは著者の優しさなのではないかと思っていたりします。
本書が優れているデプロイ先サービスごとの得手不得手の話ですが、これに言及している講座や書籍はすごく少ないと思います。私はMichael ThiessenさんのMastering NuxtのNuxt3版(https://masteringnuxt.com/nuxt3)を購入して履修しているのですが、これはNetlifyへのデプロイとSupabaseへのDBの吐き出しを前提に話が進む（大変「旨いハナシ」が語られていて一気観できるので、テンションのアガる動画コンテンツとしてとても優れていると思います）けれども、デフォルトのNuxtWelcomeから自分が思うように業務用途で作っていくと講義どおりにデプロイしても通らない。もちろんこれは「事前書き出しによる静的ホスティング対応をもってNetlifyがNuxt3のユニバーサルレンダリング対応を謳っていること」が問題であるのだけれども（自分の作る必要があるシステムのルートパラメータはユーザーの問い合わせによる任意の拡張とそのデータベース登録を前提とするため）、npm run generateでできることできないことの区別とホスティングサービスごとの対応状況は本来は先に知っておかないと話にならないものでした。
学校の周辺サービスのような、商用ではあるのだけれども非営利目的で稼げず、データベースアクセスを実現しなくてはならないシステムのデプロイ先となると、それだけで選択肢が限られます。前述のサーバーサイドレンダリング対応のデプロイ先で商用可能で安い、となると次点はFirebase Hostingになるかと思います。こちらは『Nuxt3+Firebase 捨てられるWebアプリケーション設計』（福田雄貴著、インプレス NextPublishing）が詳しいのですが、すでにFirebaseに送るビルドファイルの記述内容・仕様がGoogleのほうでアップデートされており、ビルドを通すだけでも手間が掛かります（blazeプランとsparkプランとでfirebase toolsの開発スピードが違い、対応モジュールのバージョンがひどく異なっているので、Firebase Hostingもひどい沼です）。この『捨てられる･･･』ではCloud Functionsによるデプロイメントが紹介されていて、私はいちおうymlファイルをネットの情報からいろいろ書き換えてデフォルトのNuxtWelcomeまで何とかたどり着いたのだけれど、貧困な自分のWebアプリ運営環境からひとつ実現したかった「WASMプラグインの同時利用」というところでふたたび暗礁に乗り上げ、しばらく放置･･･しているところです。
Nuxtでブログ作りたい、とかならNuxt Content v2を説明した書籍を見てSSRに固定すれば良いし、eコマース用のテンプレートならそれなりにNuxt3対応のものも出てきているようですが、Vue3やNuxt3の開発陣の夢思い描くように機能を盛り込んでいくことは仮想サーバーを借りないとちょっと無理なのではないのかな、というのが、業務でいろいろ使おうと考えて試行錯誤してきた私の感想です。とにかく「デプロイ先をまず決めたうえで各コンポーネントの方向性を追い込んでいかなければならない」というのが律速段階として大きく開発計画に影響してきて、「Vue2.7からVue3そしてVue3.2以降へと変えなきゃいけないもの変えなくて良いもの」くらいで悩んでいる初級者・ライトユーザーにとっては、Nuxt3や現行の3.8などの全体像をつかんで魅力を理解するという姿勢自体がもしかしたら危険なのかもしれないな、と思います。
『Nuxt3 フロントエンド開発の教科書』は、そうしたNuxt沼へ続く道に掲げられた立て札のようなものです。それでもおまえさんは先に行くのかい･･･みたいな感じですね。Vueの文法も含めて極めて簡要によくまとまっているけれども、どんどん先へ行こう！みたいな調子の良い感じは感じられない。見当違いな個人の感想なのかもしれないけれども、それは筆者の齊藤さんの良心なのではないかな･･･と思います。
たぶん私のレビューとNuxt道は続くのだけれども
とりあえず、レビューに当たっての期日のお約束もありますし、字数も多くなってきたのでひとまずこの記事は区切りにします。
レビュー記事の続きはもちろん、国語教材の実況中継的なブログも執筆していきたいのですが、ウェブサイト・WebアプリのUX向上がなければ思った成果は得られないので（文字の記事で精密に伝えたところで、それを読んで東大に合格する生徒はそもそもそれだけで凄い読解力なのです。私がやりたいのはボーダーラインの生徒を救うことであって、自己満足ではいけないと思っています）、開発作業が次に進んだとき＝Webアプリのデプロイがホスティングサービス業者側で成功したときに追加の記事を出したいと思います。
Netlifyに設定したドメイン名がいくつかまだ残っていて、私は個人用のブログを単純なブログサイト用途に絞り込んで本書『Nuxt3 フロントエンド開発の教科書』の通りにNetlify無料枠で運営しようかな、と思っていますが、教材としての利用用途を考えているので、前述のFirebase Cloud FunctionへのGitHub Actionsによる自動デプロイとの二正面作戦でどっちつかずの開発をしていくのだと思います（正直なところ、私のスキルのレベルではいくら時間をかけてもどちらがいつ頓挫するか全然分からないので）。学校業務に関するWebアプリについては、勤務校の管理職とは話し合って先日VPSへのデプロイの許諾を得たところなので、その開発作業と併せてふつうの授業と教材準備への対応をしなくちゃいけないため（まぁその作業量の段階で完全に詰んでるのですが）正直言って何をどれだけ進められるのか分かりません。
試験の採点がようやく終わったところなので、いまは、『Nuxt3 フロントエンド開発の教科書』をもう一度読み直してブログサイトの再立ち上げをしたいと思っていますが、どうなることやら･･･
