「日付の書式設定を作り替えるのが苦手でいつも悪戦苦闘している」
「日本語ならではの表記方法のやり方がわからない」
「日付、通貨の単位をJavaScriptで変換しているが多重ネストで条件分岐を書いている」
本日はそんな方に向けて書式変換を簡単に行うIntlクラスをご紹介します。
Intlクラスを使うことで日付、数字、単位の変換が驚くほど簡単に行えるようになります。
日付を地域に合わせたフォーマットで表示したり、数字を通貨やパーセント形式に変換したり、時間差を分かりやすく表示したりする必要がある場面はよくありますよね。
ググったりして発見したブログ記事や書籍でも単位変換は解説されますが、実務で求められる基準を再現するにはJavaScriptを難しく作る必要があります。
そこでIntlクラスをうまく活用することで、手間のかかるカスタムコードを書かずに簡潔なコードで要件を満たすことができます。
この記事では「DateTimeFormat」、「NumberFormat」、「RelativeTimeFormat」の基本的な使い方を詳細に解説していきます。
日付の単位変換だけでなく「明日」「昨日」のような日本語ならではの表現方法まで対応できて初学者の方には便利な内容になっています。
またJavaScriptで多言語対応のアプリケーションを開発したい方や、データの視覚化に便利なフォーマットを探している方にとっても知っ得になるでしょう。
動画でも解説しているので併せてどうぞ。
JavaScript のIntlを使って日付の書式を変える方法
まずは日付の書式設定についてです。
Intlというクラスはインスタンス化するときにロケールを指定することになっています。
ロケールとはタイムゾーンとも言われていて簡単にいうと「国(地域)」のことです。
使い方としては以下のようにします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script
src="https://yubinbango.github.io/yubinbango/yubinbango.js"
charset="UTF-8"
></script>
<script src="./script.js" defer></script>
</head>
<body>
<div class="container"></div>
<hr />
<div class="wrapper"></div>
</body>
</html>const dateFormatter = new Intl.DateTimeFormat("ja-JP");
const date = dateFormatter.format(new Date());
const container = document.querySelector(".container");
container.textContent = JSON.stringify(date);
Intl.DateTimeFormatの引数にロケールを指定しました。
またIntlクラスをインスタンス化すると、専用のformatメソッドを使うことができるようになります。
インスタンス化した後は基本的にformatメソッドを使います。
インスタンス化する時にja-JPとすると日本を指定したことになり、表示もよく見るものになっています。
例えばアメリカに変えてみると書式が変わります。
// ここを変更
const dateFormatter = new Intl.DateTimeFormat("en-US");
const date = dateFormatter.format(new Date());
const container = document.querySelector(".container");
container.textContent = JSON.stringify(date);
同じ日付でも順番が逆になりましたね、アメリカだと逆から書くためです。
このようにIntlではロケールを指定することで簡単に国に対応した書式に変換することができます。
また実際にWebサービスを展開する際に日本以外のユーザーもアクセスすることを想定する場合には「undefined」とすればOKです。
閲覧するユーザーの国をもとに自動的に書式をIntlが変換してくれます、とても便利ですね。
// ここを変更
const dateFormatter = new Intl.DateTimeFormat(undefined);
const date = dateFormatter.format(new Date());
const container = document.querySelector(".container");
container.textContent = JSON.stringify(date);現在、私は日本にいますので日本の表記に戻りました。
ロケールを何にするかは所属するチームリーダーや顧客に確認することになると思いますが、undefinedにしておくのが無難かもしれません。
現状だけでも便利ですがロケール以外にも細かい設定を追加することもできます。
その場合には第一引数にロケール、第二引数にオブジェクト型で指定します。
// ここを変更
const dateFormatter = new Intl.DateTimeFormat(undefined, { dateStyle: "full" });
const date = dateFormatter.format(new Date());
const container = document.querySelector(".container");
container.textContent = JSON.stringify(date);
日本では上図のように単位を漢字で書く場合もありますよね。
今回はdateStyleを追加してみましたが、他にも設定できるものがあります。
また国によって表記の種類は多い場合もありますし、パターンが少ない場合もあります。
表記パターンの少ない国をロケールにしている場合は、第二引数で設定を追加しても表記が変わらないようになっています。
とはいえエラーになることは無いので公式ドキュメントを元にいろいろ触ってみて確認するのが良いでしょう。
公式ドキュメントは↓です。
直近の日付に関しては「年月日」ではない書き方もあります、例えば「明日」などです。
そのような日付についてもIntlは対応していて以下のようにします。
// 全て書き換え
const createDate = new Intl.RelativeTimeFormat(undefined);
const newDate = createDate.format(1, "day");
const wrapper = document.querySelector(".wrapper");
wrapper.textContent = JSON.stringify(newDate);
注意点としてはIntl.RelativeTimeFormatというインスタンス方法に変わりました。
Intl.RelativeTimeFormatにしたとしてもformatメソッドは使うことができて、第一引数に日数を、第二引数に文字列で単位を書きます。
formatメソッドの第一引数の日数はプラスが未来でマイナスが過去になる仕組みです。
const createDate = new Intl.RelativeTimeFormat(undefined);
// ここを変更
const newDate = createDate.format(-1, "day");
const wrapper = document.querySelector(".wrapper");
wrapper.textContent = JSON.stringify(newDate);
他の例もやってみます、以下のように書くこともできます。
// ここを変更
const createDate = new Intl.RelativeTimeFormat(undefined, {
numeric: "auto",
});
const newDate = createDate.format(-1, "day");
const wrapper = document.querySelector(".wrapper");
wrapper.textContent = JSON.stringify(newDate);
同じ意味でも書き方が違うことがありますよね。
Intl.RelativeTimeFormatについても第二引数の設定項目はたくさんあるので遊び感覚で試してみましょう。
JavaScript のIntlを使って数字の書式を変更する方法
続いて日付と同じくらい書式変換がある数字についてです。
数字をIntlで使う場合はIntl.NumberFormatというインスタンス化の方法になります。
インスタンス化する際の引数の指定方法は、数字についても同じように第一引数にロケールを、第二引数に追加項目を指定する使い方です。
// 全て書き換え
const moneyFormatter = new Intl.NumberFormat(undefined, {
currency: "JPY",
style: "currency",
});
const money = moneyFormatter.format(1000);
const container = document.querySelector(".container");
container.textContent = JSON.stringify(money);
お金の書式を表現してみました、日本は「円(¥)」です。
これだけでも便利ですが桁数が大きくなると少し見づらくなります。
// ここを変更
const moneyFormatter = new Intl.NumberFormat(undefined, {
notation: "compact",
});
// ここを変更
const money = moneyFormatter.format(100000000);
const container = document.querySelector(".container");
container.textContent = JSON.stringify(money);
このようなゼロを省略するプログラムを自力で作るのは初学者の方には大変ですよね。
他の例も出します、お金関係と一緒に比率も頻出の書式です。
// 全て書き換え
const numberFormatter = new Intl.NumberFormat(undefined, {
style: "percent",
});
const num = numberFormatter.format(0.8);
const wrapper = document.querySelector(".wrapper");
wrapper.textContent = JSON.stringify(num);
Intl.NumberFormatについても他の設定項目を確認してみましょう。
本記事で紹介したものはJavaScriptを使って自作できるものばかりですが、Intlクラスを使うことで少ないコード量で実現できるので便利です。
初学者の方はIntlクラスを使うことで表示方法の変更に苦手意識は無くなることでしょう。