はじめに
本書の目的
本ドキュメントは、Nuxt.jsを活用したWebサイト構築の「実践的な手引き」です。Nuxt.jsの特徴や組み立て方、具体的な手順や応用例を分かりやすくまとめ、制作の効率化と品質向上を支援します。
対象読者
- フロントエンドの基本知識を持つ開発者やデザイナー
- 既存サイトをモダン化したい方
- WordPressと連携したい方やSEO対策を考えている方
本書で扱う内容（概略）
- Nuxt.jsの特徴と導入メリット
- プロジェクトの基本構成と開発フロー
- 実際のサイト構築手順（環境構築、ルーティング、デプロイ等）
- WordPress連携、SEO・パフォーマンス改善などの実践Tips
読み方のポイント
各章は独立して読めます。まず第2章でNuxt.jsの全体像をつかみ、第4章の手順を実際に追いながら進めると理解が深まります。小さなサイト（ブログやコーポレートサイト）から試すことをおすすめします。
Nuxt.jsとは？特徴とメリット
概要
Nuxt.jsは、Vue.jsをベースにしたWebフレームワークです。ページの表示方法を選べる点が特徴で、サーバーでレンダリングするSSR（サーバーサイドレンダリング）、ビルド時にHTMLを生成するSSG（静的サイト生成）、通常のSPA（シングルページアプリ）を簡単に切り替えられます。初心者でも扱いやすく、実務でもよく使われます。
主な特徴
- レンダリングモードの選択：SEOや初回表示速度を重視するならSSRやSSGを選べます。たとえば、ブログをSSGで作れば高速な公開が可能です。
- ディレクトリベースのルーティング：pagesフォルダにファイルを置くだけでルートが作られ、手作業を減らせます。
- モジュールとプラグイン：認証や画像最適化、PWA対応などを簡単に追加できます。
- Vueエコシステムとの親和性：既存のVueコンポーネントやライブラリがそのまま使えます。
メリット（具体例付き）
- パフォーマンス向上：サーバーで初回レンダリングすると初回表示が速く、ユーザー体験が良くなります。ECサイトの一覧ページで有効です。
- SEOに強い：検索エンジンに評価されやすく、記事や商品ページを上位表示しやすくなります。
- 開発効率の向上：ルーティングや設定が自動化されるため、実装作業に集中できます。小規模なコーポレートサイトから大規模サービスまで適用できます。
どんな場面に向くか
コンテンツ重視のサイト（ブログ、ニュース、EC）や、初回表示速度が重要なアプリに向いています。拡張性が高いため、将来機能が増える見込みのあるプロジェクトにも適しています。
Nuxt.jsプロジェクトの基本構成
概要
Nuxt.jsのプロジェクトは役割ごとにディレクトリが分かれていて、管理しやすい構造です。初心者でも直感的にファイルを置けます。
pages/
ページコンポーネントを置く場所です。ファイル名がそのままルートになります。例: pages/index.vue → /
components/
再利用する小さなVueコンポーネントを置きます。例: components/Header.vue を複数ページで使います。
layouts/
サイト全体の枠組みを定義します。例: layouts/default.vue に共通のヘッダーやフッターを置き、でページを挿入します。
store/
状態管理用です。ファイルを置くと自動でVuexが有効になります。簡単なカウンターや認証情報を保存できます。
static/ と assets/
static/はそのまま配信される静的ファイル（faviconやrobots.txt）。assets/はSassや画像などビルド処理するファイルです。
plugins/
Vueプラグインやライブラリを初期化する場所です。例: plugins/axios.js でaxiosの設定を行います。
middleware/
ページ遷移前に実行する処理を置きます。認証チェックなどに使います。
nuxt.config.js / nuxt.config.ts
ビルド設定やプラグイン、モジュール、ルーティングの設定をまとめます。環境ごとの設定もここで管理します。
実際に触ると各ディレクトリの役割がより分かりやすくなるので、まずは雛形を作って中のファイルを確認してみてください。
Nuxt.jsによるWebサイト構築手順
1. 開発環境の準備
Node.jsとnpmかyarnをインストールします。プロジェクト作成は例として次のどちらかを使います。
– Nuxt 2: npx create-nuxt-app my-app
– Nuxt 3: npx nuxi init my-app
作成後、依存関係をインストールし、npm run devで開発サーバーを起動します。
2. ページとレイアウトの作成
/pagesにページ（例: index.vue）を置き、/layoutsに共通レイアウト（例: default.vue）を作ります。index.vueはトップページ、default.vueはヘッダー・フッターを共通化する用途です。
3. レンダリングとデプロイ
多くのサイトでは静的サイト生成（SSG）を推奨します。ビルド例:
– Nuxt 2: npm run generate
– Nuxt 3: npx nuxi generate
静的ファイルをホスティングにアップすれば高速に配信できます。
4. WordPressと連携（ヘッドレスCMS）
WordPressのパーマリンクを設定し、REST API（例: /wp-json/wp/v2/posts）で記事を取得します。Nuxtではaxiosやfetchを使い、ページでデータを取得して表示します。
5. SEO対策
@nuxtjs/seoやsitemapモジュールを導入すると、metaタグやsitemap.xmlを自動生成できます。ページごとにhead情報を設定して、検索エンジン向けに最適化してください。
実践Tips・ベストプラクティス
Nuxt3で実務に使うときの具体的なコツを分かりやすくまとめます。読みやすく、すぐ試せるポイントを中心に解説します。
ディレクトリと初期化の注意点
- Nuxt3はディレクトリ構成が柔軟で、app.vueがトップページとして機能します。既存ディレクトリにはnuxiコマンドで直接初期化できないため、空のディレクトリでnuxi initを行い、必要なファイルを移すと安全です。例えば、古いプロジェクトを移行する場合は新規フォルダで初期化してからコードをコピーします。
レイアウトとページ管理
- 下層ページや複数レイアウトは で管理します。例えば、layouts/default.vueとlayouts/admin.vueを用意し、ページごとにレイアウトを切り替えると見通しが良くなります。
小規模と大規模サイトの運用方針
- 小規模サイトは最小限の設定で運用可能です。静的生成や基本的なコンポーネントだけで高速に作れます。大規模サイトではモジュールやプラグイン、状態管理（Pinia）やコンポーザブルの分割を検討してください。ファイルを機能別に分けると保守しやすくなります。
パフォーマンスと運用のコツ
- 画像は適切にリサイズ・遅延読み込みし、コンポーネントは必要時にのみ読み込む（dynamic import）と効果的です。環境変数やシークレットはビルド時に厳格に管理してください。
開発ワークフローと品質管理
- nuxi devでローカル確認、Lintや型チェックで品質を担保します。CIにビルドとテストを組み込み、デプロイ前にステージングで動作確認すると安心です。
これらを意識すると、Nuxt3での開発がより安定し、チームでも扱いやすくなります。
