ep.115 『言語だけじゃない！ 国際化対応の切り札 Intl API』

  • Davalos Alan
  • spring-raining
2022/03/18 に公開1677 views

このエピソードについて

このエントリーをはてなブックマークに追加
LINE
BlueskyShare

@spring-raining が、国際化対応のための API である Intl API や Safari 15.4 での対応状況について @AlanGDavalos に聞いてみました。

Intl API

  • Intl API について
  • 数値のフォーマット: Intl.NumberFormat
    • locale: de → 123,456.789 (数字区切りや小数点は地域によって違う)
    • style: currency/currency: USD → $123,456.79 (通貨は最小単位で丸められる)
    • numberingSystem: hanidec → 一二三,四五六.七八九
  • 時間のフォーマット: Intl.DateTimeFormat
    • format: Date#toLocaleString と同じような機能
      • もちろん令和にも対応
    • formatRange: 日時の期間を整形する
      • 言語や設定によっては勝手にいい感じに省略してくれる
    • formatToParts/formatRangeToParts: 日時を整形した上でパーツ (年、曜日など) に分割した結果を取得できる
  • 相対時間のフォーマット: Intl.RelativeTimeFormat
    • format: 現在からの相対的な時間を整形する
      • 引数に value と unit (day など) を取る
    • numeric に auto を設定すると自然な表現になる
      • format(2, 'day') → 明後日
      • format(-1, 'month') → 先月
  • Locale オブジェクトを取得: Intl.Locale
    • calendar: 暦 (gregory, japanese, buddhist)
    • collation: 照合 (文字列の並べ替え) ルール (eor, unihan, pinyin, emoji)
    • hourCycle: 時間の表記 (h12, h23, h11, h24)
    • numberingSystem: 数値の表記 (latn, jpan, jpanyear)
  • 言語、地域、通貨などのローカル表記: Intl.DisplayName
    • US → region: アメリカ合衆国
    • en-US → language: アメリカ英語 (long)/英語(米国) (short)
    • USD → currency: 米ドル
  • 文字列比較: Intl.Collator
    • テキストを辞書順に並べる場合、必ずしも文字コード上の順番がふさわしいとは限らない
    • アクセント記号などを無視して文字列が比較できる
  • 文章の区切り: Intl.Segmenter
    • 単語同士がスペースで区切られていない言語でも意味を持つかたまりで文章を分割する
    • なんとブラウザの機能だけで簡単な形態素解析ができる Array.from(new Intl.Segmenter('ja-JP', { granularity: 'word' }).segment('吾輩は猫である。'))
  • ものを列挙するときの文法: Intl.ListFormat
    • 英語では A, B, and C、日本語では A、B、C
  • 数によってルールが変わる文法: Intl.PluralRules
    • 英語: 単数 one/複数 many
    • 英語 (序数): 1 one/2 two/3 three/それ以外 other
    • アラビア語は 1、2、3〜10、11〜99、それ以上で文法が変わるらしい

Safari 15.4 で実装された Intl API の機能

Intl.Locale

  • 特定の Locale がサポートしている calendars, collations, hourCycles, numberingSystems, timeZones
  • textInfo で ltr/rtl
  • weekInfo で週に関しての情報
  • Safari 15.4 / Chrome 92 (MDN では Flag と書いてあるが 99 で Flag なしで動作を確認）

Intl.DisplayNames

  • type: calendar で各カレンダーのタイプの名前を取得 (gregory, japanese, chinese, etc)
  • type: dateTimeField で year/month/weekday/day/minute などを取得
  • languageDisplay: dialect/standard - 「イギリス英語」か「英語（イギリス）」
  • Safari 15.4, Firefox Developer 99 と Chrome 99 で動作を確認

Intl.DateTimeFormat

  • timeZoneName: shortOffset (GMT +9)/longOffset (GMT +09:00)/shortGeneric (JST)/longGeneric (日本標準時)
  • Firefox 91 / Safari 15.4 / Chrome 99 (なぜか MDN にない)

Intl.NumberFormat / Intl.PluralRules

  • 数字の Range を表す機能のはずだが実際試したら実装されていないっぽい

Refs

採用について

使用素材・クレジット

© Presented by UIT