JavaScript の Date オブジェクトを使って日付を操作する

はじめに

この実験では、参加者は強力な JavaScript の Date オブジェクトを探索し、日付と時刻を操作するための基本的な技術を学びます。包括的で実践的なアプローチを通じて、学生はさまざまな初期化方法を使用して Date オブジェクトを作成する方法、特定の日付コンポーネントを取得する方法、日付情報をフォーマットして表示する方法、セッターメソッドを使用して日付を変更する方法、および複雑な日付計算を行う方法を発見します。

この実験では、JavaScript で日付を扱う際の実践的な手順に沿ったガイダンスが提供され、現在時刻、特定のタイムスタンプ、日付文字列、および Unix エポック以降のミリ秒から Date オブジェクトを作成するなどの基本的なスキルがカバーされます。この実験が終了するまでに、参加者は日付操作技術を十分に理解しており、JavaScript アプリケーションで日付関連のタスクを効果的に処理できるようになります。

新しい Date オブジェクトを作成する

このステップでは、日付と時刻を扱う上で基本となる JavaScript で新しい Date オブジェクトを作成する方法を学びます。JavaScript の Date オブジェクトを使うと、日付と時刻を簡単に扱うことができます。

まず、WebIDE を開き、 ~/project ディレクトリに dates.js という名前の新しい JavaScript ファイルを作成しましょう。

さまざまな初期化方法を使って新しい Date オブジェクトを作成します：

// 現在の日付と時刻を表す Date オブジェクトを作成する
let currentDate = new Date();
console.log("Current Date:", currentDate);

// 特定の日付と時刻を持つ Date オブジェクトを作成する
let specificDate = new Date(2023, 5, 15, 10, 30, 0);
console.log("Specific Date:", specificDate);

// 日付文字列を使って Date オブジェクトを作成する
let stringDate = new Date("2023-06-15");
console.log("Date from String:", stringDate);

// Unix エポック以降のミリ秒を使って Date オブジェクトを作成する
let millisecondDate = new Date(1686816000000);
console.log("Date from Milliseconds:", millisecondDate);

出力例：

Current Date: Thu Jun 15 2023 12:00:00 GMT+0000 (Coordinated Universal Time)
Specific Date: Thu Jun 15 2023 10:30:00 GMT+0000 (Coordinated Universal Time)
Date from String: Thu Jun 15 2023 00:00:00 GMT+0000 (Coordinated Universal Time)
Date from Milliseconds: Thu Jun 15 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

忘れないでおくポイント：

new Date() は現在の日付と時刻で Date オブジェクトを作成する
new Date(year, month, day, hours, minutes, seconds) は特定の日付を作成する
月は 0 から始まる (0 - 11) ので、6 月は 5 で表される
日付文字列を使ったり、Unix エポック (1970 年 1 月 1 日) 以降のミリ秒を使って日付を作成することができる

現在の日付コンポーネントを取得する

このステップでは、Date オブジェクトから特定のコンポーネントを抽出する方法を学びます。前のステップを踏まえて、日付と時刻のコンポーネントを取得するためのさまざまな方法を示すために、 dates.js ファイルを使います。

~/project/dates.js ファイルを開き、次のコードを追加します：

// 現在の日付オブジェクトを作成する
let currentDate = new Date();

// 個々の日付コンポーネントを取得する
let year = currentDate.getFullYear();
let month = currentDate.getMonth(); // 0-11 (0 = 1 月)
let day = currentDate.getDate(); // 月の日
let hours = currentDate.getHours();
let minutes = currentDate.getMinutes();
let seconds = currentDate.getSeconds();
let milliseconds = currentDate.getMilliseconds();

// 個々のコンポーネントを表示する
console.log("Year:", year);
console.log("Month:", month + 1); // 実際の月番号を表示するために 1 を加える
console.log("Day of Month:", day);
console.log("Hours:", hours);
console.log("Minutes:", minutes);
console.log("Seconds:", seconds);
console.log("Milliseconds:", milliseconds);

// 曜日を取得する
let dayOfWeek = currentDate.getDay(); // 0-6 (0 = 日曜日)
console.log("Day of Week:", dayOfWeek);

// タイムスタンプ (Unix エポック以降のミリ秒) を取得する
let timestamp = currentDate.getTime();
console.log("Timestamp:", timestamp);

出力例：

Year: 2023
Month: 6
Day of Month: 15
Hours: 12
Minutes: 30
Seconds: 45
Milliseconds: 123
Day of Week: 4
Timestamp: 1686816045123

忘れないでおくポイント：

getFullYear() は 4 桁の年を返す
getMonth() は 0-11 を返すので、実際の月番号を表示するために 1 を加える
getDate() は月の日 (1-31) を返す
getDay() は曜日 (0-6) を返す
getTime() は 1970 年 1 月 1 日以降のミリ秒を返す

日付情報をフォーマットして表示する

このステップでは、JavaScript で日付情報をフォーマットして表示するさまざまな方法を学びます。 ~/project/dates.js ファイルを開き、さまざまなフォーマット技術を調べるために次のコードを追加します：

// 現在の日付オブジェクトを作成する
let currentDate = new Date();

// 方法 1: toLocaleDateString() を使用する
let localeDateString = currentDate.toLocaleDateString();
console.log("Local Date String:", localeDateString);

// 方法 2: toDateString() を使用する
let dateString = currentDate.toDateString();
console.log("Date String:", dateString);

// 方法 3: toLocaleString() を使用する
let localeString = currentDate.toLocaleString();
console.log("Locale String:", localeString);

// 方法 4: カスタムフォーマット
let customFormat =
  `${currentDate.getFullYear()}-` +
  `${(currentDate.getMonth() + 1).toString().padStart(2, "0")}-` +
  `${currentDate.getDate().toString().padStart(2, "0")}`;
console.log("Custom Format:", customFormat);

// 方法 5: 国際化 API
let options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
};
let intlFormat = currentDate.toLocaleDateString("en-US", options);
console.log("Internationalized Format:", intlFormat);

出力例：

Local Date String: 6/15/2023
Date String: Thu Jun 15 2023
Locale String: 6/15/2023, 12:30:45 PM
Custom Format: 2023-06-15
Internationalized Format: Thursday, June 15, 2023

忘れないでおくポイント：

toLocaleDateString() はローカライズされた日付表現を提供する
toDateString() は読みやすい日付文字列を返す
toLocaleString() は日付と時刻の両方を含む
カスタムフォーマットは日付の表示を精密に制御できる
国際化 API は高度なローカライズオプションを提供する

セッターメソッドを使って日付を変更する

このステップでは、JavaScript の Date セッターメソッドを使って日付コンポーネントを変更する方法を学びます。 ~/project/dates.js ファイルを開き、日付値を変更するさまざまな方法を調べるために次のコードを追加します：

// 新しい Date オブジェクトを作成する
let modifiableDate = new Date();
console.log("Original Date:", modifiableDate);

// 特定の年を設定する
modifiableDate.setFullYear(2024);
console.log("After setting year:", modifiableDate);

// 月を設定する (0-11 なので、5 は 6 月を表す)
modifiableDate.setMonth(5);
console.log("After setting month:", modifiableDate);

// 月の日を設定する
modifiableDate.setDate(15);
console.log("After setting day:", modifiableDate);

// 時間を設定する (0-23)
modifiableDate.setHours(14);
console.log("After setting hours:", modifiableDate);

// 分を設定する (0-59)
modifiableDate.setMinutes(30);
console.log("After setting minutes:", modifiableDate);

// 秒を設定する (0-59)
modifiableDate.setSeconds(45);
console.log("After setting seconds:", modifiableDate);

// セッターメソッドをチェーン化する
let customDate = new Date();
customDate.setFullYear(2025).setMonth(11).setDate(31);
console.log("Custom Date:", customDate);

出力例：

Original Date: Thu Jun 15 2023 12:30:45 GMT+0000
After setting year: Thu Jun 15 2024 12:30:45 GMT+0000
After setting month: Thu Jun 15 2024 12:30:45 GMT+0000
After setting day: Sat Jun 15 2024 12:30:45 GMT+0000
After setting hours: Sat Jun 15 2024 14:30:45 GMT+0000
After setting minutes: Sat Jun 15 2024 14:30:45 GMT+0000
After setting seconds: Sat Jun 15 2024 14:30:45 GMT+0000
Custom Date: Wed Dec 31 2025 00:00:00 GMT+0000

忘れないでおくポイント：

セッターメソッドは日付コンポーネントを精密に変更できる
月は 0 から始まる (0-11)
時間は 24 時間形式 (0-23) を使用する
セッターメソッドは元の Date オブジェクトを変更する
便利さのためにいくつかのセッターメソッドをチェーン化できる

日付の計算を行う

このステップでは、JavaScript の Date メソッドを使ってさまざまな日付の計算を行う方法を学びます。 ~/project/dates.js ファイルを開き、さまざまな日付操作技術を調べるために次のコードを追加します：

// 計算用の日付オブジェクトを作成する
let currentDate = new Date();
let futureDate = new Date(currentDate.getTime());

// 日付に日数を加える
futureDate.setDate(currentDate.getDate() + 30);
console.log("Current Date:", currentDate);
console.log("30 Days from Now:", futureDate);

// 日付間の差分を計算する
let differenceInMilliseconds = futureDate.getTime() - currentDate.getTime();
let differenceInDays = Math.floor(
  differenceInMilliseconds / (1000 * 60 * 60 * 24)
);
console.log("Days Between Dates:", differenceInDays);

// 年齢または経過時間を計算する
let birthDate = new Date("1990-01-01");
let ageInMilliseconds = currentDate.getTime() - birthDate.getTime();
let ageInYears = Math.floor(ageInMilliseconds / (1000 * 60 * 60 * 24 * 365.25));
console.log("Calculated Age:", ageInYears);

// 現在の月の最終日を求める
let lastDayOfMonth = new Date(
  currentDate.getFullYear(),
  currentDate.getMonth() + 1,
  0
);
console.log("Last Day of Current Month:", lastDayOfMonth);

// 年がうるう年かどうかを確認する
function isLeapYear(year) {
  return new Date(year, 1, 29).getMonth() === 1;
}
console.log("Is 2024 a Leap Year?", isLeapYear(2024));

出力例：

Current Date: Thu Jun 15 2023 12:30:45 GMT+0000
30 Days from Now: Sat Jul 15 2023 12:30:45 GMT+0000
Days Between Dates: 30
Calculated Age: 33
Last Day of Current Month: Wed Jun 30 2023 00:00:00 GMT+0000
Is 2024 a Leap Year? true

忘れないでおくポイント：

計算にミリ秒を取得するために getTime() を使用する
適切に割ることでミリ秒を日数に変換する
setDate() を使って日数を加えたり引いたりできる
日付間の年齢または時間の差分を計算する
2 月 29 日をテストすることでうるう年を確認する

まとめ

この実験では、参加者は、日付の作成、取得、操作技術の包括的な検討を通じて、JavaScript の Date オブジェクトを使って日付を操作する方法を学びました。この実験では、Date オブジェクトを初期化する複数のアプローチが扱われており、現在の時刻を表す日付の作成、パラメータを使った正確な日付の指定、文字列を使った日付の解析、およびミリ秒タイムスタンプからの日付の生成が含まれます。

実際の演習では、特定の日付コンポーネントの抽出、日付情報のフォーマット、日付を変更するためのセッターメソッドの適用、および日付の計算など、重要な JavaScript 日付処理スキルが示されました。参加者は、0 から始まる月の表現、さまざまな Date オブジェクトの初期化戦略の理解、およびさまざまなプログラミングシナリオで一時的なデータを効果的に扱うための組み込み JavaScript メソッドの活用に関する実践的な経験を得ました。

JavaScript の Date オブジェクトを使って日付を操作する

はじめに

ブラウザでそのまま実践！

新しい Date オブジェクトを作成する

現在の日付コンポーネントを取得する

ハンズオンで理解を深めよう。

日付情報をフォーマットして表示する

セッターメソッドを使って日付を変更する

まずは触って覚える。

日付の計算を行う

まとめ