Nuxt の i18n で多言語サイトを簡単構築

2025年8月20日

Nuxt

Nuxt の i18n で多言語サイトを簡単構築

近年、グローバル化の波は Web 開発の世界にも大きな影響を与えています。企業や個人が世界中のユーザーにサービスを提供するため、多言語対応の Web サイトの需要は急速に高まっているのです。

しかし、多言語サイトの構築は従来、複雑で時間のかかる作業でした。そんな課題を解決してくれるのが、Nuxt.js の i18n モジュールです。このモジュールを使用することで、効率的かつ効果的な多言語サイトの構築が可能になります。

本記事では、Nuxt.js の i18n モジュールを活用した多言語サイト構築について、基礎から実践まで詳しく解説いたします。初心者の方でも安心して取り組めるよう、段階的に説明していきますので、ぜひ最後までお読みください。

背景

グローバル化する Web サイトの需要

現代のビジネス環境では、国境を越えたサービス展開が当たり前になっています。E コマースサイト、企業の公式サイト、SaaS プラットフォームなど、あらゆる分野で多言語対応の重要性が増しているのです。

統計によると、インターネットユーザーの約 60%が英語以外の言語を母語としており、ユーザーは自分の母語でサービスを利用したいと考えています。そのため、多言語対応は単なる「あると良い機能」ではなく、グローバル市場での競争力を左右する必須要素となっているのです。

以下の図は、多言語サイトがユーザーエクスペリエンスに与える影響を示しています。

mermaidflowchart TD
    A[グローバルユーザー] --> B{言語対応状況}
    B -->|母語対応あり| C[高いUX]
    B -->|母語対応なし| D[低いUX]
    C --> E[長時間滞在]
    C --> F[高いコンバージョン率]
    D --> G[早期離脱]
    D --> H[低いコンバージョン率]

この図から分かるように、言語対応はユーザーの行動に直接的な影響を与えます。母語でサービスを利用できるユーザーは、より長時間サイトに滞在し、購買や登録などのアクションを起こしやすくなるのです。

多言語サイト構築の従来の課題

従来の多言語サイト構築では、以下のような課題がありました。

課題項目	詳細内容	影響度
開発工数	言語ごとに個別のページやファイルを作成	高
メンテナンス	翻訳内容の更新時に複数ファイルを修正	高
SEO 対応	各言語の URL 構造やメタデータの最適化	中
パフォーマンス	言語リソースの読み込み方法の最適化	中
統一性	デザインやレイアウトの言語間での一貫性	低

これらの課題により、多言語サイトの開発は専門知識を持つ開発者でも困難な作業となっていました。特に、コンテンツの更新頻度が高いサイトでは、メンテナンスコストが膨大になることも珍しくありませんでした。

Nuxt.js が提供する i18n ソリューションの位置づけ

Nuxt.js は、Vue.js ベースの強力なフレームワークとして、多くの開発者に愛用されています。その Nuxt.js エコシステムの中で、多言語対応を担うのが @nuxtjs/i18n モジュールです。

このモジュールは、従来の課題を解決するために設計されており、以下の特徴を持っています。

統合された開発体験: Nuxt.js の設定ファイル一つで多言語機能を有効化
自動化されたルーティング: 言語コードを含む URL の自動生成
効率的なリソース管理: 翻訳ファイルの一元管理と動的読み込み
SEO フレンドリー: 検索エンジン最適化の自動対応

mermaidgraph LR
    A[Nuxt.js] --> B[nuxtjs i18n モジュール]
    B --> C[自動ルーティング]
    B --> D[翻訳管理]
    B --> E[SEO最適化]
    B --> F[パフォーマンス最適化]
    
    C --> G[en/about]
    C --> H[ja/about]
    D --> I[locale en.json]
    D --> J[locale ja.json]

この図解からも分かるように、@nuxtjs/i18n モジュールは Nuxt.js の核となる機能と緊密に連携し、包括的な多言語ソリューションを提供しています。

課題

手動での多言語対応の複雑さ

手動で多言語サイトを構築する場合、開発者は多くの複雑な作業に直面します。最も大きな課題の一つが、言語ごとのファイル管理です。

従来のアプローチでは、以下のような構造になることが一般的でした。

javascript// 従来の手動アプローチの例
pages / en / index.vue;
about.vue;
contact.vue;
ja / index.vue;
about.vue;
contact.vue;
fr / index.vue;
about.vue;
contact.vue;

この構造の問題点は明らかです。新しいページを追加するたびに、対応するすべての言語でファイルを作成する必要があります。さらに、各ファイルで翻訳テキストを直接記述するため、翻訳の更新時には複数のファイルを修正しなければなりません。

SEO 対応の難しさ

多言語サイトの SEO 対応は、技術的に複雑な要素が多く含まれています。検索エンジンが各言語のページを正しく認識し、適切にインデックスするためには、以下の設定が必要です。

SEO 要素	説明	実装の難易度
hreflang 属性	言語とページの関係を検索エンジンに伝える	高
canonical URL	重複コンテンツの問題を回避	中
言語固有メタデータ	title や description の各言語対応	中
サイトマップ	多言語ページの構造化情報	高
URL 構造	言語コードを含むクリーンな URL	低

手動でこれらすべてを実装することは、経験豊富な開発者でも時間がかかる作業です。特に hreflang 属性の正しい設定は、間違いやすく、SEO 効果を大きく左右する重要な要素となっています。

メンテナンス性の問題

多言語サイトのメンテナンスにおける最大の課題は、コンテンツの一貫性を保つことです。以下のような状況が頻繁に発生します。

翻訳更新時の課題例：

javascript// 問題のあるアプローチ - 各コンポーネントに翻訳を直接記述
export default {
  data() {
    return {
      title: {
        en: 'Welcome to our website',
        ja: 'ウェブサイトへようこそ',
        fr: 'Bienvenue sur notre site web',
      },
    };
  },
};

このアプローチでは、一つの翻訳を変更するために、複数のコンポーネントファイルを修正する必要があります。大規模なサイトでは、この作業は非現実的になってしまいます。

翻訳の不整合や更新漏れが発生しやすく、ユーザーエクスペリエンスの低下につながるのです。

パフォーマンスへの影響

多言語対応によるパフォーマンスへの影響も重要な課題です。特に以下の点で問題が発生しやすくなります。

mermaidsequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Files

    User->>Browser: ページアクセス
    Browser->>Server: リクエスト送信
    Server->>Files: 全言語ファイル読み込み
    Files->>Server: 大量データ返却
    Server->>Browser: 重いレスポンス
    Browser->>User: 表示遅延

上記の図が示すように、適切な最適化がない場合、必要のない言語リソースまで読み込んでしまい、パフォーマンスが著しく低下する可能性があります。

特に以下の要因がパフォーマンスに悪影響を与えます。

不要な言語リソースの読み込み: ユーザーが使用しない言語の翻訳ファイルまで読み込む
適切でないキャッシュ戦略: 言語切り替え時の不要な再読み込み
非効率な言語検出: ユーザーの言語設定を毎回確認する処理

これらの課題を解決するために、効率的な多言語サイト構築アプローチが求められているのです。

解決策

@nuxtjs/i18n モジュールの概要

@nuxtjs/i18n モジュールは、これまでに述べた多言語サイト構築の課題を包括的に解決するソリューションです。Vue I18n ライブラリをベースに、Nuxt.js 特有の機能と緊密に統合されています。

このモジュールの最大の特徴は、設定ベースのアプローチを採用していることです。複雑なロジックを記述することなく、設定ファイルでの宣言的な記述だけで、本格的な多言語サイトを構築できます。

主要な機能概要：

機能分類	具体的な機能	メリット
ルーティング	自動言語ルート生成	開発工数削減
翻訳管理	ファイルベース翻訳	メンテナンス性向上
SEO	自動メタデータ生成	検索最適化
パフォーマンス	遅延読み込み対応	表示速度向上
言語検出	ブラウザ言語自動検出	UX 向上

自動ルーティング機能

@nuxtjs/i18n の最も革新的な機能の一つが、自動ルーティングシステムです。この機能により、開発者は言語ごとに個別のページファイルを作成する必要がなくなります。

従来のアプローチと比較すると、その効率性は明らかです。

従来のアプローチ：

javascript// 言語ごとに個別ファイルが必要
pages / en / about.vue; // 英語版
ja / about.vue; // 日本語版
fr / about.vue; // フランス語版

@nuxtjs/i18n でのアプローチ：

javascript// 一つのファイルで全言語対応
pages / about.vue; // 全言語共通

自動ルーティング機能は、以下のような URL 構造を自動的に生成します。

mermaidflowchart TD
    A[pages/about.vue] --> B[自動ルーティング]
    B --> C[en/about]
    B --> D[ja/about]
    B --> E[fr/about]
    B --> F[about デフォルト言語]

    C --> G[英語版コンテンツ]
    D --> H[日本語版コンテンツ]
    E --> I[フランス語版コンテンツ]
    F --> J[デフォルト言語コンテンツ]

この自動ルーティング機能により、新しいページを追加する際も、一つのファイルを作成するだけで、設定されたすべての言語でアクセス可能になります。

翻訳ファイル管理システム

効率的な翻訳管理は、多言語サイトの成功に欠かせない要素です。@nuxtjs/i18n では、JSON ベースの翻訳ファイル管理システムを採用しています。

基本的な翻訳ファイル構造：

javascript// locales/en.json
{
  "nav": {
    "home": "Home",
    "about": "About",
    "contact": "Contact"
  },
  "page": {
    "title": "Welcome to our website",
    "description": "We provide excellent services"
  }
}

javascript// locales/ja.json
{
  "nav": {
    "home": "ホーム",
    "about": "概要",
    "contact": "お問い合わせ"
  },
  "page": {
    "title": "ウェブサイトへようこそ",
    "description": "優れたサービスを提供しています"
  }
}

この構造化されたアプローチにより、翻訳の管理が大幅に簡素化されます。階層構造を使用することで、関連する翻訳をグループ化し、メンテナンスしやすい形で整理できるのです。

翻訳管理の利点：

中央集約管理: すべての翻訳が専用ファイルに集約
構造化: 階層構造による論理的な整理
検索性: キーベースでの翻訳検索が容易
バージョン管理: Git などでの変更履歴追跡が可能
翻訳者フレンドリー: 技術知識不要で翻訳作業が可能

SEO 最適化機能

@nuxtjs/i18n は、多言語サイトの SEO 対応を自動化します。手動で実装するには複雑な SEO 要素が、設定だけで適切に生成されるのです。

自動生成される SEO 要素：

javascript// 自動生成される HTML の例
<html lang="ja">
<head>
  <title>ウェブサイトへようこそ</title>
  <meta name="description" content="優れたサービスを提供しています">

  <!-- hreflang 属性の自動生成 -->
  <link rel="alternate" hreflang="en" href="https://example.com/en/about">
  <link rel="alternate" hreflang="ja" href="https://example.com/ja/about">
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/about">
  <link rel="alternate" hreflang="x-default" href="https://example.com/about">

  <!-- canonical URL の設定 -->
  <link rel="canonical" href="https://example.com/ja/about">
</head>
</html>

この自動生成機能により、開発者は SEO の技術的詳細を意識することなく、検索エンジンフレンドリーな多言語サイトを構築できます。

以下の図は、SEO 最適化のプロセスを示しています。

mermaidsequenceDiagram
    participant Dev as 開発者
    participant Module as i18nモジュール
    participant SEO as SEO要素
    participant Search as 検索エンジン

    Dev->>Module: 基本設定のみ
    Module->>SEO: 自動でhreflang生成
    Module->>SEO: canonical URL設定
    Module->>SEO: 言語別メタデータ
    SEO->>Search: 最適化されたHTML
    Search->>Search: 正しいインデックス化

この自動化により、検索エンジンは各言語のページを正確に理解し、適切な言語のユーザーに正しいページを表示できるようになります。

具体例

プロジェクトセットアップ

実際に @nuxtjs/i18n を使用した多言語サイトを構築してみましょう。まずは新しい Nuxt.js プロジェクトの作成から始めます。

新規プロジェクトの作成：

bash# Nuxt.js プロジェクトの作成
yarn create nuxt-app my-multilingual-site

# プロジェクトディレクトリに移動
cd my-multilingual-site

@nuxtjs/i18n モジュールのインストール：

bash# i18n モジュールのインストール
yarn add @nuxtjs/i18n

# TypeScript を使用する場合（推奨）
yarn add --dev @types/vue-i18n

インストール完了後、プロジェクトの基本構造は以下のようになります。

javascriptmy-multilingual-site/
├── assets/
├── components/
├── layouts/
├── middleware/
├── pages/
├── plugins/
├── static/
├── store/
├── locales/          // 翻訳ファイル用ディレクトリ（作成予定）
├── nuxt.config.js    // 設定ファイル
└── package.json

プロジェクトセットアップでは、翻訳ファイルを格納する locales ディレクトリも作成しておきましょう。

bash# 翻訳ファイル用ディレクトリの作成
mkdir locales

基本設定（nuxt.config.js）

次に、nuxt.config.js ファイルで @nuxtjs/i18n モジュールの基本設定を行います。この設定により、多言語機能が有効化されます。

javascript// nuxt.config.js
export default {
  // モジュールの登録
  modules: ['@nuxtjs/i18n'],

  // i18n モジュールの設定
  i18n: {
    // 対応言語の設定
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        file: 'en.json',
      },
      {
        code: 'ja',
        iso: 'ja-JP',
        name: '日本語',
        file: 'ja.json',
      },
      {
        code: 'fr',
        iso: 'fr-FR',
        name: 'Français',
        file: 'fr.json',
      },
    ],

    // デフォルト言語の設定
    defaultLocale: 'en',

    // 翻訳ファイルのディレクトリ
    langDir: 'locales/',

    // 遅延読み込みの有効化（パフォーマンス向上）
    lazy: true,
  },
};

設定項目の詳細説明：

設定項目	説明	設定例
locales	対応言語の定義	code, iso, name, file を含むオブジェクト配列
defaultLocale	デフォルト言語	'en', 'ja' など
langDir	翻訳ファイルのディレクトリ	'locales/', '~/lang/' など
lazy	遅延読み込みの有効化	true（推奨）, false

翻訳ファイルの作成

設定ファイルで指定した翻訳ファイルを作成します。各言語ごとに JSON ファイルを作成し、翻訳テキストを定義していきます。

英語版翻訳ファイル（locales/en.json）：

javascript{
  "nav": {
    "home": "Home",
    "about": "About",
    "services": "Services",
    "contact": "Contact",
    "language": "Language"
  },
  "home": {
    "title": "Welcome to Our Website",
    "subtitle": "We provide excellent services worldwide",
    "description": "Our company has been serving customers globally for over 10 years. We specialize in web development and digital marketing solutions.",
    "cta": "Get Started"
  },
  "about": {
    "title": "About Us",
    "content": "We are a team of passionate developers and designers creating amazing web experiences."
  }
}

日本語版翻訳ファイル（locales/ja.json）：

javascript{
  "nav": {
    "home": "ホーム",
    "about": "会社概要",
    "services": "サービス",
    "contact": "お問い合わせ",
    "language": "言語"
  },
  "home": {
    "title": "ウェブサイトへようこそ",
    "subtitle": "世界中で優れたサービスを提供しています",
    "description": "当社は10年以上にわたってグローバルにお客様にサービスを提供してきました。ウェブ開発とデジタルマーケティングソリューションを専門としています。",
    "cta": "始める"
  },
  "about": {
    "title": "会社概要",
    "content": "私たちは情熱的な開発者とデザイナーのチームで、素晴らしいウェブ体験を創造しています。"
  }
}

フランス語版翻訳ファイル（locales/fr.json）：

javascript{
  "nav": {
    "home": "Accueil",
    "about": "À propos",
    "services": "Services",
    "contact": "Contact",
    "language": "Langue"
  },
  "home": {
    "title": "Bienvenue sur notre site web",
    "subtitle": "Nous fournissons d'excellents services dans le monde entier",
    "description": "Notre entreprise sert des clients dans le monde entier depuis plus de 10 ans. Nous nous spécialisons dans le développement web et les solutions de marketing numérique.",
    "cta": "Commencer"
  },
  "about": {
    "title": "À propos de nous",
    "content": "Nous sommes une équipe de développeurs et designers passionnés créant des expériences web extraordinaires."
  }
}

コンポーネントでの使用方法

翻訳ファイルを作成したら、実際のコンポーネントで翻訳機能を使用してみましょう。

ヘッダーコンポーネント（components/Header.vue）：

vue<template>
  <header class="header">
    <nav class="nav">
      <!-- ロゴ -->
      <div class="logo">
        <nuxt-link :to="localePath('/')">
          MyWebsite
        </nuxt-link>
      </div>

      <!-- ナビゲーションメニュー -->
      <ul class="nav-menu">
        <li>
          <nuxt-link :to="localePath('/')">
            {{ $t('nav.home') }}
          </nuxt-link>
        </li>
        <li>
          <nuxt-link :to="localePath('/about')">
            {{ $t('nav.about') }}
          </nuxt-link>
        </li>
        <li>
          <nuxt-link :to="localePath('/services')">
            {{ $t('nav.services') }}
          </nuxt-link>
        </li>
        <li>
          <nuxt-link :to="localePath('/contact')">
            {{ $t('nav.contact') }}
          </nuxt-link>
        </li>
      </ul>

      <!-- 言語切り替えメニュー -->
      <div class="language-switcher">
        <select
          @change="switchLanguage"
          :value="$i18n.locale"
        >
          <option value="en">English</option>
          <option value="ja">日本語</option>
          <option value="fr">Français</option>
        </select>
      </div>
    </nav>
  </header>
</template>

ヘッダーコンポーネントのスクリプト部分：

vue<script>
export default {
  name: 'Header',
  methods: {
    // 言語切り替えメソッド
    switchLanguage(event) {
      const newLocale = event.target.value;

      // 現在のルートを新しい言語で取得
      const route = this.$router.resolve(
        this.localePath(this.$route.path, newLocale)
      );

      // 新しい言語のページに遷移
      this.$router.push(route.path);
    },
  },
};
</script>

ホームページコンポーネント（pages/index.vue）：

vue<template>
  <div class="home">
    <!-- ヒーローセクション -->
    <section class="hero">
      <h1 class="hero-title">
        {{ $t('home.title') }}
      </h1>
      <p class="hero-subtitle">
        {{ $t('home.subtitle') }}
      </p>
      <p class="hero-description">
        {{ $t('home.description') }}
      </p>

      <!-- CTA ボタン -->
      <nuxt-link
        :to="localePath('/contact')"
        class="cta-button"
      >
        {{ $t('home.cta') }}
      </nuxt-link>
    </section>
  </div>
</template>

<script>
export default {
  name: 'HomePage',

  // SEO 設定（各言語対応）
  head() {
    return {
      title: this.$t('home.title'),
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.$t('home.description'),
        },
      ],
    };
  },
};
</script>

動的ルート対応

@nuxtjs/i18n では、動的ルートも自動的に多言語対応されます。例えば、ブログ記事の詳細ページなどで使用されるパラメータ付きルートについて説明します。

動的ルートページ（pages/blog/_slug.vue）：

vue<template>
  <div class="blog-post">
    <article>
      <h1>{{ post.title }}</h1>
      <div class="meta">
        <span>{{ formatDate(post.date) }}</span>
        <span>{{ post.author }}</span>
      </div>
      <div class="content" v-html="post.content"></div>
    </article>

    <!-- 関連記事 -->
    <section class="related">
      <h2>{{ $t('blog.related') }}</h2>
      <div class="related-posts">
        <nuxt-link
          v-for="related in relatedPosts"
          :key="related.slug"
          :to="localePath(`/blog/${related.slug}`)"
          class="related-post"
        >
          {{ related.title }}
        </nuxt-link>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'BlogPost',

  async asyncData({ params, $content, i18n }) {
    // 現在の言語に基づいてコンテンツを取得
    const post = await $content(
      `blog/${i18n.locale}`,
      params.slug
    ).fetch();

    // 関連記事も同じ言語で取得
    const relatedPosts = await $content(
      `blog/${i18n.locale}`
    )
      .where({ slug: { $ne: params.slug } })
      .limit(3)
      .fetch();

    return {
      post,
      relatedPosts,
    };
  },

  head() {
    return {
      title: this.post.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.post.excerpt,
        },
      ],
    };
  },
};
</script>

このように実装することで、/en/blog/my-post や /ja/blog/my-post のような URL で、各言語のブログ記事に適切にアクセスできるようになります。

まとめ

実装のポイント

Nuxt.js の @nuxtjs/i18n モジュールを使用した多言語サイト構築について、重要なポイントをまとめます。

技術的なポイント：

ポイント	説明	重要度
設定の一元化	nuxt.config.js での包括的な設定	高
翻訳ファイルの構造化	階層的な JSON 構造での管理	高
遅延読み込み	lazy: true でのパフォーマンス最適化	中
SEO 設定	head() メソッドでの動的メタデータ	高
動的ルート対応	asyncData での言語別コンテンツ取得	中

開発効率化のポイント：

自動化の活用: ルーティングや SEO 要素の自動生成を最大限活用
翻訳の分離: コンポーネントからの翻訳テキスト分離でメンテナンス性向上
型安全性: TypeScript との組み合わせで翻訳キーの型チェック
開発ツール: Vue DevTools での i18n デバッグ機能活用

今後の展開

@nuxtjs/i18n を導入した多言語サイトは、さらなる機能拡張が可能です。

拡張可能な機能：

mermaidgraph TD
    A[nuxtjs i18n 基本実装] --> B[CMS 連携]
    A --> C[自動翻訳 API]
    A --> D[A/B テスト]
    A --> E[アナリティクス]

    B --> F[Contentful]
    B --> G[Strapi]
    C --> H[Google Translate API]
    C --> I[DeepL API]
    D --> J[言語別コンテンツテスト]
    E --> K[言語別パフォーマンス追跡]

将来的な改善案：