Edited at

Nuxt.jsで多言語化デビューしよう!


はじめに

こちらはサポーターズCoLabの勉強会で使用した説明資料です。

2019年04月末日

再度サポーターズCoLabの勉強会で使用するため、一部変更を加えました。



この記事に書いてあること


  • Vue.jsを構築するためのフレームワークであるNuxt.jsのインストール


  • vue-i18nのインストールと設定

  • 日本語と英語の切替ができる超簡易Webページの作成



この記事で省いていること


  • 記事内で使用している技術およびコードの説明



環境


  • 端末


    • Mac OS X 10.14.3



  • インストール済みのライブラリ





Nuxt.jsのインストール

公式ページのインストール手順に沿って行っていきます。

今回は簡単に行うため、npmライブラリのnpxを使用します。



npm(Node Package Manager)のバージョンの確認


shell

npm -v 


5.2.0 以上が表示されていればOKです。



Nuxtプロジェクトの作成


shell

npx create-nuxt-app ColabApp


ColabAppの部分はホームページタイトルやフォルダ名に設定されます。

自身で管理しやすい名称を設定してください。



サイト名の入力

? Project name (ColabApp)

()の中身から変更しない場合はそのままEnterキーを押下しましょう。



サイト詳細の入力

? Project description (My grand Nuxt.js project)

()の中身から変更しない場合はそのままEnterキーを押下しましょう。



サーバーフレームワークの選択

? Use a custom server framework (Use arrow keys)

❯ none
express
koa
adonis
hapi
feathers
micro
(Move up and down to reveal more choices)

今回はNuxt.jsを使用するためnoneを選択し、Enterキーを押下します。



追加機能の選択

? Choose features to install (Press <space> to select, <a> to

toggle all, <i> to invert selection)
❯◯ Progressive Web App (PWA) Support
◯ Linter / Formatter
◯ Prettier
◯ Axios

必要な機能を複数選択することが可能です。

今回は何も使用しないため、そのままEnterキーを押下します。


各機能をざっくり説明しておきます。



  • Progressive Web App (PWA) Support




  • Linter / Formatter


    • ソースコードの構文チェックを行うツール

    • JavaScriptだとESLintJSLintが有名です。




  • Prettier


    • ソースコードを整形するツール

    • 規定に従って強制的にソースコードを整形するため、チーム開発で導入すると恩恵を受けられます。




  • Axios


    • HTTP通信ができるJavaScriptライブラリ

    • JSONの取得に利用されることが多いです。





UIフレームワークの選択

? Use a custom UI framework

none
bootstrap
vuetify
❯ bulma
tailwind
element-ui
buefy

このときにnoneを選んだ場合でも、あとからUIフレームワークを追加することは可能です。

今回はblumaを選択します。


各詳細については公式ページをご確認ください。



テスティングフレームワークの選択

? Use a custom test framework (Use arrow keys)

❯ none
jest
ava

今回はテストまでは行わないため、noneを選択します。


それぞれの詳細については公式ページをご確認ください。



Nuxtのモードの選択

? Choose rendering mode

❯ Universal
Single Page App

今回はUniversalを選択します。


各モードについてざっくり説明します。



  • Universal


    • クライアントもサーバーサイドもNuxtで開発をする際に使用




  • Single Page App


    • クライアントサイドのみの開発をする際に使用





著者名の選択

? Author name (yourgithubname)

PCにGithubのアカウント設定がされていると自動的にアカウント名が表示されます。

今回はそのままEnterキーを押下します。



パッケージマネージャの選択

? Choose a package manager (Use arrow keys)

❯ npm
yarn

処理速度やコマンドの簡単さで比較される両者ですが、今回はnpmを選択します。


各詳細については公式ページをご確認ください。



インストール待機

ここまで設定を行うとインストールが開始されます。

起動するまでしばらく待ちます。



Nuxt.js の起動


shell

To get started:

cd ColabApp
npm run dev

To build & start for production:

cd ColabApp
npm run build
npm start


インストールが完了すると、上記の内容がターミナル上に表示されます。



ディレクトリの移動


shell

cd ColabApp




npmでNuxt.jsを起動


shell

npm run dev




ブラウザでの表示確認


╭─────────────────────────────────────────────╮
│ │
│ Nuxt.js v2.6.2 │
│ Running in development mode (universal) │
│ Memory usage: 164 MB (RSS: 287 MB) │
│ │
│ Listening on: http://localhost:3000 │
│ │
╰─────────────────────────────────────────────╯

上記がターミナル上に表示されていれば、無事に起動成功です。

ブラウザからhttp://localhost:3000 へアクセスすると、下記のようなページが確認できます。



vue-i18nのインストール

公式ドキュメントに沿って進めていきます。

ライブラリのインストールを行うため、Ctrl + Cのキーを押下し、開発環境を一度止めます。



npmを使ってインストール


shell

npm install vue-i18n --save


インストールが成功すると、下記が表示されます。

+ vue-i18n@8.10.0

added 1 package from 1 contributor and audited 13865 packages in 19.139s
found 0 vulnerabilities



多言語化の設定

Webページで多言語の設定が反映されるように各ファイルの作成や修正を行います。



翻訳ファイルの管理フォルダを作成

フォルダ名は自由ですが、今回は ‌locales ファイルを作成します。



翻訳ファイルを作成

localesフォルダに各言語のJSONファイルを作ります。

今回は英語用にlocales/en.jsonと日本語用にlocales/ja.jsonを作成します。



英語翻訳ファイルの作成


en.json

{

"links": {
"home": "Home",
"about": "About",
"en": "English",
"ja": "Japanese"
},
"home": {
"title": "Hello,World!",
"introduction": "This is an introduction in English."
}
}



日本語翻訳ファイルを作成


ja.json

{

"links": {
"home": "ほーむ",
"about": "あばうと",
"en": "えいご",
"ja": "にほんご"
},
"home": {
"title": "やぁ、世界!",
"introduction": "このページは日本語で設定されています"
}
}



翻訳ファイル作成の注意点

各言語でJSONの構造があっていないと、Webページ上で翻訳が表示されません。



vue-i18nライブラリの設定

vue-i18nライブラリの設定を行っていきます。



vue-i18n用のファイルを作成

pluginsフォルダ直下にi18n.jsファイルを作成します。



plugins/i18n.jsの作成


plugins/i18n.js

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({ app, store }) => {
app.i18n = new VueI18n({
locale: store.state.locale,
fallbackLocale: 'ja',
messages: {
'ja': require('~/locales/ja.json'),
'en': require('~/locales/en.json')
}
})

app.i18n.path = (link) => {
if (app.i18n.locale === app.i18n.fallbackLocale) {
return `/${link}`
}
return `/${app.i18n.locale}/${link}`
}
}




pluginsについて

pluginsについては公式ドキュメントをご確認ください。



ページ表示ごとに言語を設定

ページの表示毎に現在の言語を設定できるようにしていきます。



ファイルの作成

middlewareフォルダにi18n.jsファイルを作成します。



middleware/i18n.jsの作成


middleware/i18n.js

export default function ({ isHMR, app, store, route, params, error, redirect }) {

const defaultLocale = app.i18n.fallbackLocale
// If middleware is called from hot module replacement, ignore it
if (isHMR) return
// Get locale from params
const locale = params.lang || defaultLocale
if (store.state.locales.indexOf(locale) === -1) {
return error({ message: 'This page could not be found.', statusCode: 404 })
}
// Set locale
store.commit('SET_LANG', locale)
app.i18n.locale = store.state.locale
// If route is /<defaultLocale>/... -> redirect to /...
if (locale === defaultLocale && route.fullPath.indexOf('/' + defaultLocale) === 0) {
const toReplace = '^/' + defaultLocale + (route.fullPath.indexOf('/' + defaultLocale + '/') === 0 ? '/' : '')
const re = new RegExp(toReplace)
return redirect(
route.fullPath.replace(re, '/')
)
}
}



middlewareについて

middlewareについては公式ドキュメントをご確認ください。



Vuexストアを設定

Vuexストアに言語設定を行い、各ページで利用できるように設定します。



ファイルの作成

storeフォルダにindex.jsファイルを作成します。



store/index.jsの作成


store/index.js

export const state = () => ({

locales: ['en', 'ja'],
locale: 'ja'
})

export const mutations = {
SET_LANG(state, locale) {
if (state.locales.indexOf(locale) !== -1) {
state.locale = locale
}
}
}




storeについて

storeについては公式ドキュメントをご確認ください。



Nuxt.js のカスタム設定

nuxt.config.js にプラグインとライブラリの設定をします。



nuxt.config.jsに追記

nuxt.config.jsに追記します。


nuxt.config.js

/*

他の要素を省略
*/

plugins: [
'~/plugins/i18n.js' //追加
],
//ここからを追加
vendor: [
'vue-i18n'
],
router: {
middleware: 'i18n'
},
generate: {
routes: ['/', '/about', '/en', '/en/about']
} ,
//ここまでを追加
/*
他の要素を省略
*/




nuxt.config.jsについて

nuxt.config.jsの設定については公式ドキュメントをご確認ください。


以上で多言語化の設定は完了です🎉



index.vueファイルの編集

Webページに表示するため、*.vueファイルを編集していきます。



ディレクトリの作成

pages以下に_langフォルダを作成します。

Nuxt.jsでは pages以下のディレクトリ構造がそのままURLのパス( http://domain/ファイル名 )に対応します。

_をつけるとURLのパスから除外することができ、任意の文字列を埋め込むことが可能です。

今回は、_langの部分に「en」を埋め込み、http://domain/enという形のURLにします。



index.vueファイルを_lang以下にコピー

pages/index.vueファイルをコピーし、pages/_lang/index.vueを貼り付けます。

多言語化を行う上で、この工程は必須ではありません。

今回は作業の効率化するために行っています。



pages/index.vueの編集


pages/index.vue

<script>

import Index from '~/pages/_lang/index'
export default Index
</script>

今回はhttp://localhost:3000/ にアクセスした際にpages/_lang/index.vueを参照するように変更しました。



npmでNuxt.jsを起動(再掲)


shell

npm run dev


ここからは開発環境を起動しながら進めていきます。



pages/_lang/index.vueファイルの編集


pages/_lang/index.vue

<template>

<section class="container">
<div>
<logo/>
<h1 class="title">
{{ $t('home.title') }} //編集前:ColabApp
</h1>
<h2 class="subtitle">
{{ $t('home.introduction') }} //編集前:My grand Nuxt.js project
</h2>
<div class="links">
<a
href="https://nuxtjs.org/"
target="_blank"
class="button--green">Documentation</a>
<a
href="https://github.com/nuxt/nuxt.js"
target="_blank"
class="button--grey">GitHub</a>
</div>
</div>
</section>
</template>
/*他の要素は省略*/

翻訳テキストで設定したJSONを指定します。



AppHeader.vueファイルの作成

言語切替を行うためのコンポーネントcomponents/AppHeader.vueを作成します。



components/AppHeader.vueの作成


components/AppHeader.vue

<template>

<header class="Header">
<div class="links">
<NuxtLink :to="$i18n.path('')">
{{ $t('links.home') }}
</NuxtLink>
<NuxtLink v-if="$i18n.locale === 'ja'" :to="`/en` + $route.fullPath">
{{ $t('links.en') }}
</NuxtLink>
<NuxtLink v-else :to="$route.fullPath.replace(/^\/[^\/]+/, '')">
{{ $t('links.ja') }}
</NuxtLink>
</div>
</header>
</template>
<script>
export default {

}
</script>
<style scoped>
</style>


今回は日本語表示のときは英語の切替、英語表示のときは日本語切替を表示する処理を入れています。



レイアウトファイルの編集

‌components/AppHeader.vueがすべてのページで表示されるように設定します。



layouts/default.vueファイルを編集


layouts/default.vue

<template>

<div>
<AppHeader></AppHeader>/*追加*/
<nuxt />
</div>
</template>

//ここから↓
<script>
import AppHeader from '@/components/AppHeader.vue'

export default {
components: {
AppHeader
}
}
</script>
//ここまで↑を追加
<style>
</style>


layouts/default.vueでは、全ページのレイアウトを設定できます。

今回は、作成したコンポーネントAppHeader.vueをインポートし、ヘッダーとして表示できるように設定しています。



ページの確認

http://localhost:3000を確認した結果、日本語ページが表示されていれば設定完了です!


えいごのリンクテキストhttp://localhost:3000/enをクリックすると、設定した翻訳テキストが表示されます。


以上で設定完了です。

ここまでお付き合い頂き、ありがとうございました😀



追加演習

pages/_lang/about.vueファイルを追加し、ページを表示してみましょう


やること



  • en.jsonja.jsonaboutページで使用するための文言を設定


  • AppHeader.vueにリAboutページへのリンクを追加


  • pages/about.vueページの作成と記述


  • pages/_lang/about.vueの作成と記述



回答例



参考ページ