JavaScriptでi18n対応

• 事前準備

packageにnode-translateをいれます

$ yarn add node-translate

react.js前提で、ディレクトリ構成は以下で作成

.
├── src
    └── javascripts
         └── sample.js
         └── locales
              └── locale-jp.js
              └── i18n.js

• i18nの定義ファイルを作成する

locales/locale-jp.js

export default {
  "app": {
    "sample": "サンプルだよ"
    }
  }
}

• 定義ファイルをimportしたi18nとひもづける

locales/i18n.js

import i18n from "node-translate"
import locale from './locale-jp'

i18n.requireLocales({
  'locale-jp': locale
});

export default i18n;

• こんな感じで使う。

sample.js

import React, { Component, PropTypes } from "react"
import i18n from "../../locales/i18n"

class Sample extends Component {
  render() {
    return (
      <div>
       {i18n.t('app.sample')}
      </div>
    )
  }
}