この本は、WINGSプロジェクトのレビュー企画に応募し、書籍献本を受けました。ありがとうございます。
実は、書籍をいただいたのは1か月前で、10/30（月）までを目途にアップしてほしいとお願いされてました。ギリギリ間に合いました…。
Nuxt 3 フロントエンド開発の教科書：書籍案内｜技術評論社
Nuxt 3 フロントエンド開発の教科書 – WINGS
今作は昨年、今回と同様にWINGSプロジェクトのレビュー企画に応募して献本を受けレビューした『Vue 3 フロントエンド開発の教科書』の続編のような内容とのことです。
※昨年のレビューはこちら：書評『Vue 3 フロントエンド開発の教科書』TypeScript×Composition APIで開発するならこの1冊！ | while(isプログラマ)
レビューの前に、私がどういう人にあるのかを記載します。
- Vue.jsについては長く仕事で使っていて、ある程度、理解しています。
- Nuxt3は軽く触ってみたことはあるものの、ほとんど使っていません。
- 他のNuxt3についての本は読んだ事が無いです。
以上を踏まえたうえで、レビューをお読みください。
今回は、各章ごと＋αで記載していきます。
全体共通
どの章にも共通していえることは、図解があって分かりやすく、サンプルとその解説も丁寧でとれも分かりやすかったです。
自分自身、Nuxt3は軽く使ったことがあるぐらいですが、すんなり理解できました。
なかなか、ここまで分かりやすい技術書というのも無いんじゃないかと思います。
第1章 Nuxt を初体験
Nuxtについての概要を説明した章です。非常によくまとまっていて、理解の助けになりました。
インクリメンタル静的ジェネレータ(ISG)なんていう、静的ファイルを動的に生成するという仕組みが面白いと思いました。うまく使えるか分からないけど、覚えておきたいと思います。
簡易的だけど、Nuxtプロジェクトの最大構成(プロジェクト直下のフォルダやファイル)の説明も書いてあって、ためになりました。ただ、このへんについてはもう少し具体的な説明も欲しかったかなと。「utils」とか「modules」とか「plugins」とか、本書で作成するサンプルでは使ってなかったように思うので、使用例の記載がほしかったとは思います(「composables」の違いもよく分からないので)。
第2章 Nuxt アプリケーションの基本
Nuxt3での基本的なコードの記述について説明した章。Vue.jsの基礎についても書かれてあって、Vue.jsの復習にもなった(本書自体は基本的に、Vue.jsを少しは知っている前提で書かれてあります)
ただ、やっぱりNuxtの特徴といえばimport文が必要ないオートインクリメント機能なので、そこは丁寧に解説されてあってとてもよかったです。
ただ、サブフォルダ内のコンポーネント名については意識しておいたほうがよさそうです。親フォルダと子フォルダに同名のコンポーネントファイルがあれば、親が優先されるとのこと。なお、サブフォルダ内のコンポーネント名にはサブフォルダ名を含めるのがいいらしいです。
ステートというNuxt3独特の機能についても解説してあり、サンプルも分かりやすかったです。
第3章 Nuxt でのルーティング
画面遷移を伴うアプリの作り方について解説した章です。
個人的には、Nuxtの一番のメリットかもしれないと思っています。素のVue.jsでルーティング機能を実装しようとすると、何かといろいろ設定が必要で面倒くさいんですよね…。
ルートパラメータについても丁寧に解説されてあって分かりやすかったです。いろいろ応用できそうだけど、使いやすい反面、やりすぎるとわけが分からなくなりかねないかもしれないとは思った。
第4章 Nuxt のデータ取得処理
いわゆるAjaxのやり方について解説した章。
「$fetch」だとか「useAsyncData」だとか「useFetch」だとか、lazyオプションだとか、いろいろやり方があるのだなということが分かった。
それぞれ違いを丁寧に解説されてあって分かりやすくはあった。ただ、これは自分が分かってないだけだけど、いまいちどう違うのかが分からなかったです。基本的に、useFetchを使えばいいという理解ではあるのですが、それがあってるのか分からないです…。どういう場合に、どれを使うのがいいのかをまとめてあれば、よりよくなったかなと思います。
後、サーバー側で呼んでるのか、クライアント側で実行されるのか、両方ともで呼ぶのかがいまいち分からなかったです。このあたりは、どちらかというと自分の実践が足りないので、もう少し調べていこうと思います。
第5章 Nuxt のサーバ機能
Nuxt.jsでサーバーサイドのAPIを作成する方法について解説した章です。
ここについては、素のVue.jsだけでは実現できないので、よりNuxt.jsの特徴が強くなるのかなと思います。
そういうこともあって、細かく説明されてあった印象。ただ、Vue.jsだけしか理解していないとちょっと難しいなという印象は持ちました。
ちょっとだけ気になったのは、[server-basic/pages/member/memberDetail/[id].vue]の⑤の条件。「if(member.value != null && member.value.note != undefined) {」と書いてるけど、「if(member.value?.note !== undefined) {」でいいのではないかなと思った。オプショナルチェーンの?.は、直前がnullかundefinedだと、undefinedを返すので。
といっても、自分は最近、オプショナルチェーンの直前がnullでもundefinedを返すということを初めて知ったので、分かりづらくはあるかも？ どちらにしろ、比較演算子に「!==」ではなく「!=」としてるのかは気になりました。
Nuxtとは直接関係ないですが、PostmanというPOST送信のテストを行えるツールを紹介してあったのが良かったです。こういうツールはNuxtを使うかに限らず、使っていきたいと思いました。
第6章 Nuxt でのエラー処理
Nuxt.jsでエラーが行った際の処理を制御する方法について記載した章です。
エラー処理のNuxt用の記述があることに驚きました。エラー画面のカスタマイズとか、Nuxtならではという印象。
エラー処理についてまで考えて実装するのはなかなか難しいですが、うまく使いこなしていきたいです。
第7章 Nuxt のミドルウェア
画面遷移時やAPIの処理時に、任意の処理を挟む方法について解説した章です。
ミドルウェアといわれてもピンとこなかったのですが、サンプルがログイン機能のユーザー認証の実装で、なるほどと思いました。どのページにも、ユーザー認証は必要になってきますしね。
ミドルウェアといっても、インラインルートミドルウェアとグローバルルートミドルウェアと名前付きミドルウェアがあるようで、それぞれ分かりやすく解説されてあった印象。
第8章 Nuxt の動作の仕組み
Nuxtについての実践的な内容や、ビルドの方法について解説した章。1章の発展的な内容という印象でした。
「npm run」で実行する、それぞれのオプションについての説明があり、本番用にビルドする方法などが分かりやすく記載されていました。
レンダリングモードを個別のコンポーネントごとに切り替える方法についても書かれてあり、そんなことができるのかと驚きました。てっきり、プロジェクト全体で共通のレンダリングモードしか使えないのかと。
Redisというデータストアについても書かれてあり、Nuxt.jsでは簡単に利用することができるそう。実際の本番環境では、RDBを使うことが多いだろうからあまり使わないような気もするけど、覚えておきたいと思いました。
第9章 Nuxt を本番環境へデプロイ
Nuxtで作成してアプリを、Netlify、AWS Lambda、Herokuを使ってデプロイする方法について記載された章です。
各項目とも、どういう機能が使えるかや、画像付きでのデプロイの手順を記載されてあり、分かりやすかったです。
ただ、個人的にはタイトルの『Nuxt を本番環境へデプロイ』から期待したものは、既存のLinuxサーバやWindowsサーバでNuxtで作成したアプリを実行する方法についての解説でした。今までVue.jsで運用していたなら、既存のサーバーでNuxtを動かしたいという気持ちはあると思うのですが、この章ではほとんどホスティングプロバイダで実行する説明だけでした。
Node.jsが動く環境に「npm run build」で作成したファイルを読み込ませればいいという説明は書いてありましたが、これだけだと説明不足に感じます。HTTPSでアクセスしたい場合にどうすればいいのかもよく分からないです。
サーバーで永続化したいなら、nodeで実行するだけでなく、pm2といったプロセスを利用したほうがいいでしょうし、Windowsサーバーで動かすならIISの拡張モジュールの「HttpPlatformHandler」が使えます。
ここまで書くと、Nuxt.jsというより、Node.jsアプリケーションのデプロイ方法についての解説にはなるかもしれませんが、既存のサーバーにデプロイしたいという需要は高いと思うので、書いてほしかったなとは思います。
付録3 Nuxt Devtools
いきなり付録3ですが、付録1はChrome Dev Toolsでの『ネットワーク速度の変更』、付録2は『Vue Devtools』です。この2つについては特に特筆するべき点はないです(『Vue Devtools』については、前作の『Vue 3 フロントエンド開発の教科書』にも書いてなかったかな？と思って見返してみると、コラム欄に少し書いてあるだけでした。今回のほうが詳細に書いてあります)。
Nuxtアプリケーションを『npm run dev』で起動すると、下に、Nuxtのアイコンが表示されますが、そこから利用できる機能についての説明です。
非常に便利な機能なので、見方が分かるようになりたいと思いました。
最後に
最初にも書きましたが、図解で分かりやすく説明されてあって、Nuxt3を学ぶにはうってつけの本のように思いました。
今後は、この本を参考に、Nuxtを使ってアプリを作っていくようにしたいと思います。
コメント