目次

• 導入編
• 第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

正誤表

FAQ

現在、FAQはありません。

ダウンロード

お問い合わせ

書籍に関するご質問や誤りのご報告、ご意見・ご感想などをお寄せください。

Powered by メールフォーム 『オレンジフォーム』