Java Scriptの基礎その25　日時操作とタイマー

イントロダクション

JavaScriptでは、日時の操作やタイマーの設定が非常に簡単に行えます。この記事では、Dateオブジェクトの基本的な使い方、日時の操作方法、そしてタイマーの設定方法について詳しく解説します。これを理解することで、日常的な開発作業において、より効果的に日時を操作することができるようになります。

Dateオブジェクトの基本

Dateオブジェクトの生成

JavaScriptのDateオブジェクトは、現在の日時を取得するためや、特定の日時を設定するために使用されます。

const nowDate = new Date();
console.log(nowDate); // 現在の日付と時刻を出力

console.log(Date.now()); // 現在のタイムスタンプをミリ秒で出力

このコードでは、現在の日付と時刻を持つDateオブジェクトを作成し、その値をコンソールに出力します。また、Date.now()を使用して現在のタイムスタンプをミリ秒単位で取得する方法も示しています。

特定の日付の生成

特定の日付を生成するためには、文字列や数値を使ってDateオブジェクトを作成します。

console.log(new Date("Aug 02 2024 18:28:41")); // 指定された日付と時刻を出力
console.log(new Date("Aug 24, 2015")); // 指定された日付を出力
console.log(new Date(2023, 8, 2, 18, 29, 5)); // 年月日と時分秒を指定して出力
console.log(new Date(2023, 8, 24)); // 年月日を指定して出力

これらの例では、さまざまなフォーマットで日付を指定し、Dateオブジェクトを生成しています。

エポックタイムの使用

エポックタイム（1970年1月1日からの経過時間）を使ってDateオブジェクトを作成することもできます。

console.log(new Date(0)); // 1970年1月1日 00:00:00 UTCを出力
console.log(new Date(3 * 24 * 60 * 60 * 1000)); // エポックから3日後の日付を出力

日付の操作

未来の日付の作成

未来の日付を設定し、そのプロパティを操作する方法です。

const futureDate = new Date(2035, 8, 2, 18, 30);
console.log(futureDate); // 2035年9月2日 18:30の日時を出力

console.log(futureDate.getFullYear()); // 年を取得
console.log(futureDate.getMonth()); // 月を取得（0から始まるため9月は8）
console.log(futureDate.getDate()); // 日を取得
console.log(futureDate.getDay()); // 曜日を取得（0:日曜日, 6:土曜日）
console.log(futureDate.getHours()); // 時を取得
console.log(futureDate.getMinutes()); // 分を取得
console.log(futureDate.getSeconds()); // 秒を取得
console.log(futureDate.toISOString()); // ISO形式の文字列を取得

これらのメソッドを使うことで、Dateオブジェクトからさまざまな情報を取得できます。

日付の設定

日付の一部を変更することも可能です。

futureDate.setFullYear(2040);
console.log(futureDate); // 年を2040年に変更した結果を出力

日付の計算

日数の計算

2つの日付の間の日数を計算する関数を作成します。

const calcDaysPassed = (date_1, date_2) =>
  Math.abs(date_2 - date_1) / (1000 * 60 * 60 * 24);

console.log(calcDaysPassed(new Date(2035, 3, 4), new Date(2035, 8, 2))); // 151日

この関数は、2つの日付の差をミリ秒で計算し、日数に変換します。

日時の国際化

国際化された日時の表示

Intl.DateTimeFormatを使用して、ロケールに応じた日時のフォーマットを行います。

const nowTime = new Date();

const timeUS = new Intl.DateTimeFormat("en-US").format(nowTime);
const timeJP = new Intl.DateTimeFormat("ja-JP").format(nowTime);

console.log(timeUS); // 米国形式の日時を出力
console.log(timeJP); // 日本形式の日時を出力

タイマーの使用

setTimeoutの使用

指定した時間後に関数を実行するためのsetTimeoutの使い方です。

setTimeout(() => console.log("ほらよ。ピザだ🍕"), 3000);
console.log("3秒後にピザを与えてやろう🍕");

const pizzaIngredients = ["ペペロニ", "カマンベールチーズ"];
const pizzTimer = setTimeout(
  (ing_1, ing_2) => console.log(`${ing_1}と${ing_2}のピザだよ！🍕`),
  3000,
  ...pizzaIngredients
);

console.log(`ピザを3秒後にお届けするよ🍕`);

if (pizzaIngredients.includes("ブルーチーズ")) clearTimeout(pizzTimer);

このコードでは、指定した時間後にメッセージを表示する方法や、特定の条件でタイマーをキャンセルする方法を示しています。

まとめ

この記事では、JavaScriptにおける日時操作の基本、日付の操作方法、国際化された日時の表示方法、そしてタイマーの使用方法について詳しく解説しました。これらの知識を活用することで、日常的なプログラミング作業がより効率的になり、より高度な日時操作が可能になります。ぜひ、この記事で学んだことを実際のプロジェクトで活用してみてください。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！