WINGSプロジェクト 齊藤 新三/著
山田祥寛/監修
株式会社 技術評論社/発行
定価 3,520円
B5変版・ 368ページ・ 2色
ISBN 978-4-297-13685-7
発刊日： 2023年9月22日

導入編

第1章 Nuxt を初体験

1.1 Vue と Nuxt の関係
　1.1.1 フロントエンドフレームワークVue
　1.1.2 Vue 3 の特徴
　1.1.3 Nuxt とは
　1.1.4 Nuxt 3 とは
　1.1.5 サーバサイドWeb アプリケーションとCSR
　1.1.6 CSR の問題点とSSR とユニバーサルレンダリング
　1.1.7 SSG とISG とハイブリッドレンダリング
　1.1.8 Nuxt 3 のハイブリッドレンダリングとNitro
　1.1.9 Nitro に含まれているhttp サーバ h3
1.2 Nuxt の環境構築
　1.2.1 Nuxt のコーディングに必要なもの
　1.2.2 Visual Studio Code のインストール
　1.2.3 VS Code 拡張機能のインストール
　1.2.4 Node.js のインストール
1.3 Nuxt プロジェクトの作成と実行
　1.3.1 Nuxt プロジェクトの作成の 2 手順
　1.3.2 Nuxt プロジェクトの作成コマンド
　1.3.3 Nuxt プロジェクトへの依存パッケージインストール
　1.3.4 Nuxt プロジェクトの実行コマンド
　1.3.5 Nuxt プロジェクト内の構成

第2章 Nuxt アプリケーションの基本

2.1 SFC への記述の基本
　2.1.1 SFC である.vue ファイル
　2.1.2 リアクティブなテンプレート変数の基本の ref()
　2.1.3 計算結果をリアクティブとするcomputed()
　2.1.4 Nuxt はオートインポート
　2.1.5 オブジェクトをまとめてリアクティブにできるreactive()
　2.1.6 イベント処理で利用されるメソッド
　2.1.7 その他のスクリプトブロック記述
　2.1.8 テンプレートブロック記述
2.2 コンポーネント間連携
　2.2.1 基本のコンポーネントタグ記述
　2.2.2 Nuxt はコンポーネントもオートインポート
　2.2.3 親から子にデータを渡す Props
　2.2.4 子が親のイベントを実行するEmit
2.3 ステートの利用
　2.3.1 Props+Emit の問題点
　2.3.2 Nuxt のステート管理を利用したサンプル作成
　2.3.3 ステートを用意するuseState()
　2.3.4 ステートの利用もuseState()

基本編

第3章 Nuxt でのルーティング

3.1 Nuxt ルーティングの基本
　3.1.1 本節のサンプルの概要
　3.1.2 ルーティング表示領域を設定するNuxtPage タグ
　3.1.3 Nuxt はファイルシステムルータ
　3.1.4 下層のリンクパスもファイルパス構造
　3.1.5 リンク生成は NuxtLink タグ
3.2 ルートパラメータとルーティング制御
　3.2.1 ルートパラメータは [] のファイル名
　3.2.2 ルートパラメータの取得はルートオブジェクトから
　3.2.3 ルートパラメータ付きのリンク作成
　3.2.4 ルーティングを制御するルータオブジェクト
　3.2.5 ルートパラメータのバリエーション
3.3 ネストされたルーティング
　3.3.1 ネストされたルーティングとは
　3.3.2 ネストされたルーティングを実現するパス
　3.3.3 ネストされたルーティングのコーディング
　3.3.4 残りのコンポーネントの配置と動作確認
3.4 レイアウト機能
　3.4.1 レイアウト機能とは
　3.4.2 レイアウトコンポーネントでは Slot を利用
　3.4.3 レイアウトの適用は NuxtLayout タグ
　3.4.4 デフォルト以外のレイアウト
3.5 ヘッダ情報の変更機能
　3.5.1 ここまでのサンプルの問題点
　3.5.2 ヘッダ情報を変更するuseHead()
　3.5.3 ページごとに useHead() を記述
　3.5.4 title のテンプレートを設定できるtitleTemplate

第4章 Nuxt のデータ取得処理

4.1 Nuxt のデータ取得の基本
　4.1.1 サンプルプロジェクトの概要とWeb API の準備
　4.1.2 Current Weather Data の利用方法
　4.1.3 プロジェクトと基本部分の作成
　4.1.4 Web API からのデータ取得コードの追記
　4.1.5 Nuxt のデータ取得関数の $fetch()
4.2 データ取得処理をまとめておける useAsyncData()
　4.2.1 サンプルプロジェクトの共通部分の作成
　4.2.2 useAsyncData() の使い方
　4.2.3 データ取得の重複を排除するキー
　4.2.4 useAsyncData() の戻り値
　4.2.5 データ項目を絞り込めるpick オプション
　4.2.6 データを加工できるtransform オプション
　4.2.7 useAsyncData() 関数のオプション
4.3 useAsyncData()と$fetch()を簡潔に書けるuseFetch()
　4.3.1 サンプルプロジェクトの共通部分の作成
　4.3.2 useFetch() の使い方
　4.3.3 useFetch() のオプション
4.4 ページ遷移を優先する Lazy
　4.4.1 lazy オプションの働き
　4.4.2 lazy オプションがデフォルトの useLazyAsyncData()
　4.4.3 useLazyAsyncData() の使い方
　4.4.4 読み込み途中の表示に便利な pending
4.5 データ取得処理を再実行するリフレッシュ
　4.5.1 ページ遷移を伴わないデータ取得サンプル
　4.5.2 データ取得処理関数を再利用できるrefresh プロパティ
　4.5.3 リフレッシュを自動化できるwatch オプション
4.6 コンポーザブルとランタイム設定
　4.6.1 コードを再利用できるコンポーザブル
　4.6.2 コンポーザブルの作り方
　4.6.3 コンポーザブルの利用
　4.6.4 ランタイム設定の定義
　4.6.5 ランタイム設定の利用
　4.6.6 環境変数の利用

第5章 Nuxt のサーバ機能

5.1 Nuxt のサーバ機能の基本
　5.1.1 サンプルプロジェクトの準備
　5.1.2 サーバ機能を提供するserver フォルダ
　5.1.3 Nuxt のサーバ API エンドポイントへのアクセス
　5.1.4 Nuxt のサーバ API エンドポイントからのデータ取得
5.2 送信データの扱い
　5.2.1 クエリパラメータでの会員詳細情報の取得
　5.2.2 サーバサイドでのクエリパラメータの取得
　5.2.3 サーバ処理コードもTypeScript の恩恵を受けられる
　5.2.4 リクエストボディの取得
　5.2.5 会員情報登録処理をPOST 送信へ改造
5.3 サーバサイドルーティング
　5.3.1 REST API とその URL
　5.3.2 サーバサイドルーティングプロジェクトの準備
　5.3.3 サーバサイド処理結果の統一
　5.3.4 サーバサイドルーティングを実現するroutes サブフォルダ
　5.3.5 サーバサイドルートパラメータの取得
　5.3.6 データの挿入は POST メソッド
　5.3.7 コンポーネントをREST APIに合わせて変更
5.4 Nuxt のサーバストレージ機能
　5.4.1 インメモリストレージ
　5.4.2 プロジェクトの複製
　5.4.3 サーバストレージ利用の基本
　5.4.4 会員リスト画面用コンポーネントの改造
　5.4.5 会員詳細情報表示関連のコードの改造
　5.4.6 サーバストレージへのデータ登録

第6章 Nuxt でのエラー処理

6.1 Nuxt のエラー発生とエラー処理タグ
　6.1.1 サンプルプロジェクトの準備
　6.1.2 エラーを発生させるcreateError()
　6.1.3 エラー時の表示を実現するNuxtErrorBoundary タグ
　6.1.4 エラーが解消された時の処理
6.2 子コンポーネントレンダリング時のエラー
　6.2.1 サンプルプロジェクトへの追加
　6.2.2 エラー解消が不可能なエラー発生パターン
　6.2.3 画面を遷移するnavigateTo() を併用する
6.3 カスタムエラー画面
　6.3.1 デフォルトエラー画面
　6.3.2 意図的に 500 エラーを発生
　6.3.3 createError() の引数オブジェクト
　6.3.4 エラー画面のカスタマイズ
6.4 サーバ API エンドポイントのエラー処理
　6.4.1 サーバ API エンドポイントでのエラー発生
　6.4.2 500 エラーエンドポイントへのアクセスサンプルの追加
　6.4.3 エンドポイントエラーを格納した error プロパティ
6.5 会員情報管理アプリへのエラー処理
　6.5.1 サンプルプロジェクトの準備
　6.5.2 await には try-catch を利用する
　6.5.3 コンポーネントでは error とresult の両方を評価
　6.5.4 会員詳細情報取得エンドポイントではデータがない場合を想定
　6.5.5 会員詳細情報画面コンポーネントの改造
　6.5.6 データ登録でも失敗時は空の配列をリターン
　6.5.7 会員情報登録画面コンポーネントの改造

第7章 Nuxt のミドルウェア

7.1 ログイン機能の実装
　7.1.1 サンプルプロジェクトの準備
　7.1.2 ログイン機能の概要
　7.1.3 ユーザ認証エンドポイントの実装
　7.1.4 ログイン画面とログイン処理の実装
　7.1.5 認証情報の保存
　7.1.6 ログアウト処理の実装
　7.1.7 ログインユーザ情報とログアウトリンクの表示
7.2 ルートミドルウェア
　7.2.1 トップ画面表示の問題と認可処理
　7.2.2 コンポーネントレンダリングの前に実行されるルートミドルウェア
　7.2.3 特定のコンポーネントに紐づけるインラインミドルウェア
　7.2.4 ルートミドルウェアの引数と戻り値
　7.2.5 ミドルウェアを再利用できる名前付きミドルウェア
　7.2.6 ミドルウェアを複数利用
　7.2.7 全てのルーティングに適用されるグローバルミドルウェア
7.3 サーバミドルウェア
　7.3.1 サーバミドルウェアの作り方
　7.3.2 サーバミドルウェアの注意点
　7.3.3 アクセスエンドポイントパスの取得コード

応用編

第8章 Nuxt の動作の仕組み

8.1 npm runのオプション
　8.1.1 build オプション
　8.1.2 ビルドされたプロジェクトの実行
　8.1.3 preview オプション
　8.1.4 generate オプション
　8.1.5 generate 生成の制約
8.2 Nuxt のレンダリングモード
　8.2.1 Nuxt の 4 種のレンダリングモード
　8.2.2 レンダリングモードの設定
　8.2.3 CSR の挙動
　8.2.4 SSR の挙動
　8.2.5 SSG の挙動
　8.2.6 ISG の挙動
8.3 Redisとの連携
　8.3.1 Redis の必要性とRedis とは
　8.3.2 macOS への Redis のインストールと起動
　8.3.3 Windows への Redis のインストールと起動
　8.3.4 コマンドで Redis に接続
　8.3.5 redis プロジェクトの作成
　8.3.6 Redis 連携コードの記述
　8.3.7 Redis 連携のためのキー文字列の変更

第9章 Nuxt を本番環境へデプロイ

9.1 Nuxtのデプロイ先サービス
　9.1.1 2 種のデプロイ先
　9.1.2 Nuxt が対応しているホスティングプロバイダ
9.2 Netlifyへのデプロイ
　9.2.1 Netlify とは
　9.2.2 middleware-fundamental プロジェクトの移植
　9.2.3 Netlify へ GitHub からのデプロイ
　9.2.4 デプロイの内容確認
　9.2.5 Netlify 版天気情報アプリの作成
　9.2.6 天気情報アプリの Netlify へのデプロイ
　9.2.7 Netlify の環境変数の設定
9.3 AWS Lambdaへのデプロイ
　9.3.1 AWS Lambda とは
　9.3.2 AWS Lambda とNuxt
　9.3.3 server-routes プロジェクトの移植
　9.3.4 AWS Toolkit の導入
　9.3.5 関数の作成
　9.3.6 AWS Lambda 用の設定とビルド
　9.3.7 AWS Lambda 版天気情報アプリの作成
　9.3.8 天気情報アプリ用関数の作成とアップロード
　9.3.9 AWS Lambda の環境変数の設定
9.4 Herokuへのデプロイ
　9.4.1 Heroku とその利点
　9.4.2 Heroku Dyno の用意
　9.4.3 redis プロジェクトの移植
　9.4.4 Heroku で動作するアプリケーションへの改造
　9.4.5 会員管理アプリのHerokuへのデプロイ

付録1 ネットワーク速度の変更

付録2 Vue Devtools

付録3 Nuxt Devtools