JavaScript Tips | 基本・共通ユーティリティ：環境 ‐ 言語設定取得

JavaScript JavaScript
スポンサーリンク

なぜ「言語設定取得」ユーティリティが必要になるのか

業務システムを作っていると、
「日本語ユーザーには日本語で」「英語ユーザーには英語で」
といった多言語対応の話がほぼ確実に出てきます。

ここで大事なのは、
「ユーザーがどの言語を望んでいるか」を、
コードからちゃんと取得して判断できることです。

ブラウザには「言語設定」があり、
JavaScript からそれを読むことで、

デフォルトでどの言語を表示するか
どの翻訳リソースを読み込むか
日付や数値のフォーマットをどうするか

といった判断ができるようになります。
そのための小さな道具が「言語設定取得ユーティリティ」です。

ブラウザの言語設定を読む基本：navigator.language / languages

まずは一番シンプルな取得方法

ブラウザでは、navigator.language で「優先言語」を一つ取得できます。

console.log(navigator.language);
// 例: "ja", "ja-JP", "en-US", "fr-FR" など
JavaScript

また、navigator.languages には「優先順の言語リスト」が入っています。

console.log(navigator.languages);
// 例: ["ja-JP", "en-US", "en"]
JavaScript

多言語対応をちゃんとやるなら、
この二つをうまく使うのが基本になります。

言語設定取得ユーティリティの基本形

「ブラウザの言語」を安全にラップする

まずは、ブラウザの言語設定を素直にラップしたユーティリティを作ります。

function getBrowserLanguages() {
  if (typeof navigator === "undefined") {
    return {
      primary: "en",
      all: ["en"],
    };
  }

  const langs = navigator.languages && navigator.languages.length > 0
    ? navigator.languages
    : [navigator.language];

  const normalized = langs
    .filter(Boolean)
    .map((lang) => lang.toLowerCase());

  return {
    primary: normalized[0] || "en",
    all: normalized,
  };
}
JavaScript

ここでやっていることを噛み砕くとこうです。

navigator.languages があればそれを使う。なければ navigator.language を使う。
全部小文字にそろえて扱いやすくする（”ja-JP” → “ja-jp”）。
一番優先度の高いものを primary として返す。

使い方はこうなります。

const langInfo = getBrowserLanguages();

console.log(langInfo.primary); // 例: "ja-jp"
console.log(langInfo.all);     // 例: ["ja-jp", "en-us", "en"]
JavaScript

ここでの重要ポイントは、
「生の navigator をアプリ本体にばらまかない」ことです。
必ずユーティリティを経由することで、
後から仕様を変えたくなったときに楽になります。

アプリで使いやすい「言語コード」に変換する

サポートしている言語にマッピングする

実務では、「アプリがサポートしている言語」は限られています。
例えば、["ja", "en"] だけ、のようなケースです。

その場合、「ブラウザの言語設定」を
「アプリが理解できる言語コード」に変換するユーティリティがあると便利です。

const SUPPORTED_LANGS = ["ja", "en"];

function getAppLanguage() {
  const { all } = getBrowserLanguages();

  for (const lang of all) {
    const base = lang.split("-")[0]; // "ja-jp" → "ja"

    if (SUPPORTED_LANGS.includes(base)) {
      return base;
    }
  }

  return "en"; // デフォルト
}
JavaScript

ここでの深掘りポイントは、

“ja-jp” や “en-us” のような「地域付きコード」から
“ja” や “en” のような「言語コードだけ」を取り出していること。

そして、ブラウザの優先順に従って
「アプリが対応している言語の中から最初にマッチしたもの」を選んでいることです。

使い方はとてもシンプルです。

const appLang = getAppLanguage();

console.log(appLang); // "ja" または "en"
JavaScript

これで、「アプリとしてどの言語リソースを使うか」を一意に決められます。

言語設定取得をどう使うか（具体例）

例1: 翻訳リソースの選択

例えば、画面文言を messages.ja と messages.en に分けているとします。

const messages = {
  ja: {
    hello: "こんにちは",
  },
  en: {
    hello: "Hello",
  },
};

const lang = getAppLanguage();
const t = messages[lang];

console.log(t.hello);
JavaScript

ブラウザが日本語なら "こんにちは"、
英語なら "Hello" が表示されます。

ここでのポイントは、
「画面側は getAppLanguage() の結果だけを見ている」ことです。
navigator.language などの生情報は、ユーティリティの中に閉じ込めています。

例2: 日付や数値のフォーマット

Intl.DateTimeFormat や Intl.NumberFormat を使うときも、
言語設定取得ユーティリティと組み合わせるときれいに書けます。

const lang = getAppLanguage();

function formatDate(date) {
  return new Intl.DateTimeFormat(lang).format(date);
}

function formatNumber(value) {
  return new Intl.NumberFormat(lang).format(value);
}
JavaScript

これで、ブラウザの言語に応じて

日付の並び（年/月/日か、月/日/年か）
桁区切りや小数点の記号

などが自動的に変わります。

「言語設定取得」を直接あちこちでやらない理由

初心者がやりがちなのは、
画面のあちこちでこう書いてしまうことです。

if (navigator.language.startsWith("ja")) {
  // 日本語
} else {
  // 英語
}
JavaScript

これをいろんなファイルに散らばせると、

対応言語を増やしたくなったとき
判定ロジックを変えたくなったとき

に、全部探して直す必要が出てきます。

それを避けるために、

ブラウザの生情報はユーティリティで一箇所に集約する
アプリ本体は「アプリ用の言語コード」（例: “ja” / “en”）だけを見る

という構造にしておくことが、業務コードとしてとても重要です。

小さな練習で感覚をつかむ

ブラウザの開発者ツールを開いて、コンソールで次のように打ってみてください。

navigator.language
navigator.languages
JavaScript

自分の環境でどんな値が返ってくるかを実際に見てみると、
「さっきのユーティリティが何をしているのか」が一気にイメージしやすくなります。

そのうえで、自分のプロジェクト用に

getBrowserLanguages
getAppLanguage

の二段構えを用意して、
「言語が知りたくなったら必ずそこを通る」
というルールにしてみてください。

それができた瞬間、あなたのコードは
「場当たり的な多言語対応」から
「設計された言語設定取得ユーティリティ」に一段レベルアップします。

スポンサーリンク
タイトルとURLをコピーしました