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

目次

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

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

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

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

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

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

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



どれ使う?

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

環境

導入方法

まずは、インストール

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]
    )
  ]
  ....
  ....
}

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

辞書ファイルを用意

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

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

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

app中での使い方

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

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

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

U-chan ( Nobuyuki Ukai )

学生時代は建築やデザインを専攻していたが、Yahoo!Japanにエンジニアとして運良く入社し、2年半で波情報を配信する波伝説に転職。3年後、Yahoo!時代の先輩の立ち上げたベンチャーに転職。数年後、伊豆下田に移住し、ゲストハウスを開業しながらリモートでエンジニアを続けたが、焼肉店の開業とともに株式会社UKAIを立ち上げ、法人成り。その後、カフェとゲストハウスをもう一軒開業し、現在は焼肉店、カフェ、ゲストハウス2件目を運営。今季は自社Webサイトの立ち上げ予定!

comments powered by Disqus