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
51
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
420
tpac_study (2026)
sajikix
0
370
業務に残された「良くない型」で考える「TypeScriptの難しさ」
sajikix
4
8.8k
It’s “Time” to use Temporal
sajikix
3
760
ユーザーが作成したコードをブラウザ上で安全に実行できる Plugin システムへのアプローチ
sajikix
1
890
Branded Typesで日時の複雑さと戦う
sajikix
4
1.3k
推しProposalと広がる夢~Intl.MessageFormatとDomLocalization~
sajikix
2
850
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
390
Lookback TypeScript ESM support and what should we do now.
sajikix
5
850
Other Decks in Technology
See All in Technology
メルカリにおけるAI時代の高速プロトタイピング基盤「Arca」
ryotarai
18
14k
HolmesGPTで始めるSREエージェント入門!プラットフォームの障害調査はAIにお任せ 〜
leveragestech
PRO
0
130
Oracle Cloud Infrastructure(OCI):Onboarding Session(はじめてのOCI/Oracle Supportご利⽤ガイド)
oracle4engineer
PRO
3
21k
【データ横丁主催】AI Agentがコンテキストを使って仕事をした後、何が残るのか― 組織の経験を次の判断に引き継ぐ「Agent Memory」
shisyu_gaku
2
320
データ品質を壊しながらSnowflakeのAIに分析させてみた
kawanago
0
370
[2026 Oracle Technical Deep Dive] AI時代のデータベース基盤をどう選ぶ? Exadata Database Serviceの選択肢と使い分け (2026年9月17日開催)
oracle4engineer
PRO
0
180
SQL Server 2025 最適化されたロック
odashinsuke
0
120
並行性の問題を防げ!実践トランザクション入門
occhi
0
150
Swap and Memory Reclaim - Squeezing Out More RAM
ennael
PRO
1
1.5k
インバスケット試験対策アプリを 作って見えたAIエージェント構築 ナレッジ2選
shichijoyuhi
1
110
個別開発で終わらせない。 現場の課題をプロダクトの強さに変える StockmarkのFDE
ktkrhr
0
530
2026-09-26 Platform Engineering Kaigi 2026 インフラとアプリの境界線と委譲の設計 / Drawing the Infra and App Line
masasuzu
0
570
Featured
See All Featured
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
5
750
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.2k
Leo the Paperboy
mayatellez
10
2.3k
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
420
Become a Pro
speakerdeck
PRO
31
6.3k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.3k
The Language of Interfaces
destraynor
162
27k
Why You Should Never Use an ORM
jnunemaker
PRO
61
10k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
3
3.8k
Information Architects: The Missing Link in Design Systems
soysaucechin
1
1.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
50
10k
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