# 静的サイトジェネレータ Nuxt.js ## 概要 Nuxt.jsは、Vue.jsベースのフルスタックフレームワークで、強力なSSG（静的サイト生成）機能も提供します。46k超のGitHubスターを誇り、コンパイル時最適化によって高いパフォーマンスを実現し、SSG、SSR、SPAなど柔軟なレンダリングモードを提供します。 ## 詳細 Nuxt.jsは、Vue.jsエコシステムのデファクトスタンダードとしての地位を確立し、静的サイト生成を含む複数のレンダリング戦略をサポートしています。ビルドエンジンにNitroを採用し、優秀なパフォーマンスと開発者体験を提供します。 ### 主要機能 #### 1. 複数のレンダリングモード - **静的生成（SSG）**: `nuxt generate`でビルド時にページを事前レンダリング - **サーバーサイドレンダリング（SSR）**: 動的なサーバーレンダリング - **シングルページアプリケーション（SPA）**: クライアントサイドのみのレンダリング - **ハイブリッドレンダリング**: ルートごとに異なるレンダリング戦略を組み合わせ #### 2. Vue.js駆動の開発 - **自動インポート**: コンポーネント、コンポーザブル、ユーティリティの自動インポート - **ファイルベースルーティング**: ディレクトリ構造に基づく自動ルート生成 - **TypeScriptサポート**: 自動生成された型定義によるファーストクラスのTypeScript統合 #### 3. パフォーマンス最適化 - **Nitroエンジン**: 超高速ビルドシステムとサーバーエンジン - **コード分割**: 最適な読み込みのための自動コード分割 - **SEOフレンドリー**: 組み込みのメタタグ管理と構造化データサポート - **画像最適化**: 高度な画像処理機能 #### 4. 開発者体験 - **Vue DevTools**: 統合されたVue.js DevToolsサポート - **ホットモジュール置換**: 即座の更新による高速開発 - **豊富なモジュール**: 充実した公式・コミュニティモジュールエコシステム ## メリット・デメリット ### メリット - **Vue.jsエコシステム統合**: Vue.jsライブラリやツールとのシームレスな統合 - **柔軟なレンダリング**: SSG、SSR、SPA、ハイブリッドアプローチのサポート - **パフォーマンス**: Nitroによる優秀なビルド速度とランタイムパフォーマンス - **開発者体験**: 自動インポートとファイルベースルーティングによる優れたDX - **モジュールエコシステム**: 豊富な公式・コミュニティモジュールコレクション - **TypeScriptサポート**: 自動生成された型による優秀なTypeScript体験 ### デメリット - **Vue.js依存**: Vue.jsエコシステムに限定（フレームワーク非依存ではない） - **学習コストあり**: Vue.jsの概念とNuxtの規約の理解が必要 - **ビルド複雑性**: 基本的な用途には単純なSSGより複雑 - **メモリ使用量**: 開発時のメモリ消費が高め ## 参考ページ - [公式サイト](https://nuxt.com/) - [ドキュメント](https://nuxt.com/docs) - [GitHubリポジトリ](https://github.com/nuxt/nuxt) - [モジュールディレクトリ](https://nuxt.com/modules) - [使用例](https://nuxt.com/docs/examples) ## 書き方の例 ### 1. 基本セットアップと設定 **Nuxt.jsのインストール** ```bash # 新しいNuxtプロジェクトを作成 npx nuxi@latest init my-nuxt-app cd my-nuxt-app # 依存関係をインストール npm install # 開発サーバーを起動 npm run dev ``` **SSG用のnuxt.config.ts** ```typescript export default defineNuxtConfig({ // 静的サイト生成を有効化 nitro: { prerender: { routes: ['/sitemap.xml'] } }, // SEO設定 app: { head: { title: 'My Nuxt SSG Site', meta: [ { name: 'description', content: '私のNuxt.jsで構築した静的サイト' } ] } }, // TypeScript厳格モードを有効化 typescript: { strict: true } }) ``` ### 2. ページとルーティング **pages/index.vue** ```vue <template> <div> <h1>{{ data.title }}</h1> <p>{{ data.content }}</p> <NuxtLink to="/about">About</NuxtLink> </div> </template> <script setup> // このページの事前レンダリングを有効化 definePageMeta({ prerender: true }) // SSG用のビルド時データ取得 const { data } = await $fetch('/api/content') // SEOメタタグ useSeoMeta({ title: 'ホームページ', description: '私のNuxt.jsサイトへようこそ' }) </script> ``` **pages/blog/[slug].vue** ```vue <template> <article> <h1>{{ post.title }}</h1> <p>{{ post.content }}</p> </article> </template> <script setup> const route = useRoute() const { data: post } = await $fetch(`/api/posts/${route.params.slug}`) // 全ブログ投稿の静的ルートを生成 export async function getStaticPaths() { const posts = await $fetch('/api/posts') return posts.map(post => ({ params: { slug: post.slug } })) } </script> ``` ### 3. サーバーAPIルート **server/api/posts/index.get.ts** ```typescript export default defineEventHandler(async (event) => { // このAPIはSSG用に事前レンダリングされる const posts = [ { id: 1, slug: 'first-post', title: '最初のブログ投稿', content: '初回投稿のコンテンツです...' }, { id: 2, slug: 'second-post', title: '2番目のブログ投稿', content: '2回目投稿のコンテンツです...' } ] return posts }) ``` ### 4. 静的生成コマンド **package.jsonスクリプト** ```json { "scripts": { "dev": "nuxt dev", "build": "nuxt build", "generate": "nuxt generate", "preview": "nuxt preview" } } ``` **静的サイトを生成** ```bash # 静的ファイルを生成 npm run generate # 生成されたサイトをプレビュー npm run preview # カスタム設定でSSGビルド npx nuxt generate --preset=static ``` ### 5. 高度な設定 **高度なSSG設定でのnuxt.config.ts** ```typescript export default defineNuxtConfig({ // 静的サイト生成設定 nitro: { prerender: { // 特定のルートを事前レンダリング routes: ['/sitemap.xml', '/robots.txt'], // 事前レンダリングから除外するルート ignore: ['/admin', '/api/dynamic'] } }, // ハイブリッドレンダリング用のルートルール routeRules: { // ホームページはビルド時に事前レンダリング '/': { prerender: true }, // ブログ投稿はISRを使用（オンデマンド生成、キャッシュ） '/blog/**': { isr: true }, // 管理画面はSPAのみ '/admin/**': { ssr: false } }, // 機能強化のモジュール modules: [ '@nuxt/content', // コンテンツ管理 '@nuxt/image', // 画像最適化 '@nuxtjs/sitemap' // サイトマップ生成 ] }) ``` ### 6. Nuxt Contentによるコンテンツ管理 **Nuxt Contentのインストールと設定** ```bash npm install @nuxt/content ``` **content/blog/hello-world.md** ```markdown --- title: こんにちは世界 description: 私の最初のブログ投稿 date: 2024-01-01 --- # こんにちは世界 これはMarkdownで書かれた私の最初のブログ投稿です。 ``` **pages/blog/index.vue** ```vue <template> <div> <h1>ブログ投稿</h1> <article v-for="post in posts" :key="post._path"> <NuxtLink :to="post._path"> <h2>{{ post.title }}</h2> <p>{{ post.description }}</p> </NuxtLink> </article> </div> </template> <script setup> // ビルド時にコンテンツをクエリ const { data: posts } = await queryContent('/blog').find() </script> ```