日付と時刻をJavaScriptで扱おう

公開日時や期限を扱うには、表示用の文字列と比較可能な日時データを区別します。

今回は、記事の公開日時と受付期限を表示し、現在時刻と比較して状態を切り替える画面を作ります。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

日時を作成・比較・表示する

Dateを作る

const now = new Date();
const publishedAt = new Date('2026-08-02T10:00:00+09:00');

console.log(now);
console.log(publishedAt);

日時文字列ではタイムゾーンを明示します。日付だけの文字列は環境によって解釈を誤りやすいため注意します。

日時を比較する

const isPublished = publishedAt.getTime() <= now.getTime();
console.log(isPublished);

getTime()は1970年1月1日からの経過ミリ秒を返します。

日本語形式で表示する

const formatter = new Intl.DateTimeFormat('ja-JP', {
  dateStyle: 'long',
  timeStyle: 'short',
  timeZone: 'Asia/Tokyo',
});

console.log(formatter.format(publishedAt));

固定形式を文字列の切り貼りで作るより、Intl.DateTimeFormatを利用すると地域と言語に合わせられます。

日時を扱うときの設計

日時処理の注意点

サーバーとブラウザでタイムゾーンが異なる場合があります。保存は基準となるタイムゾーン、表示は利用者向けタイムゾーンという役割を決めます。

受付期限を判定する

HTMLへ表示場所を作る

<article>
  <h1>JavaScript勉強会</h1>
  <p>受付期限：<time id="deadline"></time></p>
  <p id="entry-status" aria-live="polite"></p>
</article>

日時にはtime要素を使えます。機械が読める日時をdatetime属性へ、利用者向けの文章を本文へ設定します。

現在時刻と期限を比較する

const deadlineElement = document.querySelector('#deadline');
const entryStatus = document.querySelector('#entry-status');
const deadline = new Date('2026-08-31T18:00:00+09:00');

const formatter = new Intl.DateTimeFormat('ja-JP', {
  dateStyle: 'long',
  timeStyle: 'short',
  timeZone: 'Asia/Tokyo',
});

deadlineElement.dateTime = deadline.toISOString();
deadlineElement.textContent = formatter.format(deadline);

const now = new Date();
const isOpen = now.getTime() <= deadline.getTime();

entryStatus.textContent = isOpen
  ? '現在、申し込みを受け付けています。'
  : '申し込みの受付は終了しました。';

toISOString()はUTCのISO 8601形式を返します。画面表示には日本時間のformatterを、比較には経過ミリ秒を使っています。

Dateで間違えやすい点

月は0から始まる書き方がある

const date = new Date(2026, 7, 2);

数値を個別に渡す場合、月は0が1月、7が8月です。読み間違いを避けるには、タイムゾーンを含むISO形式の文字列を使う方法があります。

存在しない日付が自動補正される

const date = new Date(2026, 1, 31);
console.log(date);

2月31日はエラーにならず、翌月へ繰り越されます。利用者が入力した年月日の妥当性は、Dateを作れたかだけで判断しないでください。

日数を固定ミリ秒で計算できない場合がある

夏時間のある地域では一日が常に24時間とは限りません。締切などの業務ルールでは、タイムゾーンと「暦日」「経過時間」のどちらを扱うかを明確にします。

まとめ

Dateで日時を保持し、getTime()で比較し、Intl.DateTimeFormatで表示します。次の記事ではURLと検索条件を扱います。