【JavaScriptのIntl】数字や日付、価格の表示をスマートに

ツイートのいいね数やコメント数、YouTubeの投稿日時、Amazonなどネットショップのレビュー数、通貨ごとの適切な価格表示など、UX（ユーザーエクスペリエンス）の向上やコンテンツや商品の競争力を高めるためには、これらの数字をユーザーが一目で理解できるようにすることが一つのポイントになります。

また、数字が非常に長い場合は、簡潔に表示する方が読みやすいです。さらに、ユーザーの使用言語や文化に合わせて、数字を適切に表示することが良いでしょう。

上のように数字、日付、価格を簡潔に表示するために、外部ライブラリを使用せずに、JavaScript標準仕様にあるIntl APIを使用するとより簡便に実装できます。

Intl API

Intl APIはinternationalization（国際化）APIの略で、下記はMDNからの引用です。

Intl オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 Intl オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します。

また、internationalizationは始めのiから終わりのnまでの間に18文字入っていることでi18nと呼ばれています。

ほとんどの最新のブラウザでサポートされているため、互換性を心配せずに使用できます。

では、いくつかの使い方を紹介します。

数字を簡潔に表示

Intl.NumberFormatを使用します。 viewsに閲覧数を表す数字を入れています。このように大きな数字をそのまま表示すると読みにくくなります。最初の引数には言語を指定するだけで良いので、日本語の場合はja-JPを指定します。

1const views = 9741275;
2const formatter = new Intl.NumberFormat('ja-JP');
3
4console.log(formatter.format(views));  // 9,741,234

より簡潔に表示するには、2番目の引数にさまざまなオプションを指定できます。オプションの中でnotation: 'compact'を指定するとコンパクトになります。

1const views = 9741275;
2const formatter = new Intl.NumberFormat('ja-JP', {
3    notation: 'compact'
4});
5
6console.log(formatter.format(views));  // 974万

さらに、1番目の引数に言語ブラウザのAPIでサポートされているnavigator.languageを指定すると、ユーザーがブラウザで設定した言語を自動的に取得でき、ユーザーが指定した言語に応じて数字を表示できます。

1const views = 9741234;
2const formatter = new Intl.NumberFormat(navigator.language, {
3  notation: 'compact'
4});
5
6console.log(formatter.format(views));  // 974万

価格を通貨に合わせて簡潔に表示

同様にIntl.NumberFormatを使用します。 1番目の引数には同じく言語を、2番目の引数のオプションでstyle: 'currency'に設定し、currencyオプションで通貨currency: 'JPY'を指定します。

1const price = 1000000;
2const formatter = new Intl.NumberFormat('ja-JP', {
3  style: 'currency', 
4  currency: 'JPY'
5});
6
7console.log(formatter.format(price)); // ￥1,000,000

ここでも"compact"オプションを使用してコンパクトにすることができます。compactオプションは価格よりはいいねの数など大体の数を表す時にいいかもしれません

1const price = 1000000;
2const formatter = new Intl.NumberFormat('ja-JP', {
3  style: 'currency', 
4  currency: 'JPY',
5  notation: 'compact'
6});
7
8console.log(formatter.format(price)); // ￥100万

相対時間をスマートに表示

商品や記事がいつ公開されたか、何日前、何時間前に投稿されたかを表す必要もあります。相対時間をスマートに表示するためにはIntl.RelativeTimeFormatを使用します。 formatの1番目の引数は数字で、2番目には日付か時間か月かなどを指定します。

1const formatter = new Intl.RelativeTimeFormat('ja-JP');
2
3console.log(formatter.format(1, 'day')); // 1 日後

オプションにnumeric: 'auto'にすると言葉を変えてくれます。

1const formatter = new Intl.RelativeTimeFormat('ja-JP', {
2  numeric: 'auto'
3});
4
5console.log(formatter.format(1, 'day')); // 明日

入社して何日経ったかを示したい場合、今日を基準にして、入社日の日付を指定し、現在までの日数を計算し、フォーマッタを使用すると、"〜日前”と表示されます。

1const today = new Date();
2const startDate = new Date(2021, 4, 17); // 2021年5月17日　monthは0から始まるため5→4
3const daysPassed = Math.ceil((startDate - today) / (1000 * 60 * 60 * 24));
4const yearsPassed = Math.ceil((startDate - today) / (1000 * 60 * 60 * 24　* 365));
5const formatter = new Intl.RelativeTimeFormat('ja-JP', {
6  numeric: 'auto'
7});
8
9console.log(formatter.format(daysPassed, 'day')); // 857 日前
10console.log(formatter.format(yearsPassed, 'year')); // 2 年前

ただし、2番目の引数は日か時間かのどちらか1つだけを指定できます。

この問題を補完できるライブラリtimeago.jsがありますが、時間がどれだけ経過したかに応じて日か時間かを自動的に表示されるので、相対的な時間のみが必要な場合に便利かと思います。

日付と時間を正確に表示

時間を表示するときには、コンパクトにしてより読みやすい場合もありますが、正確な日付を表示する必要があるときもあります。その場合はIntl.DateTimeFormatまたはtoLocalDateStringを使用します。

1const today = new Date(); // 作成日基準の今日
2
3console.log(today.toString()); // Thu Sep 21 2023 12:05:01 GMT+0900 (日本標準時)
4console.log(new Intl.DateTimeFormat('ja-JP').format(today)); // 2023/9/21

これをさらに簡略化した方法もあります。

1const today = new Date();
2
3console.log(
4  today.toLocaleDateString('ja-JP', {
5    minute: 'numeric',
6    hour: 'numeric',
7    day: 'numeric',
8    month: 'short',
9    year: 'numeric',
10    weekday: 'short'
11  })
12); // 2023年9月21日(木) 12:18

日付にtoLocaleDateStringを使用するだけで、内部的にはIntl APIを使用するため、より簡単にフォーマットを使用できます。言語を指定するだけでその言語に合わせたフォーマットが表示されます。さらに、さまざまなオプションを指定することもできるので、より簡単にまたはより詳しく表示できます。