【JS応用|初心者向け】JavaScriptのDateオブジェクトを使いこなそう!現在時刻の取得からフォーマット変換まで

なぜ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オブジェクトで基本を掴み、必要に応じてライブラリの導入を検討してみてください。

タイトルとURLをコピーしました