Webpackでi18n国際化(locale)のシンプルな方法
November 07, 2017

DEVELOPMENT

web
js
webpack

webサイトを作成するにあたり、もう言語対応は外せなくなってきました。

webpackで言語対応をする際、色々と迷います。

まずはどういう形でlocale対応をしたいのかで、方法が大きく異なると思います。

今回僕は、英語版と、日本語版をそれぞれコンパイルし、静的ファイルを言語ごとに分ける対応をしてみました。

React等を使用される場合は、storeにtextを保持し、動的に言語を切り替える方法などもありますが、 なんとなくstoreにtextデータがたくさん貯まるのは重くなる気がしてなりません。

だったら使うFrameworkに左右されることなく、静的なファイルを言語毎に履き、別ページとして対応したほうがわかりやすし、シンプルだなーと思い、今回はこの方法を採用しました。

といっても、i18n webpack等で調べるとほんとにいろんなnpmが出てきます。

どれ使う?

  • i18n-webpack-plugin はい、検索すると一番上位に出てきました。wepack-pluginというくらいなんで、一番一般的?なんですかね?

とてもわかりやすそうでしたので、今回はこれを使いました。

環境

  • node v7.9.0
  • webpack 3.8.0
  • babel 6.26
  • babel-preset-es2015 6.2.4.1

導入方法

まずは、インストール

npm install --save-dev i18n-webpack-plugin

webpack.config.jsを編集

import I18nPlugin = from "i18n-webpack-plugin";
var languages = {
  "en": null,
  "ja": require("./src/locale/ja.json") // dir構造によって変えて下さい。
};

export default Object.keys(languages).map(function(language) {
  ....
  entry: {
    app: './app.js',
  },
  output: {
    path: path.join(__dirname, './public'),
    filename: '[name].' + language + '.js'
  },
  plugins: [
    new I18nPlugin(
      languages[language]
    )
  ]
  ....
  ....
}
  • まずはimportします
  • 必要な言語を定義し、default(辞書データがない場合はキー名が出力されるので、key名は大体英語だと思うのでenはnullを)
  • exportする際に、language毎にループさせる
  • filenameに言語名を入れる
  • pluginsに追加

この場合、app.en.js と、app.ja.js ファイルが作成される

辞書ファイルを用意

json形式で下記のように用意します。 src/locale/ja.json

{
  "Hello World": "こんにちは"
}

たぶんnestできなそうですが、試してません。

app中での使い方

console.log(__("Hello World"));

この場合、日本語のjaの場合、「こんにちは」と出力され、enの場合は、辞書ファイルを用意してないですが、default設定がenになりますので、key名がそのまま出力される形になります。

以上、これで言語対応ができました!

うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

🙏よかったらシェアお願いします🙏
WRITTEN BY
うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

CONACT
入力して下さい
Slack からもどうぞ

※お気軽にどうぞ!(6月20日まで有効!お早めに)

COPYRIGHT © 2020 UKAI CO., LTD. ALL RIGHTS RESERVED.