# 国際化 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
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ

関連記事

Javascript var let const 変数宣言の違い
Cookie localStorage sessionStorage の違い
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 日本語 shift-js 対応 CSV ダウンロード