# 国際化 i18n と地域化 L10N

i18n は internationalization の略で国際化の意味します。読み方は「アイ エイティーン エヌ」「あいいちはちえぬ」「あいじゅうはちえぬ」と読んだりしますが、いずれも国際化の意味で変わりがありません。

internationalization はなぜ i18n なのか?

internationalization の先頭の i と語尾の n の間に 18 文字があることは i18n の起因です。
DEC 用法使ってますが、大文字の I は数字の 1 と間違いやすいので一般的には小文字の i に、小文字の l は数字の 1 と間違いやすいので一般的には大文字の L が使用されます。
開発以外で国際化の略として一般的に使われている globalization (G11N) もあります。

国際化と地域化の手法も、母国語対応、現地語対応と呼ばれ、native language support (NLS) と略されます。

# 国際化の対象項目

一般的に国際化する際に対応する必要な項目

  • 文字コード
  • 文字の方向(左から右へ、右から左へ、左に向かって上から下へ)
  • 文言
  • フォント
  • 書式
    • 数値(小数点の文字、桁区切りの文字、区切る桁数など)
    • 日時(年月日の表記の仕方、イスラム暦/グレゴリオ暦/ユダヤ暦/和暦など使用する暦の違いなど)
  • 日時情報の時差
  • 通貨情報

既存の文字コードが UTF-8 などグローバル対応したものならやりやすいが、shift-js EUC などの場合は変換する必要があります。
日時情報の時差と通貨情報を解消するために、現地をつけるか変換をするかになります。

# クライアント側でユーザー言語取得

navigator.language でユーザーのブラウザー UI の言語取得することができます。

const lang = navigator.language;

console.log(lang);
// en

lang は、BCP 47 で定義された言語バージョンを表す文字列が格納されます。例えば、en en-US fr fr-FR es-ES などが含まれます。

iOS 10.2 以前の Safari では、国コードは en-us fr-fr のように小文字で返されます。

言語コードは統一基準がなく、同じ日本語でも ja-JP ja が存在します。

# バックエンド側でユーザー言語取得

HTTP の Accept-Language リクエストヘッダーからクライアントユーザー言語推測できます。

accept-language: en,ja;q=0.9,en-US;q=0.8,zh-CN;q=0.7,zh-TW;q=0.6,zh;q=0.5

# nuxtjs の i18n 対応

yarn add nuxt-i18n

フォント対応

.lang-ja {
  font-family: "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Hoefler Text",
    "Linux Libertine O", "Yu Mincho", sans-serif;
}
.lang-zh {
  font-family: "Noto Sans TC", "PingFang TC", "Hiragino Sans CNS",
    "Microsoft JhengHei", sans-serif;
}
<template>
  <div :class="['lang-' + $i18n.locale]">
    <transition-group name="page">
      <Header v-show="show" key="0" />
      <nuxt v-show="show" key="1" />
      <Footer v-show="show" key="2" />
    </transition-group>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
  head() {
    return {
      htmlAttrs: {
        lang: this.$i18n.locale,
      },
    };
  },
  components: {
    Header,
    Footer,
  },
};
</script>

nuxt.config.js 設定

require("dotenv").config();
import ja from "./locales/ja.json";
import zh from "./locales/zh.json";

export default {
  i18n: {
    locales: ["ja", "zh"],
    defaultLocale: "ja",
    vueI18n: {
      fallbackLocale: "ja",
      messages: {
        ja: ja,
        zh: zh,
      },
    },
  },
};
2022-02-03
  • javascript

関連記事

Javascript 非同期処理 async と await のメモ
javascript  指定場所にスムーズにスクロールする方法
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
react 強制的にレンダリングする方法
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
javascript 開発で出会った TypeError
開発時によく使うゼロ埋めパディング作業まとめ
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
javascript reduce 連想配列の合計計算覚えよう
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード
開発におけるコーディングルール・規約