Help us understand the problem. What is going on with this article?

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

はじめに

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

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

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


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

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

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

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

環境

  • 端末
    • Mac OS X 10.15.4
  • インストール済みのライブラリ

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を選択します。

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


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を選んだ場合でも、あとから追加可能です。


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


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

? 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

  • 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キーを押下します。
このときに必要な機能を複数選択すること、あとから追加することも可能です。


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


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

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

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


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


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

? 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キーを押下します。

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


インストール待機

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


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 へアクセスすると、下記のようなページが確認できます。

localhost_3000_01.png


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で設定した日本語が表示されています。

localhost_3000_02.png


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に設定した日本語とヘッダーにリンクが表示されていれば設定完了です!

localhost_3000_03.png


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

localhost_3000_04.png


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


追加演習

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

やること

  • en.jsonja.jsonaboutページで使用するための文言を設定
  • 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)


参考ページ


matsumana07384
フロントエンド/UIUX/サービスデザイン/ソフトウェアテストなどいろんなことに興味がある雑食エンジニアです。 ※こちらに投稿する記事は個人の意見であり所属団体とは関係ありません。
zozotech
70億人のファッションを技術の力で変えていく
https://tech.zozo.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした