Nuxt - Vue.jsをフルスタックに進化させるフレームワーク

はじめに

Vue.jsで開発していると、いつか「もっと楽にできないかな」と思う瞬間が来るんですよね。ルーティングの設定、SSRの実装、API連携...手動でやると意外と手間がかかる。

そこで登場するのがNuxt。Vue.jsをベースにしたフルスタックフレームワークで、GitHubスター数59,000超え、月間ダウンロード数435万を誇る人気プロジェクトです。Louis Vuitton、NASA、TikTok、Microsoftといった名だたる企業でも採用されているという話。

個人的には、Vue.jsを使うなら一度はNuxtを試してほしいと思っています。開発効率がかなり変わりますから。

特徴・メリット

ゼロ設定で始められる

正直なところ、フレームワークの初期設定って面倒なんですよね。Nuxtはその辺をうまく解決していて、TypeScriptもゼロ設定で使えます。設定ファイルをいじり回す時間が減るのは、時短という意味でかなりありがたい。

柔軟なレンダリング方式

Nuxtが優秀なのは、レンダリング方式を選べるところ。

• SSR（サーバーサイドレンダリング）: SEO重視のサイト向け
• SSG（静的サイト生成）: ブログやドキュメントサイト向け
• CSR（クライアントサイドレンダリング）: SPAとして動かしたいとき
• ハイブリッドレンダリング: ページごとに方式を切り替え

これ、意外と重要で、プロジェクトの要件に合わせて最適な方式を選べるんですよね。ページ単位で切り替えられるのもポイント高いです。

ファイルベースルーティング

pages/ディレクトリにファイルを置くだけで、自動的にルーティングが生成されます。

pages/
├── index.vue        → /
├── about.vue        → /about
└── blog/
    ├── index.vue    → /blog
    └── [slug].vue   → /blog/:slug

手動でルーター設定を書く必要がないのは、地味だけど開発体験として大きい。

自動インポート

コンポーネントやComposablesが自動インポートされます。いちいちimport文を書かなくていい。細かいことだけど、ファイルの上部がimport文で埋まらないのはスッキリしていて好みです。

インストール方法

Nuxtのセットアップは非常にシンプル。Node.js 18以上が必要です。

# 新規プロジェクト作成
npx nuxi init my-app

# ディレクトリ移動
cd my-app

# 依存関係インストール
npm install

# 開発サーバー起動
npm run dev

これだけでhttp://localhost:3000にアクセスできます。初回起動までの時間が短いのは、個人的にかなり評価しているポイントです。

基本的な使い方

ページコンポーネント

pages/index.vueを作成するとトップページになります。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Nuxtで作ったページです</p>
  </div>
</template>

<script setup lang="ts">
const title = ref('Welcome to Nuxt')
</script>

refを使っていますが、自動インポートのおかげでimport { ref } from 'vue'を書く必要がありません。

データフェッチング

NuxtにはuseFetchというComposableが用意されていて、データ取得が簡単にできます。

<template>
  <div>
    <div v-if="pending">読み込み中...</div>
    <div v-else>
      <article v-for="post in data" :key="post.id">
        <h2>{{ post.title }}</h2>
      </article>
    </div>
  </div>
</template>

<script setup lang="ts">
const { data, pending, error } = await useFetch('/api/posts')
</script>

SSR時にはサーバー側でフェッチして、クライアントにはHTMLと一緒にデータを渡してくれます。ハイドレーションの問題も自動で解決してくれるのは楽ですね。

APIルート

server/api/ディレクトリにファイルを置くと、自動的にAPIエンドポイントになります。

// server/api/posts.ts
export default defineEventHandler(async (event) => {
  return [
    { id: 1, title: '最初の投稿' },
    { id: 2, title: '2番目の投稿' }
  ]
})

これで/api/postsにアクセスするとJSONが返ってきます。フロントエンドとバックエンドを同じプロジェクトで管理できるのは、小〜中規模のプロジェクトだと特に便利。

nuxt.config.ts

設定はnuxt.config.tsで管理します。

export default defineNuxtConfig({
  // 開発ツール有効化
  devtools: { enabled: true },

  // モジュール追加
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt'
  ],

  // SSGモード
  ssr: true,

  // ランタイム設定
  runtimeConfig: {
    apiSecret: '',
    public: {
      apiBase: '/api'
    }
  }
})

実践的なユースケース

ブログサイト

NuxtはSSGに対応しているので、ブログサイトとの相性がいいです。@nuxt/contentモジュールを使えば、Markdownファイルからコンテンツを生成できます。

npm install @nuxt/content

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/content']
})

<!-- pages/blog/[...slug].vue -->
<template>
  <ContentDoc />
</template>

これだけでcontent/blog/以下のMarkdownファイルが記事になります。コスパ的にかなり良い選択肢だと思います。

ECサイト

SSRによるSEO対策と、動的なカート機能を両立させたいECサイトにも向いています。商品一覧はSSR、カート操作はCSRという使い分けができるので。

企業サイト

コーポレートサイトのような更新頻度が低いサイトは、SSGで静的ファイルとして出力するのがおすすめ。ホスティングコストも抑えられますし、表示速度も速い。

まとめ

Nuxtは、Vue.jsでの開発体験を一段階上げてくれるフレームワークです。

• ゼロ設定でTypeScript対応
• SSR/SSG/CSRを柔軟に選択可能
• ファイルベースルーティングで設定不要
• 自動インポートでコード量削減
• APIルートでバックエンドも書ける

30代になって思うのは、開発効率って結局のところ「余計な作業をいかに減らすか」なんですよね。Nuxtはその辺をうまく解決してくれるフレームワークだと思います。

Vue.jsを使っていて「もう少し楽したい」と感じているなら、Nuxtは試してみる価値があります。学習コストも比較的低いので、週末にサンプルプロジェクトを作ってみるところから始めてみてはどうでしょうか。