<p data-line="0" class="code-line">こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの<a href="https://x.com/sajikix" target="_blank" rel="nofollow noopener noreferrer">@sajikix</a>です。</p>
<h2 id="1-%E4%BA%BA-intl-advent-calendar-%E3%82%92%E6%9B%B8%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F" data-line="2" class="code-line">
<a class="header-anchor-link" href="#1-%E4%BA%BA-intl-advent-calendar-%E3%82%92%E6%9B%B8%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F" aria-hidden="true"></a> 1 人 Intl Advent Calendar を書きました</h2>
<p data-line="4" class="code-line">今年(2024 年)の 12 月 1 日から 25 日まで、「1 人 Intl Advent Calendar」と題して Intl に関わる技術ブログを 25 日連続で執筆しました。</p>
<p data-line="6" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f5bcef55f71c1" src="https://embed.zenn.studio/card#zenn-embedded__f5bcef55f71c1" data-content="https%3A%2F%2Fadventar.org%2Fcalendars%2F10555" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://adventar.org/calendars/10555" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://adventar.org/calendars/10555</a></p>
<p data-line="8" class="code-line">この記事ではその振り返りと個人的なおすすめの記事・読み方などを紹介します。</p>
<h3 id="%E3%81%AA%E3%82%93%E3%81%A7-intl-%E3%81%A7-1-%E4%BA%BA-advent-calendar-%E3%82%92%E6%9B%B8%E3%81%84%E3%81%9F%E3%81%AE%EF%BC%9F" data-line="10" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AA%E3%82%93%E3%81%A7-intl-%E3%81%A7-1-%E4%BA%BA-advent-calendar-%E3%82%92%E6%9B%B8%E3%81%84%E3%81%9F%E3%81%AE%EF%BC%9F" aria-hidden="true"></a> なんで <code>Intl</code> で 1 人 Advent Calendar を書いたの？</h3>
<p data-line="12" class="code-line">そもそも、<code>Intl</code> について興味を持って調べ始めたのは去年(2023 年)に遡ります。元々は社内で多言語対応と文言リソース管理の改善をしようというプロジェクトにフロントエンド刷新メンバーとして参加していて、その関連で 1on1 してた先輩に勧められて調べ始めました。</p>
<p data-line="14" class="code-line">その後、チームで担当させていただいた WEB+DB Press の連載で入門記事を書かせていただいたり、その年の JSConf JP で発表させてもらったりと、Intl に関する発信の機会について恵まれました。</p>
<p data-line="16" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ffc6d0c5b135b" src="https://embed.zenn.studio/card#zenn-embedded__ffc6d0c5b135b" data-content="https%3A%2F%2Fspeakerdeck.com%2Fsajikix%2Fintlnojin-madetokorekara" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://speakerdeck.com/sajikix/intlnojin-madetokorekara" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://speakerdeck.com/sajikix/intlnojin-madetokorekara</a></p>
<p data-line="18" class="code-line">また今年の夏にはフロントエンドカンファレンス北海道で <code>Intl.MessageFormat</code> について紹介する発表もさせていただきました。</p>
<p data-line="20" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__725a90f04154c" src="https://embed.zenn.studio/card#zenn-embedded__725a90f04154c" data-content="https%3A%2F%2Fspeakerdeck.com%2Fsajikix%2Fthe-future-of-frontend-i18n-intl-dot-messageformat" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://speakerdeck.com/sajikix/the-future-of-frontend-i18n-intl-dot-messageformat" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://speakerdeck.com/sajikix/the-future-of-frontend-i18n-intl-dot-messageformat</a></p>
<p data-line="22" class="code-line">このような中で、今年の年末近くになり仲間内で「1 人アドベントカレンダー書いてみたくない？」という話があがりました。個人的にもいつかは 1 人で書いてみたいという思いもあり、書くのであれば今まで調べていたことの総まとめとして <code>Intl</code> をテーマにしようと決めました。</p>
<h3 id="%E4%BB%8A%E5%9B%9E%E3%81%AE-advent-calendar-%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88" data-line="24" class="code-line">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%9B%9E%E3%81%AE-advent-calendar-%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88" aria-hidden="true"></a> 今回の Advent Calendar コンセプト</h3>
<p data-line="26" class="code-line">上記の通り、今回の Advent Calendar は「個人的に Intl について今まで調べたことの整理とまとめ」という側面が強いです。そのため以下のような目標・コンセプトを持って構成したつもりです。</p>
<ul data-line="28" class="code-line">
<li data-line="28" class="code-line">全部の Intl API と Proposal を網羅する</li>
<li data-line="29" class="code-line">前提となる関連仕様などもなるべく紹介する</li>
<li data-line="30" class="code-line">機能のまとまりごとに分けて記事を書いていく</li>
</ul>
<p data-line="32" class="code-line">そもそも、今ままで色々調べた Intl についての知識を自分の中で整理する意味もあるので、API や Proposal を網羅するようにしています。(もし漏れてる Proposal などあれば教えていただけると嬉しいです)。また <code>Intl</code> はどうしても他の標準仕様と関連が強く、その点が理解をする上でのハードルになりがちだと感じていたため、関連する仕様についてもなるべく紹介するような構成にしました。さらに 1 人 Advent Calendar は記事数も多く連日投稿するのでなるべく近い機能の API や Proposal をまとめたり、近い日付で置くようにしています。</p>
<p data-line="34" class="code-line">また、記事の内容については「<strong>前提知識が必要な場合はなるべく載せる</strong>」、「<strong>コード例をなるべく増やす</strong>」、「<strong>なるべく具体的なユースケースを載せる</strong>」といったことを意識しています。日時や言語の文法に関わる機能などはそもそも「国際化をしていないと実感しづらい問題」を解決しようとするものが多く、前提となる課題とそれがどう解決されるのかを意識しやすいように努めました。</p>
<h3 id="%E7%89%B9%E3%81%AB%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%81%AE%E8%A8%98%E4%BA%8B" data-line="36" class="code-line">
<a class="header-anchor-link" href="#%E7%89%B9%E3%81%AB%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%81%AE%E8%A8%98%E4%BA%8B" aria-hidden="true"></a> 特におすすめの記事</h3>
<p data-line="38" class="code-line">ここでは想定する読者層に合わせて、特におすすめの記事をいくつか紹介したいと思います。</p>
<h4 id="intl-%E3%82%92%E5%88%9D%E3%82%81%E3%81%A6%E7%9F%A5%E3%81%A3%E3%81%9F%E6%96%B9%E3%82%84-js-%E5%88%9D%E5%AD%A6%E8%80%85%E3%81%AE%E6%96%B9" data-line="40" class="code-line">
<a class="header-anchor-link" href="#intl-%E3%82%92%E5%88%9D%E3%82%81%E3%81%A6%E7%9F%A5%E3%81%A3%E3%81%9F%E6%96%B9%E3%82%84-js-%E5%88%9D%E5%AD%A6%E8%80%85%E3%81%AE%E6%96%B9" aria-hidden="true"></a> Intl を初めて知った方や JS 初学者の方</h4>
<p data-line="42" class="code-line"><code>Intl</code> について最近知ったよという方やそもそも最近 JavaScript の勉強をしているよという方は以下のような主要な機能を紹介した記事を薦めたいです。</p>
<ul data-line="44" class="code-line">
<li data-line="44" class="code-line">1 日目 : <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-01" target="_blank">Intl の全体像と基本となる IF(#1)</a>
<ul data-line="45" class="code-line">
<li data-line="45" class="code-line">Intl の全体像と基本的な使い方、共通する仕様について解説しているので、まずはこちらを読むと良いかと思います。</li>
</ul>
</li>
<li data-line="46" class="code-line">7 日目と 8 日目 : <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-07" target="_blank">Intl.DateTimeFormat の基本(#7)</a> / <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-08" target="_blank">Intl.DateTimeFormat の主要オプションを抑える(#8)</a>
<ul data-line="47" class="code-line">
<li data-line="47" class="code-line">日時のフォーマットについての記事です。日時のフォーマットは Intl での国際化の中でも一番使われる機能の 1 つなので、おすすめです。</li>
</ul>
</li>
<li data-line="48" class="code-line">13 日目と 14 日目 : <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-13" target="_blank">Intl.NumberFormat の基本(#13)</a> / <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-14" target="_blank">Intl.NumberFormat の主要オプションを抑える(#14)</a>
<ul data-line="49" class="code-line">
<li data-line="49" class="code-line">数値のフォーマットについての記事です。こちらも日時と同様に国際化の中でよく使われる機能の 1 つであり押さえておくと色々な場面で使えるのでおすすめです。</li>
</ul>
</li>
</ul>
<h4 id="intl-%E3%81%AE-api-%E3%82%92%E6%9C%9B%E6%9D%A5%E3%81%97%E3%81%9F%E3%81%84%E6%96%B9" data-line="51" class="code-line">
<a class="header-anchor-link" href="#intl-%E3%81%AE-api-%E3%82%92%E6%9C%9B%E6%9D%A5%E3%81%97%E3%81%9F%E3%81%84%E6%96%B9" aria-hidden="true"></a> Intl の API を望来したい方</h4>
<p data-line="53" class="code-line"><code>Intl</code> の API についてはなんとなく知っているけど、各機能を網羅して知りたいという方は上記の記事に加えて以下の記事を見ると網羅できます。</p>
<ul data-line="55" class="code-line">
<li data-line="55" class="code-line"><a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-05" target="_blank">Intl における 2 つの組み込みメソッド(#5)</a></li>
<li data-line="56" class="code-line"><a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-11" target="_blank">Intl.RelativeTimeFormat(#11)</a></li>
<li data-line="57" class="code-line"><a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-17" target="_blank">Intl.PluralRules(#17)</a></li>
<li data-line="58" class="code-line"><a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-18" target="_blank">Intl.ListFormat(#18)</a></li>
<li data-line="59" class="code-line"><a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-19" target="_blank">Intl.Collator(#19)</a></li>
<li data-line="60" class="code-line"><a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-20" target="_blank">Intl.Segmenter(#20)</a></li>
<li data-line="61" class="code-line"><a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-22" target="_blank">Intl.DisplayNames(#22)</a></li>
</ul>
<h4 id="%E5%91%A8%E8%BE%BA%E4%BB%95%E6%A7%98%E3%82%84%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AB%E8%88%88%E5%91%B3%E3%81%8C%E3%81%82%E3%82%8B%E6%96%B9" data-line="63" class="code-line">
<a class="header-anchor-link" href="#%E5%91%A8%E8%BE%BA%E4%BB%95%E6%A7%98%E3%82%84%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AB%E8%88%88%E5%91%B3%E3%81%8C%E3%81%82%E3%82%8B%E6%96%B9" aria-hidden="true"></a> 周辺仕様やライブラリに興味がある方</h4>
<p data-line="65" class="code-line"><code>Intl</code> の全体像については知ってるけど、細かい仕様や関連する仕様などについてはそこまで詳しくないという方には以下のような記事でより Intl について詳しくなれるかなと思っています。</p>
<ul data-line="67" class="code-line">
<li data-line="67" class="code-line">2 日目 : <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-02" target="_blank">ロケール識別子(BCP47)と Unicode 拡張について(#2)</a>
<ul data-line="68" class="code-line">
<li data-line="68" class="code-line">Intl で使われるロケール識別子についての記事です。何気なく使っている「言語タグ」への理解を深められますし、 Unicode 拡張などは Intl の文脈でよく出てきます。</li>
</ul>
</li>
<li data-line="69" class="code-line">3 日目 : <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-03" target="_blank">Intl.Locale オブジェクトと Intl Locale Info proposal(#3))</a>
<ul data-line="70" class="code-line">
<li data-line="70" class="code-line">Intl.Locale オブジェクトは他の Intl API でも使えるオブジェクトですが、意外と紹介する記事も少ないなと思っています。</li>
</ul>
</li>
<li data-line="71" class="code-line">4 日目 : <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-04" target="_blank">ロケールネゴシエーションと Intl.LocaleMatcher Proposal(#4)</a>
<ul data-line="72" class="code-line">
<li data-line="72" class="code-line">Intl がロケールをどう解決しているのか、というかなり仕様や実装側によった話です。実際にコードを書く上で意識することは少ないかもしれませんが、知っておくと Intl の挙動が理解しやすくなるかと思います。</li>
</ul>
</li>
<li data-line="73" class="code-line">6 日目 : <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-06" target="_blank">Intl を支える Unicode の仕様・データ・ライブラリ(#6)</a>
<ul data-line="74" class="code-line">
<li data-line="74" class="code-line">Intl は間違いなく Unicode の提供する仕様やデータ、ライブラリと密接に関わっているのですが、これらについて Intl と合わせて紹介する日本語の記事は少ないと思っています。</li>
</ul>
</li>
<li data-line="75" class="code-line">9 日目 : <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-09" target="_blank">Intl.DateTimeFormat と Temporal の関連(#9)</a>
<ul data-line="76" class="code-line">
<li data-line="76" class="code-line">Intl と新しい日時操作 API Temporal についてその関連を紹介した記事です。少し脱線気味かもしれませんが今後の来そうな API の関連についてもぜひ注目したいと思っています。</li>
</ul>
</li>
</ul>
<h4 id="proposal-%E3%81%AB%E8%88%88%E5%91%B3%E3%81%8C%E3%81%82%E3%82%8B%E6%96%B9" data-line="78" class="code-line">
<a class="header-anchor-link" href="#proposal-%E3%81%AB%E8%88%88%E5%91%B3%E3%81%8C%E3%81%82%E3%82%8B%E6%96%B9" aria-hidden="true"></a> Proposal に興味がある方</h4>
<p data-line="80" class="code-line"><code>Intl</code> に限らず新しい仕様の提案やその議論に興味がある方も一定数いるかと思います。そういった方には以下のような Proposal についての記事をおすすめします。</p>
<ul data-line="82" class="code-line">
<li data-line="82" class="code-line">4 日目 : <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-04" target="_blank">ロケールネゴシエーションと Intl.LocaleMatcher Proposal(#4)</a>
</li>
<li data-line="83" class="code-line">10 日目: <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-10" target="_blank">世界の暦に対応するための Proposal(#10)</a>
</li>
<li data-line="84" class="code-line">12 日目 : <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-12" target="_blank">Intl.DurationFormat Proposal(#12)</a>
</li>
<li data-line="85" class="code-line">16 日目 : <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-16" target="_blank">Smart Unit Preferences と Representing Measures Proposal(#16)</a>
</li>
<li data-line="86" class="code-line">21 日目 : <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-21" target="_blank">Intl.Segmenter v2 Proposal(#21)</a>
</li>
<li data-line="87" class="code-line">23 日目~ : <a href="https://zenn.dev/sajikix/articles/intl-advent-calendar-24-23" target="_blank">Intl.MessageFormat 基礎(#23)</a>
</li>
</ul>
<h3 id="%E5%AE%8C%E8%B5%B0%E3%81%97%E3%81%9F%E6%84%9F%E6%83%B3" data-line="89" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%8C%E8%B5%B0%E3%81%97%E3%81%9F%E6%84%9F%E6%83%B3" aria-hidden="true"></a> 完走した感想</h3>
<p data-line="91" class="code-line">事前に調べていた部分が多かったとはいえ、25 日連続で記事を書き続けるのは初めてで非常に大変でした。ギリギリの投稿時間になってしまう記事もありましたが、なんとか 1 日も落とすことなく完走できたのは良かったです。また書いている間は常にスケジュールと次の記事のプレッシャーを感じながら過ごしていたので、その分完走した時の達成感もひとしおだったように思います。</p>
<p data-line="93" class="code-line">もちろん辛いことだけではなく、記事を書くことで新しい発見や、取りこぼしていた機能の知見が得られることも多く、非常に有意義ない経験になりました。またより知識を深めたい領域や使用が増えたりといった収穫もあったので今後の探究活動にも繋げていきます。</p>
<p data-line="95" class="code-line">ひとまずこの 1 人 Intl Advent Calendar は終わりましたが、25 記事に分かれていて読みづらいと自分でも少し思っているので、来年時間のあるタイミングでまとめて加筆修正しつつ Zenn Book にもしたいと思っています。(その時は是非また読んでいただけると嬉しいです)。</p>


1人Intl Advent Calendar を完走しました

なんで Intl で 1 人 Advent Calendar を書いたの？

今回の Advent Calendar コンセプト

1 人 Intl Advent Calendar を書きました

Discussion