なぜDateオブジェクトが重要なのか
Webサイトやアプリケーションを作っていると、「今の時間を表示したい」「投稿日時を計算したい」といった場面に必ず遭遇します。JavaScriptのDateオブジェクトは、時間や日付を扱うための標準機能です。これを正しく理解していないと、日付のズレやバグの原因になります。この記事では、初心者の方が迷いがちなポイントを整理して解説します。
基礎知識:Dateオブジェクトの仕組み
JavaScriptのDateオブジェクトは、内部的には「協定世界時(UTC)の1970年1月1日0時0分0秒からの経過ミリ秒数」で時間を管理しています。これを「タイムスタンプ」と呼びます。
私たちが普段目にする「年・月・日」の形式は、この数値をDateオブジェクトのメソッドを使って変換したものです。注意点として、月は「0」から始まる(1月が0、12月が11)というJavaScript特有の仕様があるため、慣れるまでは少し注意が必要です。
実装と解決策
現在の日時を取得するには、new Date()を使用します。これだけで、ブラウザが動いているPCの現在時刻を持ったオブジェクトが作成されます。そこから、年や月といった個別の値を取り出すには、getFullYear()やgetMonth()といったメソッドを利用します。
サンプルプログラム
以下のコードをコピーして、ブラウザのコンソールや、HTMLファイル内のscriptタグに貼り付けて動作を確認してみてください。
// 1. 現在の日時を取得
const now = new Date();
// 2. 年、月(0始まり)、日を取得
const year = now.getFullYear();
const month = now.getMonth() + 1; // 0から始まるので+1する
const date = now.getDate();
// 3. コンソールに表示
console.log(`今日は ${year}年 ${month}月 ${date}日 です。`);
// 4. 時・分・秒の取得
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
console.log(`現在の時刻は ${hours}時 ${minutes}分 ${seconds}秒 です。`);
// 5. 応用:指定した日付を作成する(例:2023年12月25日)
const christmas = new Date(2023, 11, 25); // 月は11を指定すると12月になる
console.log(`クリスマスは: ${christmas.toLocaleDateString()}`);
応用・注意点
現場でよくある失敗は、「月」の計算ミスです。先述した通り、getMonth()は0から11を返すため、そのまま表示するとユーザーに見せたい月とズレが生じます。必ず「+1」する習慣をつけましょう。
また、より複雑な日時計算(「3日後を求める」「タイムゾーンを扱う」など)が必要になった場合は、標準のDateオブジェクトだけでなく、Day.js や date-fns といった便利な外部ライブラリを検討することをお勧めします。これらを使うと、日付の加算やフォーマット変換が圧倒的に楽になります。まずは標準のDateオブジェクトで基本を掴み、必要に応じてライブラリの導入を検討してみてください。