Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Intlのここ数年とこれから
Search
Saji
September 11, 2026
Technology
34
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Intlのここ数年とこれから
#tpac_study
-
https://cybozu.connpass.com/event/402843/
X
-
https://twitter.com/sajikix
Saji
September 11, 2026
More Decks by Saji
See All by Saji
本当はややこしい日時のFormatPattern
sajikix
0
410
tpac_study (2026)
sajikix
0
350
業務に残された「良くない型」で考える「TypeScriptの難しさ」
sajikix
4
8.3k
It’s “Time” to use Temporal
sajikix
3
720
ユーザーが作成したコードをブラウザ上で安全に実行できる Plugin システムへのアプローチ
sajikix
1
870
Branded Typesで日時の複雑さと戦う
sajikix
4
1.2k
推しProposalと広がる夢~Intl.MessageFormatとDomLocalization~
sajikix
2
830
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
380
Lookback TypeScript ESM support and what should we do now.
sajikix
5
840
Other Decks in Technology
See All in Technology
#jawssonic2026 あの時代が悪かった ~動かなかったSageMakerと共に迎えたイベント当日~
ktkn1129
0
150
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
lycorptech_jp
PRO
1
280
OpenTelemetryのメトリクスをCloudWatchに送ってPromQLで見てみた
ota1022
0
130
コーディングエージェントでM5Stack系の開発を少し試した時の話 / M5 Japan Tour 2026 Autumn 東京
you
PRO
0
180
Sigmaで作る業務アプリ
kazushiro_honma
0
120
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
12k
アプリをもっと"iOSアプリっぽく"する小さな工夫 / Small Touches That Make Your App Feel More Like an iOS App
matsuji
1
680
Multica × 長期記憶:40個のミニプロジェクト管理
eiei114
1
260
Adaptive Warehouse を今すぐ導入すべき理由と迷ったときの判断基準
__allllllllez__
0
200
GoCon2026 - Open Source, Open World
sanposhiho
4
3.4k
AI活用の現在地、 ちゃんと見えてますか?/XPfest-2026
visional_engineering_and_design
0
210
生成AIのテナント制御とシャドーMCP対策 | AIを"止めずに"、情報を守る
yukun
0
160
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.6k
Done Done
chrislema
186
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.4k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
820
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
57k
Site-Speed That Sticks
csswizardry
13
1.5k
Product Roadmaps are Hard
iamctodd
55
13k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
490
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
WENDY [Excerpt]
tessaabrams
13
39k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Transcript
# 替え玉.web Intlのここ数年とこれから Ryusei Sajiki / @sajikix
𝕏 Saji / Ryusei Sajiki Frontend Developer at Cybozu, inc.
@sajikix
遡ること3年前
JSConfJP 2023のセッションにて ※ちなみに初カンファレンス登壇
替え玉って ?
ここ数年 Intlの今までとこれから Ryusei Sajiki / @sajikix
ここから2023年までの 振り返りパート ※かなり早く進むので注意
1. Intlとは
もうちょっと具体的に JavaScriptの国際化APIの名前空間(Intl.〇〇) 以下のように言語に依存した機能を提供する • 日時・数値のフォーマット • ロケールの解決 • 言語に依存した文字列の比較 •
テキスト区切り・複数形の判別
Intlの仕様的な位置付け JavaScriptの仕様であるECMA-262の「拡張仕様」という位置付け。 ECMA-262とは区別してECMA-402という仕様番号がついている。 Proposalの管理や会議にも分けて進められている ECMA262 ECMA402 (Intl) 自分たちがJavaScriptの仕様と捉えているもの
IntlのAPI概要 Intlは2つのメソッドと9つのコンストラクタプロパティを持っている • メソッドは補助的なものでメインの機能はコンストラクタプロパティ経由 よく使うコンストラクタプロパティ • ✨Intl.DateTimeFormat() • ✨Intl.NumberFormat() •
Intl.RelativeTimeFormat() / Intl.Segmenter() / Intl.PluralRules()
IntlのAPI概要 全てのコンストラクタプロパティはlocaleとOptionの2つを引数に取る • Locale : 使用するlocale。言語タグかLocaleオブジェクトで指定。 • 例 : “ja-JP”,
“en-US” • Option : formatなどにおけるオプション。 • 例 : {calender : "japanese"} (使用する暦を和暦にする) コンストラクタを初期化する際にロケールとフォーマットなどのオプションを指 定するのがポイント
他にもあるIntlの便利な機能 Intl.RelativeTimeFormat() • 「明日」や「おととい」のような相対的な日時表記の国際化を行う Intl.Segmenter() • 文字・単語・文ごとの分ち書きを行う Intl.PluralRules() • 言語ごとの複数形ルール分類や序数(1st,2nd…)を返す
2. Intl策定までの歴史
18th meeting of TC39 (2010/9) GoogleのNebojša Ćirić氏とJungshik Shin氏によって提案された
初版完成までの道のり 2010/09 Intlの元となる提案がTC39のMeetingでされる 2010/11 最初の国際化API Meetingが開催 2011/01 Strawman proposal v0.5が公開
第2~5回の国際化Meeting (名前空間の統一・機能の削減・周辺仕様との調整 ..etc) 2011/07 2012年6月での仕様策定を目指すことになる 2011/10 最初のDraft Spec (この辺りである程度仕様を固める) Draft Specの改善作業・実装作業 (名前空間の名前変更・APIの修正 ..etc) fi 2012/08 最後のDraft Speci cation
そして2012年12月
1st Edition 公開!🎉
3. Intlのこれまでの進化
🎉 2016年、初版で提案された API群が一通り使えるように!
1st Edition ~ 2023までの機能追加 + Intl.getCanonicalLocales() + formatRange() + Intl.ListFormat
+ DateTimeFormat option + Intl.Segmenter + NumberFormat option(v3) + Intl.DisplayNames … and more + Intl.PluralRules + Intl.RelativeTimeFormat + Intl.Locale + formatToParts()
4. Intlに関連する仕様たち
Intlとの関連仕様 : 全体像 ISO IETF (通貨コード) BCP47 Intl LDML/ CLDR
IANA (Timezone) Unicode
ここまでが2023年
3年経ってどうなった?
2023年当時の「これから」
2023年当時の「これから」
3年後の答え合わせ • Intl Local Info API(Stage3) → ES2026で採用 🎉 •
Intl.DurationFormat(Stage3) → ES2025で採用 🎉 • Temporal → ES2026のカットオフこそ逃したがES2027で入る 🎉 • Intl.MessageFormat(Stage1) → Intlはまだ / CLDRでは固まりつつある • Intl.Segmenter → もう少しでBaseline Widely Available になる
Intl Locale Info Intl.Localeで取得できるロケール情報が増えた! • getWeekInfo : 週の情報(週始まり、週末の曜日、年の最初の週に必要な最小日数)を返す • getTextInfo
: テキストの方向情報を返す • getCalendars : 一般的に使用されるすべての暦を、優先度の高い順に返す • getCollations : 文字の称号順序規則を返す • getHourCycles : 24時制 / 12時制どちらかなとを返す • getNumberingSystem : 一般的に使用されるすべての記数法を、優先度の高い順に返す • getTimeZones : 対応しているタイムゾーンを返す
Intl.DurationFormat 時間の間隔表記をフォーマットできるようになった • 例) 1時間30分 / 1 hour 30 minutes
new Intl.DurationFormat("fr-FR", { style: "long", }).format({ hours: 1, minutes: 46, seconds: 40, }); // => "1 heure, 46 minutes et 40 secondes"
Temporal みなさんご存知(?)JSの新しい日時操作の組み込みAPI • Dateのつらみを解消する新しい設計 + タイムゾーンと暦サポート 詳しくはぜひ temporal̲studyの資料をみてください
TemporalとECMA402 Temporalのうち以下の部分はECMA402側の仕様 • 非ISO( 非グレゴリオ)な暦のサポート • 時代・月コードの標準化 • 日時の書式化(Intl.DateTimeFormat連携) 外からmeetingNoteを追ってる人の感想として
• ここ数年で一番骨の折れる作業だったのでは?(ハイライトとも言えそう)
Intl.MessageFormat Proposal ICU MessageFormatを解釈し、フォーマットする機能の提案(推しProposal) • JS側(=Intl)としてはstage1のまま • が、Unicode側のMessageFormat v2の仕様はほぼ固まってきてる •
CLDR-TC側でコア仕様は策定し、CLDR47でStableへ • 今後の進捗が楽しみですね! • c.f. Intl.MessageFormat 基礎 / MessageFormat v2 の記法をみてみよう
Intl.Segmenter 文字列を文 / 単語 / 書記素で分割できる。 • 特に「書記素単位分割」が便利 • JSで「1文字」を判定するのはかなり面倒(異体字セレクタ
/ 結合文字/ZWJ) • Segmenterがあればいわゆる「1文字」ごとの分割が可能に 実はFireFoxの実装が遅れてv125(2024/04)でshipした → そろそろWidelyAvailableになる(=30ヶ月経つ)のでプロダクトでも使えそう
2026年から見たこれから
注目Topic この3年間で新しく生まれたり、今議論されてるテーマで注目してるもの • 数と単位への強化 • 書式が変わってしまう問題とStableFormatting • W3Cとの連携強化 / HTML側との協調・Overwrap
• MessageFormatはどうなるのか
数と単位への強化 数値や単位にまつわる提案が多くされ検討されている • 数値・単位・精度をもつオブジェクトとして Amount が提案されてる • データ保持と基本的な変換をサポート & NumberFormatとの連携
• 複合単位(3m50cmみたいなやつ)に関するFormatの検討 • NumberFormatやPluralRulesで末尾ゼロの保持・考慮をする • 内部処理で使われる数値のデータの有効桁数制限引き上げ
書式が変わってしまう問題とStableFormatting 問題点 : 元データのCLDR更新やブラウザ・OSの更新により結果が変化する • → テストや自動処理で困る → 不適切なハックが横行してる 「言語文化に依存しないフォーマット固定ロケール」のようなものが欲しい
• → 紆余曲折(null説/"und"説)がありつつ、"zxx" & Intl.STABLE 定数へ これでテストやデータシリアライズなどでも安定してFormatが使える • 現在Stage2の提案
W3Cとの連携 / HTML側との協調・overwrap 標準化プロセスで「W3C i18nレビュー」を義務化した • 提案をStage 3(または主要ステップ)へ進展させるための要件 HTMLの要素との連携 •
<amount>要素とAmount / <time>要素でのローカライズ MessageFormatで書かれたメッセージの管理 • Message Resources という名前でW3Cで検討を始めている
MessageFormatはどうなるのか JSRuntime側で構文パーサ(DSL)を持つのかが継続的に議論されている • 現在はユーザーのニーズ調査やICU側での実装を待ってる段階 Message ResourcesとDOM Localization • Web標準としてMessageFormatを扱いやすいようにする提案がされている MessageFormatで導入されたSemanticSkeltonという形式
• <time>要素のローカライズで使われる可能性がある
まとめ • Intlの仕様が公開されて14年、いろいろな機能が追加・実装されてきた • ここ3年でも複数のProposalがStage4になったりしている • 特にTemporal周りの仕様策定はここ数年のハイライトかもしれない • 最近は単なる書式化ではなくデータの扱いや他の仕様との連携を議論しがち •
国際化における各要素の扱い方がIntlとしてさらに整備されていきそう • まだまだ新機能・新仕様(=替え玉)が待ちきれない!
宣伝 Intlを含めたweb標準の「今」がわかる連載があるらしい… • 「Web 標準動向」で検索してね!
替え玉も ごちそうさまでした! Ryusei Sajiki / @sajikix