TypeScript - 日付オブジェクト:入門ガイド

こんにちは、未来のプログラミングスーパースター!今日は、TypeScriptにおける日付の世界に楽しい旅に出かけます。これまでにコードを書いたことがない方でも心配しないでください。私はあなたの親切なガイドとして、ステップバイステップで進めていきます。このチュートリアルの終わりまでに、プロのように日付を操作できるようになるでしょう!

TypeScript - Date Object

日付オブジェクトとは?

本題に入る前に、まず日付オブジェクトとは何かについて話しましょう。TypeScript(およびJavaScript)では、日付オブジェクトは特定の瞬間を表します。これは、特定の日時のスナップショットのようなもので、プログラム内で操作や使用ができます。

デジタルクロックのように、過去、現在、未来いずれの時間に設定できるものと思ってください。すごいですね?

文法:日付オブジェクトの作成

それでは、TypeScriptで日付オブジェクトを作成する方法を見ていきましょう。いくつかの方法がありますので、それぞれの例を示します。

1. 現在の日時

現在の日時で日付オブジェクトを作成するには、new Date()コンストラクタを使用して引数を省略します。

let currentDate = new Date();
console.log(currentDate);

このコードを実行すると、以下のような出力が得られます:

2023-06-15T12:30:45.678Z

これは標準化された形式で現在の日時が表示されています。

2. 特定の日時

特定の日時で日付オブジェクトを作成することもできます。いくつかの方法があります:

a. 日付文字列を使用する

let christmas = new Date("December 25, 2023 00:00:00");
console.log(christmas);

これは以下のように出力されます:

2023-12-25T00:00:00.000Z

b. 分けたパラメータを使用する

let newYear = new Date(2024, 0, 1, 0, 0, 0);
console.log(newYear);

これは以下のように出力されます:

2024-01-01T00:00:00.000Z

月は1月が0で表されることに注意してください。JavaScriptおよびTypeScriptでは、月は0から始まるインデックスで表されます。これは初心者がよく間違えるポイントです。

c. エポックからのミリ秒を使用する

エポック(1970年1月1日)からのミリ秒で日付を作成することもできます:

let someDate = new Date(1687012345678);
console.log(someDate);

これはエポックからのミリ秒数に対応する日時を出力します。

日付オブジェクトの操作

日付オブジェクトを作成したので、それでできることを見ていきましょう。

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

日付オブジェクトには、日付の異なるコンポーネントを取得するためのメソッドがいくつかあります:

let today = new Date();

console.log("全年:", today.getFullYear());
console.log("月:", today.getMonth());
console.log("日:", today.getDate());
console.log("曜日:", today.getDay());
console.log("時間:", today.getHours());
console.log("分:", today.getMinutes());
console.log("秒:", today.getSeconds());

これは以下のような出力を表示する可能性があります:

全年: 2023
月: 5
日: 15
曜日: 4
時間: 12
分: 45
秒: 30

getMonth()は0インデックスの月を返すため、5は6月を意味します。

日付のコンポーネントを設定する

日付のコンポーネントを取得するだけでなく、設定することもできます:

let futureDate = new Date();

futureDate.setFullYear(2025);
futureDate.setMonth(11);  // 12月
futureDate.setDate(31);
futureDate.setHours(23);
futureDate.setMinutes(59);
futureDate.setSeconds(59);

console.log(futureDate);

これは2025年12月31日23時59分59秒に設定されます。

日付のフォーマット

TypeScript(およびJavaScript)には、日付をフォーマットするためのいくつかのビルトインメソッドがあります:

let event = new Date("July 4, 2023 12:00:00");

console.log(event.toDateString());
console.log(event.toTimeString());
console.log(event.toLocaleDateString());
console.log(event.toLocaleTimeString());
console.log(event.toISOString());

これは以下のような出力を表示します:

Tue Jul 04 2023
12:00:00 GMT+0000 (協定世界時)
7/4/2023
12:00:00 PM
2023-07-04T12:00:00.000Z

日付の算術

日付オブジェクトの素晴らしい機能の1つは、それに数学的な操作を行えることです。いくつかの例を見ていきましょう:

日を追加する

let today = new Date();
let nextWeek = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);

console.log("今日:", today);
console.log("来週:", nextWeek);

これは現在の日に7日を追加します。7(日)× 24(時間)× 60(分)× 60(秒)× 1000(ミリ秒)で1週間のミリ秒数を計算します。

日付を引く

二つの日付の差を求めることもできます:

let start = new Date("March 1, 2023");
let end = new Date("June 15, 2023");

let difference = end.getTime() - start.getTime();
let days = Math.floor(difference / (24 * 60 * 60 * 1000));

console.log(` ${days} 日は ${start.toDateString()} と ${end.toDateString()} の間です`);

これは2023年3月1日と2023年6月15日之间的日数を計算します。

結論

おめでとうございます!TypeScriptにおける日付オブジェクトの世界への初めてのステップを踏み出しました。日付の作成、日付のコンポーネントの取得と設定、日付のフォーマット、そして日付の算術について触れました。

日付を操作するのは時々難しい場合がありますが、特に異なるタイムゾーンや夏時間を扱う際には注意が必要です。しかし、練習を重ねることで、よりリラックスして使いこなすことができるようになります。

以下に、私たちがカバーした主なメソッドの表を示します:

メソッド 説明
new Date() 新しい日付オブジェクトを作成します
getFullYear() 年(4桁)を取得します
getMonth() 月(0-11)を取得します
getDate() 月の日(1-31)を取得します
getDay() 曜日(0-6)を取得します
getHours() 時間(0-23)を取得します
getMinutes() 分(0-59)を取得します
getSeconds() 秒(0-59)を取得します
setFullYear() 年を設定します
setMonth() 月を設定します
setDate() 月の日を設定します
setHours() 時間を設定します
setMinutes() 分を設定します
setSeconds() 秒を設定します
toDateString() 日付部分を人間が読める形式で返します
toTimeString() 時間部分を人間が読める形式で返します
toLocaleDateString() 日付部分をロケールの慣習に基づいて返します
toLocaleTimeString() 時間部分をロケールの慣習に基づいて返します
toISOString() ISO形式の日付を返します

練習を続け、コードを書き続け、最も重要なのは、楽しむことです!プログラミングの世界は满了な可能性に満ちており、日付のマスターは始まりに過ぎません。ハッピーコーディング!

Credits: Image by storyset