0Pricing
JavaScript Academy · レッスン

日付 — 基礎、タイムゾーン、Intl.DateTimeFormat

日付を作成して各要素を読み取り、ロケールに合わせて書式設定し、Intl.DateTimeFormatで別のタイムゾーンの時刻を表示します。

「日付 — 基礎、タイムゾーン、Intl.DateTimeFormat」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

日付の導入

目標: 日付を安全に作成し、整形できるようになることです。

  • new Date()
  • 各部分の読み取り
  • ロケールに応じた整形
  • 別のタイムゾーン
日付 — 基礎、タイムゾーン、Intl.DateTimeFormat — イラスト1

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());
日付 — 基礎、タイムゾーン、Intl.DateTimeFormat — イラスト2

各部分の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());
日付 — 基礎、タイムゾーン、Intl.DateTimeFormat — イラスト3

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 — イラスト4

ロケールに応じた整形

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));
日付 — 基礎、タイムゾーン、Intl.DateTimeFormat — イラスト5

別のタイムゾーンで整形

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 — イラスト6

Intl.DateTimeFormatのクイズ

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

日付 — 基礎、タイムゾーン、Intl.DateTimeFormat — イラスト7

まとめ

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

日付 — 基礎、タイムゾーン、Intl.DateTimeFormat — イラスト8

よくある質問

「日付 — 基礎、タイムゾーン、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フィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. テンプレートリテラルとよく使う文字列操作
  2. 数値 — 整数と浮動小数点数、Mathの基礎
  3. 日付 — 基礎、タイムゾーン、Intl.DateTimeFormat
← JavaScript Academyに戻る