【JavaScript入門】Dateオブジェクト

　JavaScript の Date オブジェクト は「1970‑01‑01 00:00:00 UTC からの経過ミリ秒」を内部時計に持ち、現在日時の取得・任意日時の生成・各国ロケール向けのフォーマットをワンストップで扱えます。ここでは 生成 → フォーマット → タイムゾーン の流れで基本 API を整理し、ブラウザで動くサンプルを通じて挙動を確認します。

１．Date オブジェクトの生成方法

構文例意味補足
new Date()今この瞬間PC 時計依存
new Date(ms)基準時から ms ミリ秒後数値 (整数)
new Date(y, m, d, h, M, s, ms)年月日時分秒月 m は 0‑11
new Date('YYYY‑MM‑DDTHH:mm:ss.sssZ')ISO 8601 文字列末尾 Z は UTC
Date.UTC(y, m, d, h, M, s, ms)UTC ミリ秒値 (静的)返り値は数値

例 ― 1999‑01‑01 00:00 (JST) を 3 通りで生成

const d1 = new Date(1999, 0, 1);                 // ローカル (JST)
const d2 = new Date('1999-01-01T00:00:00+09:00'); // ISO 8601
const d3 = new Date(Date.UTC(1998, 11, 31, 15));  // UTC ミリ秒

d1.toISOString() と d2.toISOString() は同じ結果を返します。

２．代表的フォーマットメソッド

メソッド戻り値特徴
toISOString()ISO 8601 (UTC)例: 2025-04-06T12:34:56.789Z
toUTCString()人間可読 UTC例: Sun, 06 Apr 2025 12:34:56 GMT
toString()ローカルタイム文字列OS ロケール依存
toLocaleString([loc, opt])ロケール書式可変フォーマット
toDateString() / toTimeString()日付のみ / 時刻のみローカル
valueOf() / getTime()数値 (ms)どちらも同じ
getTimezoneOffset()UTC との差 (分, 符号は 負=東 )JST は ‑540

３．サンプル ― 世界時計ウィジェット

ファイル名： world_clock.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>世界時計デモ</title>
<style>
body { font-family:sans-serif; }
table { border-collapse:collapse; }
th,td { padding:6px 10px; border:1px solid #ccc; text-align:left; }
caption { margin:0.5rem 0; font-weight:bold; }
</style>
</head>
<body>
<table id="tbl">
  <caption>🌏 現在時刻 (1 秒ごとに更新)</caption>
  <thead><tr><th>地域</th><th>ISO 8601</th><th>ローカル表示</th></tr></thead>
  <tbody></tbody>
</table>

<script>
(() => {
  // 表示したいタイムゾーン
  const zones = [
    { label:'東京',   tz:'Asia/Tokyo' },
    { label:'ロンドン', tz:'Europe/London' },
    { label:'ニューヨーク', tz:'America/New_York' },
    { label:'UTC',    tz:'UTC' }
  ];

  // tbody 生成
  const tbody = document.querySelector('#tbl tbody');
  zones.forEach(z => {
    const tr = document.createElement('tr');
    tr.innerHTML = `<th>${z.label}</th><td class="iso"></td><td class="loc"></td>`;
    tbody.appendChild(tr);
    z.row = tr;            // 行要素を保持
  });

  // フォーマッタをキャッシュ
  const fmtCache = {};
  function fmtDate(date, tz) {
    if (!fmtCache[tz]) {
      fmtCache[tz] = new Intl.DateTimeFormat('ja-JP', {
        timeZone: tz,
        year:'numeric', month:'2-digit', day:'2-digit',
        hour:'2-digit', minute:'2-digit', second:'2-digit'
      });
    }
    return fmtCache[tz].format(date);
  }

  // 1 秒ごとに更新
  setInterval(() => {
    const now = new Date();
    zones.forEach(z => {
      z.row.querySelector('.iso').textContent  = now.toISOString();
      z.row.querySelector('.loc').textContent  = fmtDate(now, z.tz);
    });
  }, 1000);
})();
</script>
</body>
</html>

ブラウザでの動き

  • ページを開くと 4 地域の現在時刻が 1 秒ごとに更新
  • toISOString() 列は全地域で共通 (UTC)
  • ローカル列は Intl.DateTimeFormat でタイムゾーン別にフォーマット

プログラム解説

ポイント説明
new Date() で毎秒現在時刻を取得し再描画画面負荷が低い
Intl.DateTimeFormatES2020 以降の標準。timeZone オプションで簡単に多地域対応
キャッシュ fmtCache同一タイムゾーン用フォーマッタを再利用し高速化
toISOString()比較用に常に UTC 基準で表示

４．タイムゾーンとミリ秒値の扱い

  • 演算は数値 (ms) で行う と時差に影響されず安全 const oneDay = 24 * 60 * 60 * 1000; const tomorrow = new Date(Date.now() + oneDay);
  • 表示はフォーマッタに任せる (toLocaleString, Intl 系)
  • 夏時間 (DST) も Intl.DateTimeFormat が自動補正

まとめ

  • 生成 API を 4 パターン押さえれば大半の日時は作れる
  • フォーマット系メソッド は「ISO 用 (toISOString)」「ローカル簡易 (toString)」「ロケール厳密 (toLocaleString / Intl)」の 3 カテゴリで覚える
  • 演算はミリ秒値で、表示はフォーマッタで が実践的な鉄則

　まずはサンプルを開き、ブラウザの開発ツール Console で new Date(0).toUTCString() などを試しながら、UTC とローカルの差異を体感してみましょう。