JavaScriptで日付文字列を扱う場面はよくあります。たとえば「2024-04-01」という文字列を比較・演算したい場合や、APIから受け取った日付文字列を表示用にフォーマットしたい場合です。
この記事で学べること：文字列→Date変換の3つの方法・タイムゾーン問題の回避・ブラウザ差異への対処
new Date()に文字列を渡す
もっとも簡単な方法はnew Date("日付文字列")です。
// ISO 8601形式（推奨）
const d1 = new Date("2024-04-01");
console.log(d1); // Mon Apr 01 2024 09:00:00 GMT+0900（JST）
// 日時も指定できる
const d2 = new Date("2024-04-01T15:30:00");
console.log(d2.getFullYear()); // 2024
console.log(d2.getMonth()); // 3 ※0始まりなので4月=3
console.log(d2.getDate()); // 1
注意：タイムゾーン問題
new Date("2024-04-01")はISO 8601の日付のみ指定だとUTCとして解釈されます。JST（UTC+9）環境では前日の09:00になる可能性があります。時刻も含めた"2024-04-01T00:00:00"（ローカル時刻）または"2024-04-01T00:00:00+09:00"（タイムゾーン指定）を使うと安全です。Date.parse()でタイムスタンプを取得する
Date.parse()は日付文字列をミリ秒（Unixタイムスタンプ）に変換します。new Date()との組み合わせで使います。
const ts = Date.parse("2024-04-01T00:00:00+09:00");
console.log(ts); // 1711897200000（ミリ秒）
const d = new Date(ts);
console.log(d.toISOString()); // "2024-03-31T15:00:00.000Z"（UTC）
// 解析失敗時はNaN
const bad = Date.parse("invalid-date");
console.log(isNaN(bad)); // true → エラーチェックが必要
使いどころ：日付の大小比較や差分計算にはDate.parse()でミリ秒に変換するか、Dateオブジェクトを直接比較（
>、<、-）するのが便利です。様々な形式の文字列をパースする
API等から受け取る日付は様々な形式があります。形式が決まっている場合は手動でパースすると確実です。
// "2024/04/01" 形式をパース
function parseJpDate(str) {
const [y, m, d] = str.split("/").map(Number);
return new Date(y, m - 1, d); // 月は0始まり
}
const d = parseJpDate("2024/04/01");
console.log(d.toLocaleDateString("ja-JP")); // "2024/4/1"
// "20240401" 形式をパース
function parseCompact(str) {
const y = str.slice(0, 4);
const m = str.slice(4, 6);
const day = str.slice(6, 8);
return new Date(`${y}-${m}-${day}T00:00:00`);
}
変換後のDate操作
Date型に変換した後は、以下のメソッドで情報を取り出せます。
const d = new Date("2024-04-01T10:30:00");
console.log(d.getFullYear()); // 2024
console.log(d.getMonth() + 1); // 4 ※getMonthは0始まりなので+1
console.log(d.getDate()); // 1
console.log(d.getHours()); // 10
console.log(d.getMinutes()); // 30
// フォーマット済み文字列
console.log(d.toLocaleDateString("ja-JP")); // "2024/4/1"
console.log(d.toISOString()); // "2024-04-01T01:30:00.000Z"（UTC変換）
よくある質問（FAQ）
Q. new Date()が"Invalid Date"を返すのはなぜですか？
A. 日付文字列のフォーマットが解析できない場合にInvalid Dateになります。"2024/04/01"はISOではないためブラウザによって挙動が異なります。確実に動作させるには"2024-04-01"（ISO形式）または手動パースを使ってください。
Q. 2つのDate型の日付の差分（日数）を求めるにはどうすればよいですか？
A. Dateオブジェクト同士を引き算するとミリ秒差が得られます。
const diffDays = (d2 - d1) / (1000 * 60 * 60 * 24);で日数差が計算できます。Q. dayjs・date-fnsなどのライブラリを使うべき場合はありますか？
A. 複雑なタイムゾーン処理・ロケール対応・フォーマット変換が多い場合はdayjsやdate-fnsを使うと便利です。シンプルな日付変換や比較だけなら標準のDateオブジェクトで十分です。
まとめ
- new Date("ISO文字列")：最も基本的。ISO 8601形式が確実
- Date.parse()：ミリ秒で比較・演算したい場面に便利
- 手動パース：日本式（yyyy/mm/dd）など固定フォーマットに確実
- 日付のみ指定のISO文字列はUTC解釈されるためタイムゾーンに注意
