今回達成すること
Nuxt.jsにi18nモジュールを導入し、
完成イメージ
i18nとは?
i18nはアプリを多言語化対応するために使われるモジュールです。
このモジュールを使えば「login」の文字列を日本語の「ログイン」に簡単に翻訳できます。
「front」ディレクトリでブランチ切っとく
作業に移る前に「front」ディレクトリに移動してブランチを切ります。
root $ cd front
front $ git checkout -b 20200722_add_nuxt-i18n
front $ git branch
* 20200722_add_nuxt-i18n
front $ cd ..
nuxt-i18nをインストールする
i18nモジュールはNuxt.js用（nuxt-i18n）とVue.js用（vue-i18n）があります。
どちらもNuxt.jsに導入できますが、そもそもnuxt-i18nにはvue-i18nが統合されています。
そこで今回はNuxt.js用のnuxt-i18nをインストールします。
root $ docker-compose run --rm front yarn add nuxt-i18n
インストールを確認しておきましょう。
root $ docker-compose run --rm front yarn list --pattern nuxt-i18n
...
└─ nuxt-i18n@6.13.1
nuxt-i18nのセットアップ
nuxt-i18nのセットアップを行います。
まずはモジュールを登録しましょう。
front/nuxt.config.js
modules: [
...
// 追加
// Doc: https://www.npmjs.com/package/nuxt-i18n
'nuxt-i18n'
],
続いてグローバルオプションを設定します。
front/nuxt.config.js
// 追加
// Doc: https://nuxt-community.github.io/nuxt-i18n/basic-usage.html#nuxt-link
i18n: {
locales: ['ja', 'en'],
defaultLocale: 'ja',
// Doc: https://kazupon.github.io/vue-i18n/api/#properties
vueI18n: {
fallbackLocale: 'ja',
// silentTranslationWarn: true,
silentFallbackWarn: true,
messages: {
ja: require('./locales/ja.json'),
en: require('./locales/en.json')
}
}
},
// ここまで
build: {
}
}
-
locales: ['lang']... アプリが対応している言語を配列で指定する。 -
defaultLocale: 'lang'... アプリが使用するデフォルトの言語。 -
fallbackLocale: 'lang'...defaultLocaleで指定した言語に翻訳対象のキーがない場合に参照される言語。このことをフォールバックと言います。今回は同じ
jaを指定してるので特に意味を持ちません。 -
silentTranslationWarn: Boolean...trueの場合、i18nの警告を完全に表示しない。今は使わないのでコメントアウトしていますが、のちに使いそうなオプションは調べたときに記述しておくと便利です。
-
silentFallbackWarn: Booleanfalse(default)... フォールバック時には警告を発する。true... 翻訳のkeyが全くない場合のみ警告が発生し、フォールバック時には警告は発生しない。
-
messages... 言語とその翻訳ファイルを指定する。ここはオブジェクトで直接記入することもできます。
vueI18n: {
fallbackLocale: 'en',
messages: {
en: {
welcome: 'Welcome'
},
fr: {
welcome: 'Bienvenue'
}
}
}
localesファイルの作成
翻訳を設定するファイルを作成しましょう。
「locales」ディレクトリを作成し、その下に日本語用と英語用の2つのjsonファイルを作成します。
root $ mkdir front/locales && touch $_/{ja.json,en.json}
en.jsonに波括弧を追加する
今回は
エラーを回避するため{}だけ追記しましょう。
front/locales/en.json
{}
ja.jsonにページタイトルを追加する
英語を日本語に翻訳する
front/locales/ja.json
{
"title": {
"signup": "会員登録",
"login": "ログイン"
}
}
ja.json の書き方 ..."対象の英語(key)": "翻訳の日本語(value)"
index.vueにi18nを実装する
i18nの設定がうまくいっているか確認します。
front/pages/index.vue
<template>
<v-container fluid>
<v-card
flat
tile
color="transparent"
>
...
<!-- 追加 -->
<v-card-title>
nuxt-i18nの検証
</v-card-title>
<v-card-text>
<v-simple-table dense>
<template v-slot:default>
<thead>
<tr>
<th>en</th>
<th>ja</th>
</tr>
</thead>
<tbody>
<tr
v-for="(path, i) in ['signup', 'login']"
:key="`path-${i}`"
>
<td>{{ path }}</td>
<td>{{ $t(`title.${path}`) }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card-text>
<!-- ここまで -->
</v-card>
</v-container>
</template>
...
$t('パス')... i18nを使って翻訳する場合は$t()にjsonファイルのパスを指定する。
コンテナを起動して確認しましょう。
root $ docker-compose up
よし、うまくいきました。
確認が取れたらコンテナを削除してください。
HerokuにPushする
2020年7月23日 追記: 当初「front」ディレクトリのコミットだけでしたが、HerokuにPushするよう変更しました。
以上でi18nの導入は終了です。
「front」ディレクトリをHerokuにPushしましょう。
root $ cd front
front $ git add -A
front $ git commit -m "add_nuxt-i18n-module"
front $ git checkout master
front $ git merge 20200722_add_nuxt-i18n
front $ git push
front $ git push heroku
デプロイが完了したらHerokuを開いて本番環境の動作を確認しておきましょう。
front $ heroku open
確認が終わったら「root」ディレクトリをGitHubにPushします。
front $ cd ..
root $ git commit -am "front_add_nuxt-i18n_module"
root $ git push
まとめ
今回はnuxt-i18nモジュールを導入しました。
このモジュールを導入することで配列の値やパスを日本語変換できるので、スッキリとしたコードを書くことができます。
また、今回は触れませんでしたがブラウザの設定によって表示する言語を変えたり、言語別のパスを追加したり、かなり便利に使えます。
是非試してみてください。（そして教えてください。あわよくば）
このチャプターまとめ
以上で「Nuxt.jsフロント開発事前準備」を終わります。
このチャプターではNuxt.jsに以下を実装しました。
-
既にNuxt.jsがv2.13以上の場合は実行せず、解説内容だけお読みください
-
Nuxt.js用の翻訳モジュール「nuxt-i18n」を導入（今ここ）
これでフロント開発の事前準備が完了です。
今までテストコードばかりでしたが、次回からは実際にレイアウトを構築していきます。
次章予告
次回より新章「ログイン前のレイアウト構築」が始まります。
ログインによってレイアウトが変化する、Nuxt.jsコンポーネント設計の全体像を把握し、ウェルカムページ（トップページ）の実装を行います。
お楽しみに！