JavaScript | ES6+ 文法：その他の ES6+ 機能 – Intl API

JavaScript JavaScript
スポンサーリンク

Intl API とは何か（まずイメージから）

Intl（Internationalization）は、
「言語や国ごとのルールに合わせて、数値・通貨・日付・文字列などをキレイに表示するための標準 API 集合」 です。

例えば同じ「1234567.89」でも、

  • 日本（ja-JP）：1,234,567.89
  • ドイツ（de-DE）：1.234.567,89
  • フランス（fr-FR）：1 234 567,89

のように、区切り方や小数点の記号が変わります。

この「国ごとの違い」を、
自分で if 文や設定を書かずに、全部 JavaScript に任せられる のが Intl API です。

ここが重要です。
Intl は「見た目のフォーマットを、ユーザーのロケール（言語・地域）に合わせて自動調整してくれる標準機能」です。
ECサイト、ダッシュボード、日付表示をするアプリなら、ほぼ確実に役に立ちます。

Intl API のざっくり全体像

Intl にはいくつかのサブ API があり、それぞれ担当が決まっています。

  • Intl.NumberFormat：数値・通貨・パーセントなど
  • Intl.DateTimeFormat：日付・時刻
  • Intl.Collator：文字列の比較（ソート順）
  • Intl.ListFormat：リスト（「A、B と C」のようなつなぎ方）
  • Intl.RelativeTimeFormat：相対時間（「3日前」「2時間後」など）
  • ほかに Intl.PluralRules などもある（複数形のルール）

初心者のうちは、

  • NumberFormat（数値/通貨）
  • DateTimeFormat（日付/時刻）
  • RelativeTimeFormat（相対時間）

あたりから触るのがちょうど良いです。

Intl.NumberFormat（数値・通貨のフォーマット）

基本：数値を「ロケールに合わせて」表示する

const number = 1234567.89;

console.log(new Intl.NumberFormat("ja-JP").format(number));
// "1,234,567.89"

console.log(new Intl.NumberFormat("de-DE").format(number));
// "1.234.567,89"

console.log(new Intl.NumberFormat("en-IN").format(number));
// "12,34,567.89"（インド風の区切り）
JavaScript

new Intl.NumberFormat(ロケール, オプション) でフォーマッタを作り、
.format(数値) で文字列にします。

ロケール "ja-JP" のような書き方は、
言語-国（ja: 日本語, JP: 日本）の組み合わせです。

通貨をフォーマットする（EC サイトで超よく使う）

const price = 1234567.89;

const jpy = new Intl.NumberFormat("ja-JP", {
  style: "currency",
  currency: "JPY",
});

const usd = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

console.log(jpy.format(price)); // "￥1,234,567.89"（環境によっては"￥"で表示）
console.log(usd.format(price)); // "$1,234,567.89"
JavaScript

ポイントは次の 2 つです。

  • style: "currency"：通貨として表示
  • currency: "JPY" など：通貨の種類（ISO 通貨コード）

ここが重要です。
通貨表記は国ごとに「記号の位置」「区切り」「小数点の扱い」が違うので、
自前で書くのは地獄です。Intl.NumberFormat に任せるのが圧倒的に安全です。

小数点以下の桁数などを制御する

const n = 123.456;

const nf = new Intl.NumberFormat("ja-JP", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

console.log(nf.format(n)); // "123.46"（四捨五入）
JavaScript
  • minimumFractionDigits：最低何桁表示するか
  • maximumFractionDigits：最大何桁まで表示するか

たとえば「小数第2位まで表示、足りなければ 0 埋め」という形で使えます。

Intl.DateTimeFormat（日付・時刻のフォーマット）

基本：ロケールごとの日付表示

const date = new Date("2025-12-24T10:30:00Z");

console.log(new Intl.DateTimeFormat("ja-JP").format(date));
// 例: "2025/12/24"

console.log(new Intl.DateTimeFormat("en-US").format(date));
// 例: "12/24/2025"

console.log(new Intl.DateTimeFormat("de-DE").format(date));
// 例: "24.12.2025"
JavaScript

同じ Date オブジェクトでも、
ロケールによって「月/日/年」の順番や区切り文字が変わります。

年・月・日・時刻を細かく指定する

const date = new Date("2025-12-24T18:05:00");

const dtf = new Intl.DateTimeFormat("ja-JP", {
  year: "numeric",
  month: "long",   // "12月"
  day: "numeric",
  weekday: "short", // "水" など
  hour: "2-digit",
  minute: "2-digit",
});

console.log(dtf.format(date));
// 例: "2025年12月24日(水) 18:05"
JavaScript

よく使うオプションは次のようなものです。

  • year: “numeric”（2025） / “2-digit”（25）
  • month: “numeric”（12） / “2-digit”（12） / “short”（12月）/ “long”（12月）
  • day: “numeric” / “2-digit”
  • weekday: “short”（水） / “long”（水曜日）
  • hour, minute, second: “2-digit” / “numeric”

ここが重要です。
日付フォーマットを自前で組み立てるのではなく、
Intl.DateTimeFormat に「部品」を指定して、ロケールごとにいい感じに並べてもらう
という発想を持つと楽になります。

Intl.RelativeTimeFormat（「◯分前」「◯日後」）

「〜前」「〜後」をロケールに合わせて出す

チャットやタイムラインなどでよくある「3分前」「2時間前」表示。
これも Intl で書けます。

const rtf = new Intl.RelativeTimeFormat("ja-JP", { numeric: "auto" });

console.log(rtf.format(-3, "minute")); // "3 分前"
console.log(rtf.format(1, "day"));     // "明日"
console.log(rtf.format(-1, "day"));    // "昨日"
console.log(rtf.format(5, "day"));     // "5 日後"
JavaScript
  • 第1引数：差の数値（負→過去、正→未来）
  • 第2引数：単位 "second" | "minute" | "hour" | "day" | "month" | "year" など
  • numeric: "auto" にすると、「1 日前」を「昨日」のような自然な表現にしてくれるロケールもある

簡単な「◯分前◯時間前」を作るイメージ

例えば「今との差を見て、適切な単位で表示する」関数を作れます。

function formatRelative(date, locale = "ja-JP") {
  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
  const now = Date.now();
  const diff = date.getTime() - now; // ミリ秒差
  const diffSec = Math.round(diff / 1000);

  const absSec = Math.abs(diffSec);
  if (absSec < 60) {
    return rtf.format(Math.round(diffSec), "second");
  }

  const diffMin = Math.round(diffSec / 60);
  const absMin = Math.abs(diffMin);
  if (absMin < 60) {
    return rtf.format(diffMin, "minute");
  }

  const diffHour = Math.round(diffMin / 60);
  const absHour = Math.abs(diffHour);
  if (absHour < 24) {
    return rtf.format(diffHour, "hour");
  }

  const diffDay = Math.round(diffHour / 24);
  return rtf.format(diffDay, "day");
}

console.log(formatRelative(new Date(Date.now() - 3 * 60 * 1000))); // 3 分前
JavaScript

ここが重要です。
相対時間表示は、JS 初心者がよく「手作業で日本語を組み立てて死ぬ」ポイントなので、
RelativeTimeFormat を一度覚えておくと将来かなり得します。

そのほかの Intl API（軽く触りだけ）

Intl.Collator（文字列の比較・ソート）

「あいうえお順」「アルファベット順」に並べるとき、
ロケールごとにルールが違います。

const items = ["ä", "a", "z"];

console.log(items.sort()); // 実装によって曖昧

const collator = new Intl.Collator("de-DE"); // ドイツ語のルール
console.log(items.sort(collator.compare));   // ドイツ語の並び順でソート
JavaScript

日本語の「あ〜ん」の順や、大文字小文字の扱いなども調整できます。

Intl.ListFormat（「A, B, and C」みたいなリスト文字列）

const lf = new Intl.ListFormat("ja-JP", { style: "long", type: "conjunction" });

console.log(lf.format(["りんご", "バナナ", "みかん"]));
// "りんご、バナナとみかん"
JavaScript

英語にすると：

const lfEn = new Intl.ListFormat("en-US", { style: "long", type: "conjunction" });

console.log(lfEn.format(["apple", "banana", "orange"]));
// "apple, banana, and orange"
JavaScript

実務での使いどころと、初心者としての優先順位

どんな場面で「Intl 使うべき？」と判断するか

次のような場面が出てきたら、Intl を検討するサインです。

  • 数値や通貨を「人間が読む形」で見せたい（カンマ、小数点、通貨記号）
  • 日付を「ロケールに合わせたフォーマットで」表示したい
  • 「◯分前」「◯日前」「◯時間後」みたいな表示が欲しい
  • 多言語対応アプリ／海外ユーザーがいるサービスを作っている
  • アルファベットや日本語の並び順をロケールに合わせたい

逆に、
「内部的な計算でだけ数値を扱う」「ログに素の数字を出すだけ」なら、
Intl を使う必要はあまりありません。

初心者向け「ここまで理解しておけば十分」ライン

まずは次の 3 つが使えるようになると、かなり実用的です。

  • Intl.NumberFormat で「通貨」「小数の桁数」をキレイに整える
  • Intl.DateTimeFormat で「日付＋時刻」をロケールに合わせて表示する
  • Intl.RelativeTimeFormat で「◯分前」「◯時間前」的な表示を作る

そこから余裕があれば、

  • Intl.Collator でソート
  • Intl.ListFormat でリストの文字列化

に手を伸ばしていくと良いです。

まとめ

Intl API の本質は、
「世界中の言語・地域ごとのフォーマットルールを、JavaScript に全部任せてしまうための標準 API」
であることです。

押さえておきたいポイントをまとめると、次の通りです。

Intl.NumberFormat：数値・通貨・パーセントをロケールに合わせてフォーマットできる
Intl.DateTimeFormat：日付・時刻を「地域ごとに自然なスタイル」で表示できる
Intl.RelativeTimeFormat：「◯分前」「◯日後」などの相対時間表現を簡単に作れる
その他、文字列比較（Collator）、リストフォーマット（ListFormat）などもある
多言語対応・国際化・人間向け UI を作るときに、if 文地獄を避けるための強力な味方

まずは、小さなサンプルでいいので、

  • Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" })
  • Intl.DateTimeFormat("ja-JP", { year:"numeric", month:"long", day:"numeric" })

あたりを実際に書いてみて、

「同じ値でも、ロケールを変えると表示が変わる」

という感覚を一度味わってみてください。
その瞬間から、Intl は「知識」ではなく「使える道具」に変わっていきます。

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