カテゴリ: 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
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう