More than 3 years have passed since last update.

株式会社ZOZO

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

Last updated at 2020-04-12Posted at 2019-03-25

はじめに

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

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

2020年04月中旬
情報が古くなっていたので、編集時現在時点のに更新しました。

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

Vue.jsを構築するためのフレームワークであるNuxt.jsのインストール
vue-i18nのインストールと設定
日本語と英語の切替ができる超簡易Webページの作成

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

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

環境

端末
- Mac OS X 10.15.4
インストール済みのライブラリ
- node.js
  - v13.7.0
- npm
  - 6.14.2

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 excellent Nuxt.js project)

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

著者名の選択

? Author name (your github name)

PCにGithubのアカウント設定がされていると自動的にアカウント名が表示されます。
今回はそのままEnterキーを押下します。

記述言語の選択

? Choose programming language (Use arrow keys)
❯ JavaScript
  TypeScript

今回はJavaScriptを選択し、Enterキーを押下します。

型付け言語で記述したい場合はTypeScript を選択してください。

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

? Choose the package manager
  Yarn
❯ Npm

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

各パッケージマネージャーについては公式ページをご確認ください。

npm
- Github
- 公式ページ
yarn
- Github
- 公式ページ

UIフレームワークの選択

? Choose UI framework (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js

今回はNoneを選択し、Enterキーを押下します。
このときにNoneを選んだ場合でも、あとから追加可能です。

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

Ant Design Vue
- Github
- 公式ページ
Bootstrap Vue
- Github
- 公式ページ
Buefy
- Github
- 公式ページ
Element
- Github
- 公式ページ
Bulma
- Github
- 公式ページ
Framevuerk
- Github
- 公式ページ
iView
- Github
- 公式ページ
Tachyons
- Github
- 公式ページ
Tailwind CSS
- Github
- 公式ページ
Vuesax
- Github
- 公式ページ
Vuetify
- Github
- 公式ページ

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

? Choose custom server framework (Use arrow keys)
❯ None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

今回はNuxt.jsを使用するためNone (Recommended)を選択し、Enterキーを押下します。
このときにNoneを選んだ場合でも、あとから追加可能です。

Nuxt.jsの追加モジュールの選択

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv

今回はいずれも使用しないため、そのままEnterキーを押下します。
このときに必要な機能を複数選択すること、あとから追加することも可能です。

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

Axios
- 非同期通信を簡HTTP通信ができるJavaScriptライブラリ
- JSONの取得に利用されることが多い
Progressive Web App (PWA) Support
- ウェブとアプリの利点を備えたWebアプリの技術の一種であるPWAのサポート
- PWAの詳細ははじめてのプログレッシブウェブアプリを参照ください。
DotEnv
- 環境変数を定義するためのファイル
- 開発環境や本番環境など環境ごとにリポジトリ内のファイルを変更せずに実行できる

リンターツールの選択

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)　
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint

今回はESLintを使用するので、ESLintをspaceキーで選択し、Enterキーを押下します。
このときに必要な機能を複数選択すること、あとから追加することも可能です。

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

ESLint
- JavaScriptのソースコードの構文チェックを行うツール
- 詳細は公式ページ|ESLint - Pluggable JavaScript linterを参照ください。
Prettier
- ソースコードを整形するツール
- 設定した規約に従ってソースコードを自動で整形するので、チーム開発で導入すると恩恵を受けられます。
Lint staged files
- gitのコミットの時にlintチェックができるアプリ
- 詳細はGithub|okonet/lint-staged:— Run linters on git staged filesを参照ください。
StyleLint
- CSSのコードの構文チェックを行うツール
- 詳細は公式ページ|A mighty, modern style linter · stylelintを参照ください。

テストフレームワークの選択

? Choose test framework (Use arrow keys)
❯ None
  Jest
  AVA

今回はテストまでは行わないため、Noneを選択し、Enterキーを押下します。

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

JEST
- Github
- 公式ページ
AVA
- Github

レンダリングモードの選択

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR)
  Single Page App

今回はUniversal (SSR)を選択し、Enterキーを押下します。

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

Universal (SSR)
- クライアントもサーバーサイドもNuxtで開発をする際に使用
Single Page App
- クライアントサイドのみの開発をする際に使用

開発ツールを選択

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code)
 ◯ Semantic Pull Requests

今回は jsconfig.json (Recommended for VS Code) を spaceキーで選択し、Enterキーを押下します。

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

jsconfig.json (Recommended for VS Code)
- 統合開発環境の1つであるVisual Studio CodeでNuxt.jsの独自記法である @ や ~ を認識できるようファイルを生成します。
- Visual Studio Codeを使用している場合は、こちらをおすすめします。
Semantic Pull Requests
- コミット時のタイトルの付け方をチェックする機能
- 詳細は Github|zeke/semantic-pull-requests: Ensure your pull requests follow the Conventional Commits specを参照ください。

インストール待機

ここまで設定を行うとインストールが開始されます。
インストールが完了するまでしばらく待ちましょう☕

Nuxt.js の起動

shell

🎉  Successfully created project ColabApp

  To get started:

	cd ColabApp
	npm run dev

  To build & start for production:

	cd ColabApp
	npm run build
	npm run start

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

ディレクトリの移動

shell

cd ColabApp

`npm`でNuxt.jsを起動

shell

npm run dev

ブラウザでの表示確認

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.12.2                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Listening on: http://localhost:3000/

上記がターミナル上に表示されていれば、無事に起動成功です。
ブラウザからhttp://localhost:3000 へアクセスすると、下記のようなページが確認できます。

vue-i18nのインストール

公式ドキュメントに沿って進めていきます。
ライブラリのインストールを行うため、Ctrl + Cのキーを押下し、開発環境を一度止めます。

`npm`を使ってインストール

shell

npm install vue-i18n --save

上記コマンドを実行します。
インストールが成功すると、下記が表示されます。

+ vue-i18n@8.17.0
added 1 package from 1 contributor and audited 21144 packages in 33.795s

多言語化の設定

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

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

ColabApp にフォルダを作成します。
フォルダ名は自由ですが、今回は ‌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 (isHMR) { return }

  const locale = params.lang || defaultLocale
  if (!store.state.locales.includes(locale)) {
    return error({ message: 'This page could not be found.', statusCode: 404 })
  }

  store.commit('SET_LANG', locale)
  app.i18n.locale = store.state.locale

  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.includes(locale)) {
      state.locale = locale
    }
  }
}

`store`について

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

Nuxt.js のカスタム設定

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

`nuxt.config.js`に追記

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

nuxt.config.js

/*
他の要素を省略
*/
 //ここから
 router: {
  middleware: 'i18n'
  },
  plugins: [
    '~/plugins/i18n.js' //追加    '~/plugins/i18n.js' //追加
  ],
  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>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        {{ $t('home.title') }} <!-- 編集前：ColabApp -->
      </h1>
      <h2 class="subtitle">
        {{ $t('home.introduction') }} <!-- 編集前：My excellent 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>
  </div>
</template>
/*他の要素は省略*/

翻訳テキストで設定したJSONを指定します。
現時点でページにはlocales/ja.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>

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

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

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

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

layouts/default.vue

<template>
  <div>
    <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を確認し、locales/ja.jsonに設定した日本語とヘッダーにリンクが表示されていれば設定完了です！

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

以上で設定完了です。
ここまでお付き合い頂き、ありがとうございました😀

追加演習

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

やること

en.jsonとja.jsonにaboutページで使用するための文言を設定
components/AppHeader.vueにAboutページへのリンクを追加
pages/about.vueページの作成と記述
pages/_lang/about.vueの作成と記述

回答例

matsumana07384/nuxtjs-and-i18n-sample: for supporterzcolab event ( sample setting nuxt.js and i18n)

参考ページ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

はじめに

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

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

環境

Nuxt.jsのインストール

npm（Node Package Manager）のバージョンの確認

Nuxtプロジェクトの作成

サイト名の入力

サイト詳細の入力

著者名の選択

記述言語の選択

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

UIフレームワークの選択

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

Nuxt.jsの追加モジュールの選択

リンターツールの選択

テストフレームワークの選択

レンダリングモードの選択

開発ツールを選択

インストール待機

Nuxt.js の起動

ディレクトリの移動

npmでNuxt.jsを起動

ブラウザでの表示確認

vue-i18nのインストール

npmを使ってインストール

多言語化の設定

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

翻訳ファイルを作成

英語翻訳ファイルの作成

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

vue-i18nライブラリの設定

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

plugins/i18n.jsに記述

pluginsについて

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

ファイルの作成

middleware/i18n.jsに記述

middlewareについて

Vuexストアを設定

ファイルの作成

store/index.jsの作成

storeについて

Nuxt.js のカスタム設定

nuxt.config.jsに追記

nuxt.config.jsについて

index.vueファイルの編集

ディレクトリの作成

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

pages/index.vueの編集

npmでNuxt.jsを起動（再掲）

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

AppHeader.vueファイルの作成

components/AppHeader.vueへの記述

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

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

ページの確認

追加演習

やること

回答例

参考ページ

`npm`でNuxt.jsを起動

`npm`を使ってインストール

`plugins/i18n.js`に記述

`plugins`について

`middleware/i18n.js`に記述

`middleware`について

`store/index.js`の作成

`store`について

`nuxt.config.js`に追記

`nuxt.config.js`について

`index.vue`ファイルの編集

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

`pages/index.vue`の編集

`npm`でNuxt.jsを起動（再掲）

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

`AppHeader.vue`ファイルの作成

`components/AppHeader.vue`への記述

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