相対時間と複数形
RelativeTimeFormat と PluralRules を使います。
「相対時間と複数形」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
Intl.RelativeTimeFormat
Intl.RelativeTimeFormatは、ユーザーの言語で「3日前」や「2時間後」のような表現を生成します。
const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-1, "day")); // "1 day ago"
console.log(rtf.format(2, "hour")); // "in 2 hours"過去は負の値、未来は正の値
数値の符号で方向が決まります。負の値は過去、正の値は未来を表します。
const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-3, "week")); // "3 weeks ago"
console.log(rtf.format(5, "minute")); // "in 5 minutes"numericオプション
numeric: "auto"を使うと、「1日前」ではなく「昨日」、「1日後」ではなく「明日」のような自然な表現になります。
const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
console.log(rtf.format(-1, "day")); // "yesterday"
console.log(rtf.format(0, "day")); // "today"ローカライズされた相対時刻
ロケールを切り替えると、フレーズ全体が自動的に翻訳されます。
console.log(new Intl.RelativeTimeFormat("es").format(-2, "day")); // "hace 2 dias"
console.log(new Intl.RelativeTimeFormat("fr").format(3, "hour")); // "dans 3 heures"適切な単位を選ぶ
実際のアプリでは、意味のある最も大きな単位を選びます。差を秒単位で計算し、単位を順に小さくしていきます。
function ago(date) {
const diff = (date - Date.now()) / 1000;
const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
if (Math.abs(diff) < 60) return rtf.format(Math.round(diff), "second");
if (Math.abs(diff) < 3600) return rtf.format(Math.round(diff / 60), "minute");
return rtf.format(Math.round(diff / 3600), "hour");
}
console.log(ago(new Date(Date.now() - 90000)));Intl.PluralRules
複数形は、単に「s」を付ければよいわけではありません。Intl.PluralRulesは、言語ごとに数値を"one"や"other"のようなカテゴリーへマッピングします。
const pr = new Intl.PluralRules("en-US");
console.log(pr.select(1)); // "one"
console.log(pr.select(2)); // "other"
console.log(pr.select(0)); // "other"複数形メッセージを作る
カテゴリーを使って、正しい単語を選びます。
const pr = new Intl.PluralRules("en-US");
const forms = { one: "item", other: "items" };
function label(n) { return n + " " + forms[pr.select(n)]; }
console.log(label(1)); // "1 item"
console.log(label(5)); // "5 items"より多くの形を持つ言語
複数形のカテゴリーがいくつもある言語は少なくありません。たとえばポーランド語では"few"と"many"を区別するため、英語用にハードコードしたロジックでは正しく動きません。
const pr = new Intl.PluralRules("pl");
console.log(pr.select(1)); // "one"
console.log(pr.select(3)); // "few"
console.log(pr.select(5)); // "many"序数の複数形
type: "ordinal"を渡すと、1st、2nd、3rdのような序数に使うカテゴリーを取得できます。
const pr = new Intl.PluralRules("en-US", { type: "ordinal" });
const suffix = { one: "st", two: "nd", few: "rd", other: "th" };
function ordinal(n) { return n + suffix[pr.select(n)]; }
console.log(ordinal(1), ordinal(2), ordinal(3), ordinal(11)); // 1st 2nd 3rd 11th数値との組み合わせ
PluralRulesとNumberFormatを組み合わせると、完全にローカライズされた件数メッセージを作れます。
const nf = new Intl.NumberFormat("en-US");
const pr = new Intl.PluralRules("en-US");
const forms = { one: "file", other: "files" };
function msg(n) { return nf.format(n) + " " + forms[pr.select(n)]; }
console.log(msg(1000)); // "1,000 files"Intl.ListFormat
おまけに、Intl.ListFormatを使うと、ロケールに適した接続詞で項目を結合できます。
const lf = new Intl.ListFormat("en-US", { type: "conjunction" });
console.log(lf.format(["red", "green", "blue"])); // "red, green, and blue"クイックチェック
相対時刻と複数形をテストします。
復習：相対時刻と複数形
RelativeTimeFormat（numeric: "auto"を含む）で相対時刻をフォーマットし、適切な単位のしきい値を選び、PluralRulesでさまざまな言語や序数に対応した正しい複数形を選び、ListFormatでリストを結合しました。次は、ロケールに対応した並べ替えです。
よくある質問
「相対時間と複数形」レッスンは無料ですか？
はい。「相対時間と複数形」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「相対時間と複数形」で何を学びますか？
RelativeTimeFormat と PluralRules を使います。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「相対時間と複数形」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。