【Nuxt】i18nによる多言語化対応

はじめに

[Nuxti18n](https://i18n.nuxtjs.org/docs/getting-started) を使って、Nuxtアプリ(ssr)に多言語化機能を導入しました。

Nuxt Modulesを使って、i18n(国際化ライブラリ)を簡単に導入出来たので、その方法を紹介します。

※Nuxt i18n モジュールは[Vue i18n](https://vue-i18n.intlify.dev/)を使用しています。詳細については、Vue i18n のドキュメントを参照してください。

動作環境

Windows11
Nodejs: 20.15.1
@nuxtjs/i18n: ^8.5.1
nuxt: ^3.12.4

フォルダ構成

今回検証用アプリケーションのフォルダ構成は以下になります。

i18nフォルダを作成し、そこに言語毎の翻訳メッセージjsonファイルとi18n設定ファイルを格納しています。

.
├── .nuxt
├── i18n
│   ├── locales
│   │   ├── en.json  // 英語翻訳メッセージ
│   │   └── ja.json　// 日本語翻訳メッセージ
│   └── i18n.config.ts
├── node_modules
├── .gitignore
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.json
├── app.vue

導入方法

Nuxt module のインストール
Nuxt のモジュール機能を使って、i18n をインストールします。
```
npx nuxi@latest module add i18n
```
実行後、nuxt.config.tsに以下のコードが追加されます。
```
export default defineNuxtConfig({
  ...
  modules: ['@nuxtjs/i18n']  // 追加
})
```

localeファイルの作成

各localeの翻訳メッセージをjsonファイルに記述します。今回は日本語と英語の翻訳メッセージを追加します。

＜作成するファイル＞

./i18n/locales/en.json
./i18n/locales/ja.json

// ./i18n/locales/en.json
{
  "hello": "hello",
  "errMsg": {
    "required": "This field is required"
  }
}

// ./i18n/locales/ja.json
{
  "hello": "こんにちは",
  "errMsg": {
    "required": "このフィールドは必須です"
  }
}

設定ファイルの作成
プロジェクト直下にi18n.config.tsを作成し、i18nに関する設定を記述します。
```
// i18n.config.ts
import en from "./locales/en.json"
import ja from "./locales/ja.json"

export default defineI18nConfig(() => ({
 legacy: false,
 locale: 'ja',
 fallbackLocale: 'ja',
 messages: {
   en: en,
   ja: ja,
 }
}))
```
- locale: デフォルトの言語を指定
- fallbackLocale: 指定された言語が利用できない場合に使用される代替言語を指定。指定された翻訳キー(jaやenなど)が存在しない場合、fallbackLocaleで指定された言語（ここでは日本語）が使用されます。
- messages: 各localeの翻訳メッセージを指定。ここで定義された翻訳キー名を使って表示言語を切り替えます。

nuxt.config.tsの更新

作成した設定ファイルをNuxtアプリケーションで読み込めるよう以下内容をnuxt.config.tsに追記します。

export default defineNuxtConfig({
 ...
 modules: ['@nuxtjs/i18n'],
 i18n: {
   vueI18n: "./i18n/i18n.config.ts",  // 上記設定ファイルのpathを記述
 },
})

※vscodeで`nuxt.config.ts`の`i18n`の箇所で以下エラーが発生する場合は、npm installを実行して、.nuxtフォルダを更新しましょう

＜エラー内容＞

オブジェクト リテラルは既知のプロパティのみ指定できます。'i18n' は型 'InputConfig<NuxtConfig, ConfigLayerMeta>' に存在しません。

動作確認
プロジェクトフォルダ直下にあるapp.vueを修正して、動作確認してみます。
「言語切り替え」ボタンをクリックすることで、文言の言語が変更されることを確認できます。
- useI18n()を通じて、i18nライブラリの機能を使います。
- template内で使う場合は、`$t`を使うと翻訳メッセージにアクセスできます。
- script内では、t関数を使うと翻訳メッセージを取得できます
```
// app.vue
<script setup lang="ts">
const { setLocale, locale, t } = useI18n()

const changeLang = () => {
  if (locale.value === "en") {
    setLocale("ja")
  }
  else {
    setLocale("en")
  }
}
</script>

<template>
  <div>
    <h1>{{ $t("hello") }}</h1>
    <h2>エラーメッセージ：{{ $t("errMsg.required") }}</h2>
    <p>現在の言語：{{ locale }}</p>
    <button @click="changeLang">
      言語切り替え
    </button>
  </div>
 </template>
```
＜切り替え前(日本語)＞

＜切り替え後(英語)＞

まとめ

今回の手順を通じて、Nuxt 3 における i18n モジュールを使用した多言語化対応の基本的な設定方法を紹介しました。

i18n モジュールを活用することで、複数の言語を簡単にサポートし、グローバルなユーザーに対して対応できるアプリケーションを作成することができます。

useI18n() や $t を使用することで、翻訳メッセージの取得や言語切り替えが容易になり、ボタン一つで言語を切り替えることが可能です。

Nuxt i18nを使えば簡単に多言語化対応できたのでぜひ使ってみてください!