日付 — 基礎、タイムゾーン、Intl.DateTimeFormat
日付を作成して各要素を読み取り、ロケールに合わせて書式設定し、Intl.DateTimeFormatで別のタイムゾーンの時刻を表示します。
「日付 — 基礎、タイムゾーン、Intl.DateTimeFormat」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。
日付の導入
目標: 日付を安全に作成し、整形できるようになることです。
- new Date()
- 各部分の読み取り
- ロケールに応じた整形
- 別のタイムゾーン

Date値の作成
new Date()、タイムスタンプ、または単純な年/月/日の各部分を使って作成できます(月のインデックスは0から始まります)。
// Create Date instances
// Now (current time)
const now = new Date();
// From timestamp (milliseconds since Jan 1, 1970 UTC)
const fromMs = new Date(0);
// From parts: year, monthIndex (0=Jan), day
const xmas = new Date(2025, 11, 25);
console.log("Now:", now.toString());
console.log("Epoch:", fromMs.toUTCString());
console.log("Xmas:", xmas.toDateString());

各部分のgetter
getFullYear、getMonth、getDate、getHoursなどのgetterを使用します。
// Read parts with getters
const d = new Date(2025, 0, 2, 15, 30);
console.log("Year:", d.getFullYear());
console.log("Month (0=Jan):", d.getMonth());
console.log("Day of month:", d.getDate());
console.log("Hours:", d.getHours());
console.log("Minutes:", d.getMinutes());

ISO形式とエポック
toISOStringは安定したUTC文字列を返します。getTimeはエポックからの経過ミリ秒を返します。
// ISO string and timestamps
const sample = new Date();
console.log("ISO:", sample.toISOString());
console.log("Unix seconds (approx):", Math.floor(sample.getTime() / 1000));

ロケールに応じた整形
Intl.DateTimeFormatを使うと、各部分のオプションを指定して、分かりやすいロケール対応の出力を作成できます。
// Format for a locale
const date = new Date(2025, 6, 4, 9, 5);
// Simple: toLocaleString uses your environment defaults
console.log("Local:", date.toLocaleString());
// Intl.DateTimeFormat with explicit locale and options
const fmt = new Intl.DateTimeFormat("en-GB", {
year: "numeric",
month: "short",
day: "2-digit",
hour: "2-digit",
minute: "2-digit"
});
console.log("Formatted:", fmt.format(date));

別のタイムゾーンで整形
timeZoneを指定すると、同じ瞬間を異なる地域の時刻で確認できます(手動で計算する必要はありません)。
// Format for a different time zone
const meeting = new Date(Date.UTC(2025, 3, 10, 12, 0));
const ny = new Intl.DateTimeFormat("en-US", {
timeZone: "America/New_York",
dateStyle: "medium",
timeStyle: "short"
});
const tokyo = new Intl.DateTimeFormat("en-US", {
timeZone: "Asia/Tokyo",
dateStyle: "medium",
timeStyle: "short"
});
console.log("NY:", ny.format(meeting));
console.log("Tokyo:", tokyo.format(meeting));

Intl.DateTimeFormatのクイズ
クイックチェック: ロケールとタイムゾーンに応じた整形

まとめ
まとめ: 日付を作成し、各部分を読み取り、ISO形式で出力し、ロケールに合わせて整形し、Intl.DateTimeFormatで別のタイムゾーンを表示しました。

よくある質問
「日付 — 基礎、タイムゾーン、Intl.DateTimeFormat」レッスンは無料ですか?
はい。「日付 — 基礎、タイムゾーン、Intl.DateTimeFormat」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。
「日付 — 基礎、タイムゾーン、Intl.DateTimeFormat」で何を学びますか?
日付を作成して各要素を読み取り、ロケールに合わせて書式設定し、Intl.DateTimeFormatで別のタイムゾーンの時刻を表示します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「日付 — 基礎、タイムゾーン、Intl.DateTimeFormat」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか?
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- テンプレートリテラルとよく使う文字列操作
- 数値 — 整数と浮動小数点数、Mathの基礎
- 日付 — 基礎、タイムゾーン、Intl.DateTimeFormat