JavaScriptでよく使う構文まとめ -日付編-

Webアプリやサービスでよく使われるJavaScriptですが、日付の扱い方に少しクセがありますよね。今回はそんなクセを整理しつつ、よく使うクラスや構文をまとめてみました。

JavaScriptが日付を扱いにくい理由

JavaScriptの日付操作は、PythonやRubyなどほかの言語と比較すると扱いにくいと感じることが多いです。主に以下の3つの理由が扱いにくいと感じる原因であると考えています。

Dateオブジェクトの仕様が古い
　JavaScriptのDateオブジェクトは1997年のECMAScript 1で導入されたもので、仕様が古いです。

月のインデックスが0から始まる
　多くのプログラミング言語では、月のインデックスは1から始まることが一般的ですが、JavaScriptのDateオブジェクトでは月のインデックスが0から始まる（1月が0、12月が11）ため、混乱しやすい仕様になっています。

フォーマット機能が充実していない
　多くの言語には日付フォーマットを簡単に変換する関数やメソッドがありますが、JavaScriptには柔軟なフォーマット変換メソッドが組み込まれていません。そのため、Intl.DateTimeFormat や toISOString(), さらには自分で年月日をそれぞれ取得しフォーマット用の関数を作成することが一般的です。Webアプリを開発していくうえで、個人的にはこれが一番JavaScriptの日付操作のクセだと感じます。

Dateオブジェクトとは

JavaScriptで日付や時刻を扱うときに使用する組み込みオブジェクトがDateオブジェクトです。現在の日時を取得したり、特定の日付を計算したり、タイムスタンプを操作したりする際に使います。これが少し特殊で、月が0から始まったり、ローカル時間とUTC（協定世界時）の違いを考慮する必要があるため他の言語よりクセが強いと感じることが多いです。

Dateオブジェクトの基本的な使い方

それでは、具体的な使用例を見ていきましょう。

現在の日付と時刻を取得

const now = new Date();
console.log(now); // Fri Feb 14 2025 17:49:41 GMT+0900 (日本標準時)

この new Date() は、オブジェクトを作成した時点のローカル時間の日時を表します。

特定の日付を設定して取得

const specificDate = new Date(2025, 1, 14); // 2025年2月14日の日付を設定する
console.log(specificDate); // Fri Feb 14 2025 00:00:00 GMT+0900 (日本標準時)

new Date(年, 月, 日) の形式で特定の日付を指定できます。ただし、月のインデックスは 0 から始まるため月の引数には取得したい月 - 1の値を設定する必要があります。また、以下の表記でも特定の日付を取得することができます。

// ISO 8601 形式の文字列で指定
const date1 = new Date("2025-2-14"); //"2025-02-14"も可 
console.log(date1); // Fri Feb 14 2025 00:00:00 GMT+0900 (日本標準時)

// 日時を含めた文字列で指定
const date2 = new Date("2025-02-14T12:00:00"); // YYYY-MM-DDTHH:mm:ss形式のみ
console.log(date2); // Fri Feb 14 2025 12:00:00 GMT+0900 (日本標準時)

new Date("2024/2/14")の形式でも取得することはできますが、JavaScriptが日付としてではなく数値演算の結果を解釈することがあるため、new Date(YYYY, MM, DD) または new Date("YYYY-MM-DD") を使うことが一般的です。

よく使うメソッド

次に、よく使うメソッドについてまとめます。

Dateオブジェクトには、日付や時刻を取得するメソッドがいくつか用意されています。

const date = new Date();
console.log(date.getFullYear()); // 年（例: 2025）
console.log(date.getMonth() + 1); // 月（+1しないと正しい月にならない）
console.log(date.getDate()); // 日
console.log(date.getHours()); // 時間
console.log(date.getMinutes()); // 分
console.log(date.getSeconds()); // 秒

このように、各要素を個別に取得することができます。

日付のフォーマット

続いて、日付のフォーマットについてまとめます。
JavaScriptには toISOString() メソッドがあり、ISO 8601形式の文字列を取得できます。

const date = new Date();
console.log(date.toISOString()); // 例: "2025-02-14T12:00:00.000Z"

また、Intl.DateTimeFormat を使うことで日本の一般的な形式（YYYY/MM/DD HH:mm:ss）でのフォーマットが可能です。

const formatter = new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric',      // 西暦4桁（例: 2025）
  month: '2-digit',     // 2桁の月（例: 02）
  day: '2-digit',       // 2桁の日（例: 14）
  hour: '2-digit',      // 2桁の時間（例: 15）
  minute: '2-digit',    // 2桁の分（例: 30）
  second: '2-digit',    // 2桁の秒（例: 45）
  hour12: false         // 24時間表記（true にすると AM/PM 表記になる）
});
console.log(formatter.format(new Date())); // 2025/02/14 15:30:45

日付の計算

最後に、よく使う日付の計算についてまとめます。

1日後の日付を求める

const today = new Date();     // Fri Feb 14 2025 18:30:34 GMT+0900 (日本標準時)
today.setDate(today.getDate() + 1);
console.log(today);           // Sat Feb 15 2025 18:30:34 GMT+0900 (日本標準時)

同様にsetMonth() を使用すると現在の日付から1か月後の日付を取得でき、setFullYear() を使用すると現在の日付から1年後の日付を取得できます。

const today1 = new Date();    // Fri Feb 14 2025 18:32:23 GMT+0900 (日本標準時)
today1.setMonth(today1.getMonth() + 1);
console.log(today1);          // Fri Mar 14 2025 18:32:23 GMT+0900 (日本標準時)
const today2 = new Date();    // Fri Feb 14 2025 18:33:44 GMT+0900 (日本標準時)
today2.setFullYear(today2.getFullYear() + 1);
console.log(today2);          // Sat Feb 14 2026 18:33:44 GMT+0900 (日本標準時)

二つの日付の差を計算する

const date1 = new Date('202502-14');
const date2 = new Date('2025-02-10');
const diffTime = date1 - date2;
const diffDays = diffTime / (1000 * 60 * 60 * 24);
console.log(diffDays); // 4（日数の差）

このようにして、2つの日付の間隔を計算することも可能です。

まとめ

JavaScriptの日付操作は他の言語と比べてクセがありますが、基本的な使い方を押さえておけば問題なく扱うことができます。

• 月のインデックスが 0 から始まるので注意が必要

• toISOString() や Intl.DateTimeFormat を活用するとフォーマットがしやすい

• 日付計算は setDate() や getTime() を活用すると便利

日付操作に慣れておくと、Webアプリ開発での実装がスムーズになります。ぜひ活用してみてください！

参考　Date - JavaScript | MDN