# 国際化 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,
      },
    },
  },
};