日付と時刻をフォーマットする
Intl.DateTimeFormat で日付を表示します。
「日付と時刻をフォーマットする」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
Intl.DateTimeFormat
Intl.DateTimeFormatは、ロケールに従ってDateオブジェクトをフォーマットします。壊れやすい手作業での文字列組み立てが不要になります。
const dtf = new Intl.DateTimeFormat("en-US");
console.log(dtf.format(new Date("2026-05-29"))); // "5/29/2026"ロケールによる違い
日付の並び順は地域によって異なります。米国では月・日・年、多くのヨーロッパ諸国では日・月・年の順です。
const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US").format(d)); // 5/29/2026
console.log(new Intl.DateTimeFormat("en-GB").format(d)); // 29/05/2026日付スタイルのプリセット
dateStyleには、すぐに読みやすい出力を得るための"full"、"long"、"medium"、"short"というプリセットがあります。
const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(d));
// "Friday, May 29, 2026"時刻スタイル
timeStyleは時刻部分に対して同じように機能し、dateStyleと組み合わせることもできます。
const d = new Date("2026-05-29T14:30:00");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short" }).format(d));
// "May 29, 2026, 2:30 PM"コンポーネントのカスタムオプション
細かく制御するには、year、month、day、weekdayなどのコンポーネントを個別に指定します。
const d = new Date("2026-05-29");
const f = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
console.log(f.format(d)); // "Friday, May 29, 2026"月のフォーマット
monthには、"numeric"、"2-digit"、"short"、"long"、"narrow"を指定できます。
const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { month: "long" }).format(d)); // "May"
console.log(new Intl.DateTimeFormat("en-US", { month: "short" }).format(d)); // "May"12時間制と24時間制
hour12: true/falseを指定すると、時計の表示形式に関するロケールのデフォルト設定を上書きできます。
const d = new Date("2026-05-29T20:05:00");
console.log(new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12: false }).format(d));
// "20:05"タイムゾーン
timeZoneにIANA名を渡すと、実行環境のローカルなタイムゾーンに関係なく、任意のゾーンで日付を表示できます。
const d = new Date("2026-05-29T12:00:00Z");
console.log(new Intl.DateTimeFormat("en-US", { timeStyle: "long", timeZone: "Asia/Tokyo" }).format(d));formatToParts
formatToPartsは型付きトークンの配列を返すため、個々の要素のスタイルや並べ替えができます。
const parts = new Intl.DateTimeFormat("en-US").formatToParts(new Date("2026-05-29"));
console.log(parts.map((p) => p.type + ":" + p.value).join(" "));範囲のフォーマット
formatRange(start, end)は、共通する要素をまとめて日付の範囲を簡潔に表示します。
const f = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" });
console.log(f.formatRange(new Date("2026-05-01"), new Date("2026-05-05")));
// "May 1 – 5"グレゴリオ暦以外のカレンダー
calendarオプションでは、"islamic"、"hebrew"、"japanese"などの暦をサポートしています。
const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { calendar: "japanese", dateStyle: "long" }).format(d));クイックチェック
日付のフォーマットをテストします。
復習：日付と時刻
Intl.DateTimeFormatで日付と時刻をフォーマットし、dateStyleとtimeStyleのプリセットや、細かく指定できるコンポーネントオプションを使いました。タイムゾーン、12時間制と24時間制、formatToParts、範囲、別の暦にも対応しました。次は、相対時刻と複数形です。
よくある質問
「日付と時刻をフォーマットする」レッスンは無料ですか？
はい。「日付と時刻をフォーマットする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「日付と時刻をフォーマットする」で何を学びますか？
Intl.DateTimeFormat で日付を表示します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「日付と時刻をフォーマットする」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 数値と通貨をフォーマットする
- 日付と時刻をフォーマットする
- 相対時間と複数形
- ロケールに対応した並べ替え