nuxtで始める最新webサイト構築の基本と実践完全ガイド

2025 11/29

2025/11/29

はじめに

本レポートは、Nuxt.jsを用いたWebサイト構築のポイントを分かりやすくまとめた入門〜中級者向けのガイドです。Nuxt.jsの基本概念や環境構築、ディレクトリ構成、さらにWordPressと連携した実践例まで、段階を追って学べます。

目的

Nuxt.jsの特徴を理解し、実際に手を動かしてサイトを作れるようになることを目的とします。静的サイトやサーバーサイドレンダリング、ヘッドレスCMSとの連携など、現場で使える知識を提供します。

対象読者

HTML/CSSと基礎的なJavaScriptの知識を持つ方
モダンなフロントエンドでSEOや表示速度を意識したい方
WordPressをバックエンドにしたヘッドレス構成に興味がある方

本書の構成（全7章）

はじめに（本章）
Nuxt.jsの基本概念と特徴
npx create-nuxt-appでの環境構築
プロジェクトのコアディレクトリ構成
WordPressとNuxt.jsの連携
Nuxt.js環境構築の詳細手順
WordPress連携とAPI利用例

読み方のコツ

実例を手で試しながら進めると理解が深まります。まずは第2章で基本を押さえ、第3章以降で実際の構築作業に取り組んでください。

Nuxt.jsの基本概念と特徴

概要

Nuxt.jsはVue.jsを基盤としたフロントエンドフレームワークです。構成やルールを提供して開発を効率化します。初めての人でも扱いやすい設計で、SPAだけでなくサーバーサイドレンダリング（SSR）や静的サイト生成（SSG）にも対応します。

主な特徴

開発の初期設定が少なく、すぐに開発を始められます。実務でよく使う機能を標準で備えます。
SEO対策がしやすく、ページごとのmeta情報の管理が簡単です。

自動ルーティング

pagesディレクトリに.vueファイルを置くと、そのファイル名がURLになります。例: pages/about.vue → /about。動的ルートはアンダースコアで表現します。例: pages/posts/_id.vue → /posts/1 のように動的に値を受け取れます。

データ取得とレンダリング

asyncDataやfetchを使い、ページ描画前にデータを取得できます。SSRではサーバー側でレンダリングしてHTMLを返すため、表示が速くSEOにも有利です。SSGではあらかじめ静的なHTMLを生成します。

レイアウト・プラグイン・モジュール

レイアウト機能で共通部分をまとめ、プラグインで外部ライブラリを組み込みます。公式やコミュニティのモジュールでPWA対応や認証などを手軽に追加できます。

いつ向いているか

コンテンツ中心のサイトやSEO重視のプロジェクト、速度と開発効率を両立したい場合に適します。小規模から中規模のアプリ開発にも扱いやすいです。

npx create-nuxt-appコマンドによる開発環境構築

はじめに

npx create-nuxt-appは、Nuxt.jsのプロジェクトを対話形式で素早く作成するコマンドです。複雑な手作業を省き、すぐに開発に入れます。ここでは準備から実行、よくある選択肢の意味、簡単なトラブル対処まで丁寧に説明します。

前提（準備）

Node.js（推奨14以上）とnpmがインストールされていること
インターネット接続があること

実行手順（基本例）

ターミナルを開き、作業ディレクトリで次を実行します。
npx create-nuxt-app my-nuxt-app
プロンプトに従って設定を選びます。
作成後はプロジェクトに移動し、開発サーバーを起動します。
cd my-nuxt-app
npm run dev

主な選択肢の意味（わかりやすく）

プロジェクト名：フォルダ名になります。
レンダリングモード：SSR（サーバーで描画）、SPA（クライアントのみ）、Static（静的ファイル）から選べます。公開方法に合わせて選んでください。
言語：JavaScriptかTypeScript。型を使いたければTypeScriptを選びます。
UIフレームワーク：VuetifyやTailwindなど。見た目を素早く整えたいときに便利です。
モジュール（Axios、PWA等）：API連携やオフライン対応など、必要な機能を選べます。

よくあるトラブルと対処

npxが古い：npmをアップデートしてください（npm install -g npm）。
パーミッションエラー：管理者権限または別フォルダで試してください。
依存関係の失敗：作成後にnpm installを再実行すると直ることがあります。

小さなコツ

素早く試すだけならデフォルト設定で作成し、後から必要なモジュールを追加する方法が手軽です。
Gitで管理するなら初期化を有効にすると便利です。

Nuxt.jsプロジェクトのコアディレクトリ構成

components

小さな再利用可能なUI部品を置く場所です。ボタンやカード、フォームなどをコンポーネント化します。例: components/Button.vue。名前はPascalCaseやkebab-caseどちらでも使えます。Nuxtでは設定で自動インポートできます。

pages

ファイル構成がそのままルーティングになります。pages/index.vueはルート、pages/about.vueは /about に対応します。動的ルートはファイル名にアンダースコアを使います（pages/posts/_id.vue）。ネストしたフォルダで入れ子のルートを作れます。

layouts

アプリ全体の共通レイアウトを管理します。layouts/default.vueを基本にして、個別ページでlayoutプロパティを指定して切り替えます。ヘッダーやフッター、サイドバーをここでまとめます。

assets と static

assetsは画像やSassなどビルド時に処理するファイル、staticはそのまま公開するファイルを置きます。faviconやrobots.txtはstaticに置きます。

plugins

Vueプラグインや外部ライブラリの初期化コードを置きます。クライアント専用やサーバー専用の実行は設定で制御できます。

store

Vuexストアを置くディレクトリです。storeフォルダを作ると自動で有効になります。モジュールで状態管理を分割できます。

middleware と nuxt.config.js

middlewareはページ遷移時の処理（認可やログ）に使います。nuxt.config.jsはプロジェクト全体の設定ファイルです。

これらの構成を理解すると、役割ごとにコードを整理して効率的に開発できます。

WordPressとNuxt.jsの連携による次世代ウェブサイト構築

概要

Nuxt.jsはフロント側を担当し、WordPressをコンテンツ管理に使う「ヘッドレスCMS」構成でよく使われます。WordPressのREST APIから記事や固定ページを取得し、表示します。SSG（静的生成）やSSR（サーバーサイドレンダリング）を選べるため、表示速度と動的性のバランスをとれます。

連携の基本フロー（例）

WordPress側で公開する投稿にREST APIを有効にする（通常は標準で可）。
Nuxt.jsでaxiosやfetchを使ってエンドポイント（例: /wp-json/wp/v2/posts）からデータを取得します。
取得したデータをページやコンポーネントで描画します。

レンダリング方式の選び方

SSG: 記事更新が少なく、高速表示を重視するサイト向けです。ビルド時にHTMLを生成します。
SSR: 記事が頻繁に更新される、またはユーザー依存の表示が必要な場合に向きます。

実装のポイント

プレビュー機能は専用エンドポイントとプレビュー用ルートで実装します。
認証が必要なAPIはBearerトークンやOAuthで保護します。
メディアはCDNを利用すると高速化できます。

運用上の注意

CORS設定を確認してAPIが公開されているかを確認してください。
キャッシュ戦略（HTTPキャッシュやCDNキャッシュ）を設けると負荷を下げられます。

これらを踏まえれば、WordPressの編集性とNuxt.jsの高速な表示を両立した次世代サイトが作れます。

Nuxt.js環境構築の詳細手順

前提条件

Node.js（LTS推奨）とnpmまたはyarnをインストールしてください。インストール後、端末で次を実行しバージョン確認します。

node -v
npm -v
yarn -v  # yarnを使う場合

プロジェクト作成（対話式）

npxかyarnで対話式セットアップを実行します。例:

# npm経由
npx create-nuxt-app my-nuxt-app
# yarn経由
yarn create nuxt-app my-nuxt-app

対話では以下を選びます。
– レンダリングモード: Universal（SSR）または Single Page（SPA）。SSRはSEO向き、SPAはクライアント中心のアプリに適します。
– UIフレームワーク: VuetifyやTailwind CSSなど。例えばTailwindは軽量でカスタマイズしやすいです。
– HTTPクライアント: axiosが一般的。fetchも選べます。
– リンター/フォーマッタ: ESLintやPrettierを導入するとコード品質が保ちやすいです。

起動とビルド

開発サーバーを起動します。

cd my-nuxt-app
npm run dev
# または
yarn dev

本番ビルドと生成:

npm run build
npm run start   # SSRの場合
npm run generate # 静的サイト生成の場合

環境変数と設定

.envファイルでAPIのエンドポイントやキーを管理します。Nuxtではnuxt.config.jsにenvやpublicRuntimeConfigを設定できます。

よくあるトラブル対処

Nodeのバージョンが古いと依存で失敗するのでLTSへ更新してください。
グローバル権限エラーが出たらsudoを安易に使わずnvmなどで管理するのが安全です。

ワンポイント

package.jsonのscriptsを確認・編集すると起動オプションを簡単に管理できます。例えばポート変更やホスト指定は”nuxt –port 4000″のように設定します。

以上が、初期構築から起動・ビルドまでの実践的な手順です。

WordPressとの連携方法とAPI利用例

概要

Nuxt.jsからWordPressのREST APIへリクエストし、JSONを取得して表示します。ここではfetch APIとaxiosの具体例を示し、記事一覧と個別記事ページを動的に生成する方法を丁寧に説明します。

WordPress REST APIの基本

エンドポイント例: https://example.com/wp-json/wp/v2/posts
このURLにGETでアクセスすると投稿データの配列が返ります。各オブジェクトにtitle, content, excerpt, date, idなどが含まれます。

fetch APIを使う例（ページ一覧）

export default {
  async asyncData() {
    const res = await fetch('https://example.com/wp-json/wp/v2/posts');
    const posts = await res.json();
    return { posts };
  }
}

取得したpostsをページでループ表示できます。

axiosを使う例（シンプル）

import axios from 'axios';
export default {
  async asyncData() {
    const { data: posts } = await axios.get('https://example.com/wp-json/wp/v2/posts');
    return { posts };
  }
}