JavaScript - 日付フォーマット：初心者向けガイド

こんにちは、JavaScript開発者を目指している皆さん！今日は、JavaScriptにおける日付フォーマットの魅力あふる世界に飛び込みます。コードを一行も書いたことがない方も心配しないでください - この旅におけるあなたの親切なガイドとして、私があなたを案内します。これは私が数年間にわたって多くの生徒を指導してきた経験から来ています。では、コーヒー（またはあなたが好むお茶）を手に取り、始めましょう！

日付フォーマットとは？

コードに飛び込む前に、まず日付フォーマットとは何かについて話しましょう。特定の瞬間を表す異なる方法たちを思い浮かべてください。あなたが「2023年4月1日」や「4/1/23」と言って同じ日を意味するのと同様に、コンピュータも日付を表現する様々な方法を持っています。

JavaScriptでは、日付と時間を扱うための内蔵のDateオブジェクトがあります。まるでコードの中に超智能カレンダーを持っているようなものです！

JavaScriptにおける一般的な日付フォーマット

では、よく遭遇する日付フォーマットをいくつか見てみましょう：

1. ISO日付フォーマット

これは国際標準として使用されるフォーマットです。以下のような形をしています：「YYYY-MM-DD」。

let today = new Date();
console.log(today.toISOString().split('T')[0]);

この例では、new Date()は現在の日時のための日付オブジェクトを作成します。それをISOフォーマットに変換し、日付部分だけを取得するために分割します。2023年4月1日にこれを実行すると、「2023-04-01」と表示されます。

2. 短い日付フォーマット

これはよりコンパクトなフォーマットです：「MM/DD/YYYY」。

let today = new Date();
console.log(today.toLocaleDateString('en-US'));

これは「4/1/2023」と 같い出力をします（2023年4月1日の場合）。

3. 長い日付フォーマット

このフォーマットでは月をスペルアウトします：「Month DD, YYYY」。

let today = new Date();
console.log(today.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }));

これは「Saturday, April 1, 2023」と 같い出力をします。

日付オブジェクトの作成

いくつかのフォーマットを見たので、日付オブジェクトを異なる方法で作成する方法を見てみましょう：

1. 現在の日時

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

これは現在の瞬間のための日付オブジェクトを作成します。

2. 特定の日時

let birthday = new Date('1990-05-15T13:30:00');
console.log(birthday);

これは1990年5月15日13時30分のための日付オブジェクトを作成します。

3. 単独のコンポーネントを使用

let christmas = new Date(2023, 11, 25); // 注意：月は0から始まります
console.log(christmas);

これは2023年12月25日のための日付オブジェクトを作成します（JavaScriptでは、月は0からインデックスされていますので、11は12月を表します）。

日付の扱い方

日付の作成方法を知ったので、いくつかの一般的な操作を見てみましょう：

1. 日付のコンポーネントを取得

let today = new Date();
console.log("Year:", today.getFullYear());
console.log("Month:", today.getMonth() + 1); // +1は月が0インデックスであるため
console.log("Day:", today.getDate());
console.log("Hour:", today.getHours());
console.log("Minute:", today.getMinutes());
console.log("Second:", today.getSeconds());

これは現在の日時の各コンポーネントを出力します。

2. 日付のフォーマット

JavaScriptは日付をフォーマットするためのいくつかのメソッドを提供しています：

let date = new Date('2023-04-01T12:00:00');

console.log(date.toDateString()); // "Sat Apr 01 2023"
console.log(date.toTimeString()); // "12:00:00 GMT+0000 (Coordinated Universal Time)"
console.log(date.toLocaleString()); // "4/1/2023, 12:00:00 PM"
console.log(date.toLocaleDateString()); // "4/1/2023"
console.log(date.toLocaleTimeString()); // "12:00:00 PM"

これらのメソッドは、同じ日付の異なる表現を提供します。

日付メソッドの表

以下は、いくつかの一般的なDateメソッドの表です：

メソッド	説明	例
getFullYear()	年（4桁）を取得	date.getFullYear() // 2023
getMonth()	月（0-11）を取得	date.getMonth() // 3 (4月)
getDate()	月の日（1-31）を取得	date.getDate() // 1
getDay()	曜日（0-6）を取得	date.getDay() // 6 (土曜日)
getHours()	時（0-23）を取得	date.getHours() // 12
getMinutes()	分（0-59）を取得	date.getMinutes() // 0
getSeconds()	秒（0-59）を取得	date.getSeconds() // 0
toDateString()	日付を読みやすい文字列に変換	date.toDateString() // "Sat Apr 01 2023"
toTimeString()	時間を読みやすい文字列に変換	date.toTimeString() // "12:00:00 GMT+0000 (Coordinated Universal Time)"

結論

そして、皆さん！JavaScriptの日付フォーマットの世界を旅しました。日付の扱いは最初は難しいように思えるかもしれませんが、練習を重ねればすぐにプロのように扱えるようになります。

いつも私の生徒たちに言っているように、プログラミングの概念をマスターする鍵は実験することです。これらの例を試し、修正し、何が起きるかを観察してください。間違うことを恐れずに - そのすることが最も良い学びとなります！

コードを書き続け、学び続け、そして最も重要なのは、楽しむことです。知らず知らずのうちに、あなたが日付フォーマットについて友人に説明する側になるでしょう（彼らが聞きたいかどうかは別として）！

Credits: Image by storyset