1. はじめに：Vue.jsとNuxt.jsとは何か
Vue.jsは、直感的なAPIと柔軟な設計思想で世界中の開発者に支持されているJavaScriptフレームワークです。UI構築に特化し、標準的なHTML・CSS・JavaScriptの知識があれば誰でも始められるのが特徴です。Nuxt.jsはそのVue.jsをベースに、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）、ファイルベースルーティングなど、現代Web開発に必要な機能を包括的に提供するフルスタックフレームワークです。SEOやパフォーマンス、開発効率の向上を目指す全てのWebエンジニアにとって、欠かせない選択肢となっています。
# Node.js（18.x以上）をインストールした上で
npm create nuxt@latest my-nuxt-app
cd my-nuxt-app
npm install
npm run dev
2. Nuxt.jsのプロジェクト構成と自動ルーティング
Nuxt.jsの最大の特徴は、ディレクトリ構成に従うだけで自動的にルーティングが生成される点です。pages/ディレクトリに.vueファイルを置くだけで、そのファイル名がURLルートとして認識されます。これにより、複雑なルーティング設定は不要で、シンプルかつ拡張性の高い開発体験が得られます。
my-nuxt-app/
├─ pages/
│ ├─ index.vue // ルート（/）
│ └─ about.vue // /about
├─ components/
├─ layouts/
├─ nuxt.config.ts
<!-- pages/about.vue -->
<template>
<div>
<h1>Aboutページ</h1>
<p>Nuxt.jsの自動ルーティングを体験しましょう。</p>
</div>
</template>
3. ページとレイアウトの基本
Nuxt.jsではlayouts/ディレクトリにレイアウトファイルを作成し、全ページ共通のヘッダーやフッターを定義できます。default.vueがデフォルトレイアウトとして適用され、ページごとにレイアウトを切り替えることも可能です。
<!-- layouts/default.vue -->
<template>
<div>
<header><h2>共通ヘッダー</h2></header>
<NuxtPage />
<footer><small>© 2025 Nuxt Sample</small></footer>
</div>
</template>
4. コンポーネントの自動インポートと再利用
components/ディレクトリにVueコンポーネントを配置すると、Nuxt.jsが自動でインポートしてくれます。これにより、import文なしでどこでもコンポーネントを利用でき、開発効率が大幅に向上します。
<!-- components/MyButton.vue -->
<template>
<button @click="$emit('click')"><slot>ボタン</slot></button>
</template>
<!-- pages/index.vue -->
<template>
<div>
<h1>トップページ</h1>
<MyButton @click="onClick">クリック！</MyButton>
</div>
</template>
<script setup>
function onClick() {
alert('ボタンが押されました');
}
</script>
5. ファイルベースルーティングと動的ルート
Nuxt.jsでは、pages/配下のファイル名やディレクトリ構造によって動的ルートやネストルートも自動生成されます。例えば、[id].vueとすることでパラメータ付きルートが作れます。
<!-- pages/posts/[id].vue -->
<template>
<div>
<h1>記事ID: {{ id }}</h1>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
const id = route.params.id
</script>
6. ナビゲーションとNuxtLink
ページ間の遷移には<NuxtLink>コンポーネントを使います。これはSPAとしての高速なページ遷移やプリフェッチも自動で行ってくれるため、ユーザー体験が向上します。
<template>
<nav>
<NuxtLink to="/">Home</NuxtLink> |
<NuxtLink to="/about">About</NuxtLink>
</nav>
</template>
7. データフェッチとAPI連携
Nuxt3ではuseFetchやuseAsyncDataといったコンポーザブルでサーバー・クライアント両対応のデータ取得が可能です。APIからデータを取得し、そのままページに反映できます。
<script setup>
const { data: posts } = await useFetch('https://jsonplaceholder.typicode.com/posts')
</script>
<template>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>
8. 状態管理とVuex・Pinia
Nuxt3では公式にPiniaが推奨されており、グローバルな状態管理が容易に行えます。ストアを作成し、アプリ全体でデータを共有できます。
npm install pinia
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() { this.count++ }
}
})
<script setup>
import { useCounterStore } from '~/stores/counter'
const counter = useCounterStore()
</script>
<template>
<button @click="counter.increment">カウント: {{ counter.count }}</button>
</template>
9. ミドルウェアと認証・ガード
middleware/ディレクトリにファイルを置くと、ページ遷移時の処理を簡単に挟めます。認証やアクセス制御、リダイレクトなどに活用できます。
// middleware/auth.global.js
export default defineNuxtRouteMiddleware((to, from) => {
const isLoggedIn = false // ロジック例
if (!isLoggedIn && to.path !== '/login') {
return navigateTo('/login')
}
})
10. レスポンシブデザインとカスタムCSS
assets/ディレクトリにCSSやSCSSを配置し、グローバルに読み込むことで、レスポンシブなデザインや独自のスタイルを簡単に適用できます。
/* assets/main.css */
body { font-family: 'Noto Sans JP', sans-serif; }
@media (max-width: 600px) {
h1 { font-size: 1.5rem; }
}
// nuxt.config.ts
export default defineNuxtConfig({
css: ['~/assets/main.css']
})
11. 静的サイト生成（SSG）とデプロイ
Nuxtはnpm run generateで静的HTMLを生成できます。NetlifyやVercel、GitHub Pagesなど静的ホスティングサービスへのデプロイも容易です。
npm run generate
# dist/ ディレクトリが生成される
12. サーバーサイドレンダリング（SSR）とSEO最適化
SSRにより、初回表示時からHTMLが生成されるため、SEOやパフォーマンスが大幅に向上します。head()やuseHead()でメタ情報も柔軟に設定可能です。
<script setup>
useHead({
title: 'Nuxtサンプルサイト',
meta: [{ name: 'description', content: 'Nuxt.jsによるSEO最適化例' }]
})
</script>
13. プラグイン・モジュールの活用
Nuxtは豊富な公式・サードパーティモジュールが利用可能です。認証、i18n（多言語）、PWA、Google Analytics連携なども数行で導入できます。
npm install @nuxtjs/i18n
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n']
})
14. TypeScript・テスト・Lint対応
Nuxt3はTypeScriptを標準サポートし、型安全な開発が可能です。また、JestやESLintなどのツールも容易に統合でき、品質の高いプロダクトを実現できます。
npm install --save-dev typescript @nuxt/types
// nuxt.config.ts（TypeScriptで記述可能）
export default defineNuxtConfig({
// TypeScriptや型の設定
})
15. まとめと今後の展望
Nuxt.jsはVue.jsのシンプルさとパワフルさを最大限に活かし、SSR/SSGや自動ルーティング、コンポーネントの自動インポートなど、現代Web開発に不可欠な機能をオールインワンで提供します。SEOやパフォーマンス、開発効率を追求するなら、Nuxt.jsは最良の選択肢です。今後もエコシステムの拡大や新機能の追加が期待されており、フロントエンド・フルスタック開発の新定番として、ぜひ一度体験してみてください。