2024年3月8日(金)2024年3月8日(金) 投稿者: iwbjp

You Don't Need JavaScript Date Library

JavaScriptの日付ライブラリは不要
日付をフォーマットする方法
日付に日にちを加算する
残りの日数を表示する
残りの日付をカウントダウンする
まとめ

JavaScriptの日付ライブラリは不要

JavaScriptの日付ライブラリは以下のようなものが存在します。

Moment.js
Day.js
date-fns
Luxon
js-Joda
Tempo

JavaScriptの日付ライブラリは日付のフォーマットや日にちの計算などに使用されているケースが多いですが、そのような簡単な処理だけなら日付ライブラリは不要な場合が多いです。

日付をフォーマットする方法

日本のWebサイトの場合、日付のフォーマットは YYYY/MM/DDまたは YYYY年M月D日の場合が多いです。

YYYY/MM/DDの場合はnew Intl.DateTimeFormatを使用すれば、以下のようにformatDate関数を作成できます。

function formatDate(date) {
  const formatter = new Intl.DateTimeFormat('ja-JP', {
    dateStyle: 'medium',
  })

  return formatter.format(date)
}

console.log(formatDate(new Date()))
// 例: 2024/03/08

時刻も表示させたい場合はtimeStyleを追加します。

function formatDate(date) {
  const formatter = new Intl.DateTimeFormat('ja-JP', {
    dateStyle: 'medium',
    timeStyle: 'short',
  })

  return formatter.format(date)
}

console.log(formatDate(new Date()))
// 例: 2024/03/08 12:34

new Intl.DateTimeFormatはタイムゾーンも設定できます。

function formatDate(date) {
  const formatter = new Intl.DateTimeFormat('ja-JP', {
    dateStyle: 'medium',
    timeStyle: 'medium',
    timeZone: 'Asia/Tokyo',
  })

  return formatter.format(date)
}

console.log(formatDate(new Date()))
// 2024/03/08 12:34:56

Intl.DateTimeFormat()を使用すればユーザーが使用しているタイムゾーンの取得もできます。

const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
console.log(timezone)
// Asia/Tokyo

YYYY年M月D日の場合はnew Intl.DateTimeFormatでは関数を作成できないので、以下のように年月日を取得してフォーマットします。

function formatDate(date) {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()

  return `${year}年${month}月${day}日`
}

console.log(formatDate(new Date()))
// 例: 2024年3月8日

数字が1桁の場合、先頭に0を追加したいときはpadStartを使用します。

function formatDate(date) {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const addZero = n => String(n).padStart(2, '0')

  return `${year}年${addZero(month)}月${addZero(day)}日`
}

console.log(formatDate(new Date()))
// 例: 2024年03月08日

日付に曜日を付けたい場合はgetDay()を追加して、以下のようにします。

function formatDate(date) {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const youbi = '日月火水木金土'.charAt(date.getDay())

  return `${year}年${month}月${day}日(${youbi})`;
}

console.log(formatDate(new Date()))
// 例: 2024年3月8日(金)

日付に日にちを加算する

日付に日数を加算するにはsetDateとgetDateを使用します。

const date = new Date('2024-01-01T00:00:00')

date.setDate(date.getDate() + 4)
console.log(date.toLocaleDateString())
// 2024/1/5

時間(Hour)を加算する場合はsetHoursとgetHoursを使用します。

const date = new Date('2024-01-01T00:00:00')

date.setHours(date.getHours() + 4)
console.log(date.toLocaleTimeString())
// 4:00:00

場合によってはミリ秒単位で加算しているコードもありますが、4時間加算などの場合はわかりづらくなるので避けたほうが良いでしょう。

const date = new Date('2024-01-01T00:00:00')
const addHour = 4 * 60 * 60 * 1000

date.setTime(date.getTime() + addHour)
console.log(date.toLocaleTimeString())
// 4:00:00

残りの日数を表示する

目的の日付を現在の日付で減算して、日のミリ秒で割って日数にします。

const currentDate = new Date()
const targetDate = new Date('2025-04-13T00:00:00')

function formatDistanceDay(currentDate, targetDate) {
  const oneDay = 24 * 60 * 60 * 1000
  const difference = targetDate - currentDate
  const days = Math.floor(difference / oneDay) + 1

  console.log(`あと${days}日`) // 例: あと401日
}

formatDistanceDay(currentDate, targetDate)

残りの日付をカウントダウンする

setIntervalを使用して、以下のようにします。

const targetDate = new Date('2025-04-13T00:00:00')

const intervalId = setInterval(() => {
  const diff = targetDate - new Date()

  if (diff <= 0) {
    console.log('カウントダウン終了')
    clearInterval(intervalId)
  } else {
    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
    const seconds = Math.floor((diff % (1000 * 60)) / 1000)
    console.log(`残り ${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`)
    // 例: 残り 400日 12時間 34分 56秒
  }
}, 1000)