カテゴリ: JavaScript 更新日: 2025/12/27

JavaScriptの日時操作でよくあるエラーとその解決方法!初心者向けガイド

JavaScriptの日時操作でよくあるエラーとその解決方法
JavaScriptの日時操作でよくあるエラーとその解決方法

先生と生徒の会話形式で理解しよう

生徒

「JavaScriptで日付を扱っていると、なぜか意図した日時と違う表示になることがあります。これはどうしてですか?」

先生

「それはよくあるエラーです。日時操作での誤りは、タイムゾーンや月のインデックス、文字列のフォーマットの違いが原因になっていることが多いです。」

生徒

「具体的にどんな間違いが起こるんですか?」

先生

「順番に見ていきましょう。エラーの種類とその解決方法を整理しておくと安心です。」

1. 月のインデックスの勘違い

1. 月のインデックスの勘違い
1. 月のインデックスの勘違い

JavaScriptのDateオブジェクトでは、月は0から始まります。つまり1月は0、12月は11です。初心者は「11月は11」と覚えがちですが、実際には11月は10になります。


// 誤り例
const date = new Date(2025, 11, 18); // 11月ではなく12月になる
console.log(date.toString());

// 修正例
const correctDate = new Date(2025, 10, 18); // 10が11月
console.log(correctDate.toString());

Wed Dec 18 2025 00:00:00 GMT+0900 (日本標準時)
Tue Nov 18 2025 00:00:00 GMT+0900 (日本標準時)

月の数え方を間違えると、意図しない月が表示されるので注意が必要です。

2. タイムゾーンによる誤差

2. タイムゾーンによる誤差
2. タイムゾーンによる誤差

JavaScriptのDateは内部的にはUTC(協定世界時)で保持され、画面に表示するときにローカルタイムに変換されます。そのため、異なるタイムゾーンで確認すると時間がずれることがあります。


const utcDate = new Date(Date.UTC(2025, 10, 18, 15, 0, 0));
console.log("UTC表示:", utcDate.toUTCString());
console.log("ローカル表示:", utcDate.toString());

UTC表示: Tue, 18 Nov 2025 15:00:00 GMT
ローカル表示: Tue Nov 18 2025 24:00:00 GMT+0900 (日本標準時)

タイムゾーン差を意識して、toUTCString()toLocaleString()を活用しましょう。

3. 無効な日付(Invalid Date)の生成

3. 無効な日付(Invalid Date)の生成
3. 無効な日付(Invalid Date)の生成

不正な値を渡すと、Invalid Dateが返ってきます。例えば月が13や日が32などです。


// 無効な日付
const invalidDate = new Date(2025, 12, 32);
console.log(invalidDate.toString());

// 有効に修正
const validDate = new Date(2025, 11, 31);
console.log(validDate.toString());

Invalid Date
Wed Dec 31 2025 00:00:00 GMT+0900 (日本標準時)

必ず正しい範囲の値を設定しましょう。

4. 文字列からのDate生成の注意点

4. 文字列からのDate生成の注意点
4. 文字列からのDate生成の注意点

文字列からDateを作ると、ブラウザによって解釈が異なることがあります。ISO形式(YYYY-MM-DDTHH:mm:ss)で渡すのが安全です。


// NG: ブラウザ依存
const strDate = new Date("11/18/2025 10:00:00");
console.log(strDate.toString());

// OK: ISO形式
const isoDate = new Date("2025-11-18T10:00:00Z");
console.log(isoDate.toUTCString());

Tue Nov 18 2025 19:00:00 GMT+0900 (日本標準時)
Tue, 18 Nov 2025 10:00:00 GMT

ISO形式を使うことで、どのブラウザでも安定して日時を扱えます。

5. 日時演算の注意点

5. 日時演算の注意点
5. 日時演算の注意点

加算や減算を行うときに、月末やうるう年を意識せずに計算すると誤差が出ます。setDate()setMonth()を使うと、自動で調整してくれます。


// 31日から1日加算
const d = new Date(2025, 0, 31);
d.setDate(d.getDate() + 1);
console.log(d.toString()); // 自動で2月1日になる

Sat Feb 01 2025 00:00:00 GMT+0900 (日本標準時)

こうした便利なメソッドを使うことで、手動で計算するよりも安全に日時操作が可能です。

6. まとめ的なポイント

6. まとめ的なポイント
6. まとめ的なポイント
  • 月は0から始まることを意識する
  • タイムゾーン差を考慮してtoUTCString()toLocaleString()を使用する
  • 文字列から日付を作る場合はISO形式を使う
  • 加算・減算はsetDate()setMonth()で安全に行う
  • Invalid Dateを作らないように正しい値を設定する
カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptの正規表現で繰り返し指定(* + ? {n,m})を学ぼう
New2
TypeScript
TypeScriptとESNextの連携を完全ガイド!最新機能を使いこなす設定と対応法
New3
JavaScript
JavaScriptの正規表現で任意の1文字(.)や文字クラスを使う方法
New4
TypeScript
TypeScriptで非同期イテレーター(for await of)を活用する
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptの日時操作Tips!実務で役立つテクニック集
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.4
Java&Spring記事人気No4
TypeScript
TypeScriptのif文の使い方を完全ガイド!初心者でもわかる条件分岐
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptでESLintとPrettierを導入!コード整形ルールを自動で統一する方法
No.6
Java&Spring記事人気No6
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptの配列の要素にアクセスする方法(インデックス番号の使い方)
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptの型を明確に設計するコツとチーム開発の指針