JavaScriptで日時フォーマットが簡単！5ステップと21のコード例で完全マスター

はじめに

この記事を読めば、JavaScriptで日時フォーマットを簡単に扱うことができるようになります。

●JavaScriptとは

JavaScriptは、ウェブページに動的な要素やインタラクティブ性を追加するために使用されるプログラミング言語です。

HTMLとCSSと組み合わせて、ウェブページの見た目や機能を制御します。

○JavaScriptの特徴

JavaScriptは、ブラウザで動作するクライアントサイドの言語であり、サーバーサイドでも使用できるようになりました（Node.js）。

また、非同期通信をサポートしているため、ページの一部を更新することができます。

●JavaScriptでの日時フォーマットについて

JavaScriptで日時を扱う際には、DateオブジェクトやtoLocaleStringメソッドを使用します。

○Dateオブジェクト

JavaScriptで日時を扱うためのオブジェクトです。

現在の日時や特定の日時を生成し、日時に関する情報を取得・設定することができます。

○toLocaleStringメソッド

Dateオブジェクトのメソッドで、日時を指定したロケール（言語や地域）に合わせた形式で文字列として返します。

●JavaScriptでの日時フォーマットの基本

JavaScriptで日時をフォーマットする基本的な方法を紹介します。

○サンプルコード1：現在の日時を表示

// 現在の日時を取得
const now = new Date();

// 現在の日時を表示
console.log(now.toLocaleString());

上記のサンプルコードでは、Dateオブジェクトを使って現在の日時を取得し、toLocaleStringメソッドで現在の日時を文字列に変換して表示しています。

○サンプルコード2：指定した日時を表示

// 指定した日時を取得
const date = new Date(2023, 3, 16, 12, 30, 0);

// 指定した日時を表示
console.log(date.toLocaleString());

上記のサンプルコードでは、Dateオブジェクトに引数を渡して指定した日時を生成し、toLocaleStringメソッドで指定した日時を文字列に変換して表示しています。

○サンプルコード3：日時の要素を個別に取得

// 現在の日時を取得
const now = new Date();

// 年、月、日、時、分、秒を取得
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

// 個別に取得した要素を表示
console.log(`${year}年${month}月${day}日 ${hours}時${minutes}分${seconds}秒`);

上記のサンプルコードでは、Dateオブジェクトの各メソッドを使って年、月、日、時、分、秒をそれぞれ取得し、テンプレートリテラルを使って文字列に整形して表示しています。

●JavaScriptでの日時フォーマットのカスタマイズ

独自の日時フォーマットを適用する方法を紹介します。

○サンプルコード4：カスタムフォーマットの関数

// カスタムフォーマット関数
function customFormat(date) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  return `${year}年${month}月${day}日 ${hours}時${minutes}分${seconds}秒`;
}

const now = new Date();
console.log(customFormat(now));

上記のサンプルコードでは、カスタムフォーマットを行う関数を定義しています。

この関数は引数で受け取ったDateオブジェクトから年、月、日、時、分、秒を取得し、独自の形式で文字列に整形して返します。

この関数を使って任意の日時をカスタムフォーマットで表示できます。

○サンプルコード5：カスタムフォーマットの適用例

// カスタムフォーマット関数を定義
function customFormat(date) {
  // (略) 上記サンプルコード4と同じ
}

// 任意の日時を設定
const eventDate = new Date(2023, 9, 30, 18, 0, 0);

// カスタムフォーマット関数を使用して表示
console.log(customFormat(eventDate));

上記のサンプルコードでは、サンプルコード4で定義したカスタムフォーマット関数を使って、任意の日時（イベント開始日時など）をカスタムフォーマットで表示しています。

●JavaScriptでの日時フォーマットの応用例

ここでは、日時フォーマットを応用した例を紹介します。

○サンプルコード6：カウントダウンタイマー

// カウントダウンタイマーを実装する関数
function countdown(endDate) {
  const now = new Date();
  const remaining = endDate - now;
  const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
  const hours = Math.floor((remaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((remaining % (1000 * 60)) / 1000);

  return `${days}日${hours}時間${minutes}分${seconds}秒`;
}

const targetDate = new Date(2023, 11, 31, 23, 59, 59);
console.log(countdown(targetDate));

上記のサンプルコードでは、指定した終了日時までの残り時間をカウントダウンタイマー形式で表示する関数を実装しています。

この関数は引数で受け取った終了日時と現在時刻との差を計算し、日、時、分、秒に分解して表示します。

○サンプルコード7：経過時間の表示

// 経過時間を表示する関数
function elapsedTime(startDate) {
  const now = new Date();
  const elapsed = now - startDate;
  const days = Math.floor(elapsed / (1000 * 60 * 60 * 24));
  const hours = Math.floor((elapsed % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((elapsed % (1000 * 60)) / 1000);

  return `${days}日${hours}時間${minutes}分${seconds}秒`;
}

const startDate = new Date(2023, 3, 1, 0, 0, 0);
console.log(elapsedTime(startDate));

上記のサンプルコードでは、指定した開始日時から現在までの経過時間を表示する関数を実装しています。

この関数は引数で受け取った開始日時と現在時刻との差を計算し、日、時、分、秒に分解して表示します。

○サンプルコード8：特定の曜日の日付を取得

// 特定の曜日の日付を取得する関数
function getDatesByDayOfWeek(year, month, dayOfWeek) {
  const firstDate = new Date(year, month - 1, 1);
  const firstDay = firstDate.getDay();
  const dates = [];

  for (let i = 1; i <= 7; i++) {
    if ((firstDay - i) % 7 === dayOfWeek % 7) {
      firstDate.setDate(firstDate.getDate() - (firstDay - i));
      break;
    }
  }

  while (firstDate.getMonth() === month - 1) {
    dates.push(new Date(firstDate));
    firstDate.setDate(firstDate.getDate() + 7);
  }

  return dates;
}

const dates = getDatesByDayOfWeek(2023, 4, 0); // 2023年4月の日曜日を取得
dates.forEach(date => console.log(date));

上記のサンプルコードでは、指定した年月の特定の曜日の日付を取得する関数を実装しています。

この関数は、まずその月の1日目を計算し、指定された曜日に最も近い日付を求めます。

その後、その日付から1週間ごとに日付を追加して、その月の指定された曜日のすべての日付を取得します。

○サンプルコード9：特定の期間内の日付を取得

// 特定の期間内の日付を取得する関数
function getDatesInRange(startDate, endDate) {
  const dates = [];
  const currentDate = new Date(startDate);

  while (currentDate <= endDate) {
    dates.push(new Date(currentDate));
    currentDate.setDate(currentDate.getDate() + 1);
  }

  return dates;
}

const startDate = new Date(2023, 3, 1);
const endDate = new Date(2023, 3, 7);
const datesInRange = getDatesInRange(startDate, endDate);
datesInRange.forEach(date => console.log(date));

上記のサンプルコードでは、指定した期間内の日付を取得する関数を実装しています。

この関数は、開始日から終了日までの間で、1日ずつ日付を追加して配列に格納します。

○サンプルコード10：カレンダーの作成

// カレンダーを作成する関数
function createCalendar(year, month) {
  const firstDate = new Date(year, month - 1, 1);
  const lastDate = new Date(year, month, 0);
  const calendar = [];

  // カレンダーの最初の週を作成
  const firstWeek = [];
  for (let i = 0; i < 7; i++) {
    if (i < firstDate.getDay()) {
      firstWeek.push(null);
    } else {
      firstWeek.push(new Date(year, month - 1, 1 + i - firstDate.getDay()));
    }
  }
  calendar.push(firstWeek);

  // カレンダーの残りの週を作成
  let currentWeek = [];
  let currentDate = new Date(firstWeek[6]);
  currentDate.setDate(currentDate.getDate() + 1);
  while (currentDate <= lastDate) {
    currentWeek.push(new Date(currentDate));
    if (currentDate.getDay() === 6) {
      calendar.push(currentWeek);
      currentWeek = [];
    }
    currentDate.setDate(currentDate.getDate() + 1);
  }

  // カレンダーの最後の週を埋める
  if (currentWeek.length > 0) {
    while (currentWeek.length < 7) {
      currentWeek.push(null);
    }
    calendar.push(currentWeek);
  }

  return calendar;
}

const calendar = createCalendar(2023, 4);
calendar.forEach(week => console.log(week.map(date => date ? date.getDate() : ' ').join(' ')));

上記のサンプルコードでは、指定した年月のカレンダーを作成する関数を実装しています。

まず、その月の最初と最後の日付を取得し、カレンダーの最初の週を作成します。

その後、カレンダーの残りの週を作成し、最後の週が7日未満の場合、カレンダーの最後の週を埋めます。

この関数を使って、任意の年月のカレンダーを表示することができます。

次の見出しに従って、JavaScriptでの日時フォーマットに関連する注意点、カスタマイズ方法、ライブラリなどを説明していきます。

これらの情報を利用することで、日時フォーマットに関する様々な要件に対応することができます。

●JavaScriptでの日時フォーマットの注意点と対処法

日時フォーマットにはいくつかの注意点があります。

ここでは、タイムゾーンの扱い、閏年の扱い、および時刻表記の扱いについて説明します。

○タイムゾーンの扱い

JavaScriptのDateオブジェクトは、デフォルトでブラウザのローカルタイムゾーンを使用します。

タイムゾーンを変更したり、UTCで日時を扱いたい場合には注意が必要です。

UTCで日時を扱うには、DateオブジェクトのUTCメソッド（Date.UTC）を使用します。

// ローカルタイムゾーンでの日時
const localDate = new Date(2023, 3, 16, 12, 0, 0);
console.log(localDate.toString());

// UTCでの日時
const utcDate = new Date(Date.UTC(2023, 3, 16, 12, 0, 0));
console.log(utcDate.toUTCString());

○閏年の扱い

閏年を考慮する必要がある場合は、次のような関数を使用して閏年を判定できます。

function isLeapYear(year) {
  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}
console.log(isLeapYear(2020)); // true
console.log(isLeapYear(2021)); // false

○時刻表記の扱い

24時間表記と12時間表記（AM/PM）の切り替えが必要な場合は、カスタムフォーマット関数を使用して対応します。

function format12Hour(date) {
  const hours = date.getHours();
  const ampm = hours >= 12 ? 'PM' : 'AM';
  const formattedHours = hours % 12 || 12;
  return `${formattedHours}:${date.getMinutes()} ${ampm}`;
}

const date = new Date(2023, 3, 16, 13, 30, 0);
console.log(format12Hour(date)); // 1:30 PM

●JavaScriptでの日時フォーマットのさらなるカスタマイズ

日時フォーマットのカスタマイズ方法にはいくつかの種類があります。

ここでは、異なる言語の日付フォーマット、曜日のカスタム表記、月のカスタム表記、およびAM/PMのカスタム表記について説明します。

○サンプルコード11：異なる言語の日付フォーマット

// 異なる言語での日付フォーマット
const date = new Date(2023, 3, 16);
const options = { year: 'numeric', month: 'long', day: 'numeric' };

console.log(date.toLocaleDateString('ja-JP', options)); // 2023年4月16日
console.log(date.toLocaleDateString('en-US', options)); // April 16, 2023
console.log(date.toLocaleDateString('de-DE', options)); // 16. April 2023

○サンプルコード12：曜日のカスタム表記

// 曜日のカスタム表記
const days = ['日', '月', '火', '水', '木', '金', '土'];
const date = new Date(2023, 3, 16);

console.log(`今日は${days[date.getDay()]}曜日です。`); // 今日は火曜日です。

○サンプルコード13：月のカスタム表記

// 月のカスタム表記
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
const date = new Date(2023, 3, 16);

console.log(`今月は${months[date.getMonth()]}です。`); // 今月は4月です。

○サンプルコード14：AM/PMのカスタム表記

// AM/PMのカスタム表記
function format12Hour(date) {
  const hours = date.getHours();
  const ampm = hours >= 12 ? '午後' : '午前';
  const formattedHours = hours % 12 || 12;
  return `${formattedHours}:${date.getMinutes()} ${ampm}`;
}

const date = new Date(2023, 3, 16, 13, 30, 0);
console.log(format12Hour(date)); // 1:30 午後

これらのサンプルコードを参考に、日時フォーマットのカスタマイズをさらに進めることができます。

次の見出しでは、JavaScriptでの日時フォーマットに関するライブラリを紹介します。

●JavaScriptでの日時フォーマットのライブラリ

JavaScriptの日時フォーマットには、いくつかの有名なライブラリがあります。

これらのライブラリを使用することで、日時操作やフォーマットがより簡単になります。

ここでは、Moment.js、Date-fns、Luxon、Day.jsの4つのライブラリを紹介します。

○Moment.js

Moment.jsは、最もポピュラーな日時操作ライブラリの1つです。

多機能で扱いやすいですが、サイズが大きいという欠点があります。

// Moment.jsを使った日時フォーマット
const moment = require('moment');

const date = moment('2023-04-16');
console.log(date.format('YYYY年M月D日')); // 2023年4月16日

○Date-fns

Date-fnsは、モジュールが細かく分かれており、必要な機能だけをインポートして使うことができます。

そのため、ビルドサイズが小さくなります。

// Date-fnsを使った日時フォーマット
const format = require('date-fns/format');

const date = new Date(2023, 3, 16);
console.log(format(date, 'yyyy年M月d日')); // 2023年4月16日

○Luxon

Luxonは、Moment.jsの開発者が作成した新しい日時操作ライブラリです。

Moment.jsの問題点を改善し、よりモダンなAPIを提供しています。

// Luxonを使った日時フォーマット
const { DateTime } = require('luxon');

const date = DateTime.fromObject({ year: 2023, month: 4, day: 16 });
console.log(date.toFormat('yyyy年M月d日')); // 2023年4月16日

○Day.js

Day.jsは、Moment.jsの軽量版として開発されたライブラリです。

APIはMoment.jsと非常に似ていますが、サイズが非常に小さいです。

// Day.jsを使った日時フォーマット
const dayjs = require('dayjs');

const date = dayjs('2023-04-16');
console.log(date.format('YYYY年M月D日')); // 2023年4月16日

これらのライブラリを利用することで、日時フォーマットの操作がさらに簡単になります。

状況やニーズに応じて、適切なライブラリを選択してください。

まとめ

この記事では、JavaScriptでの日時フォーマットの基本から応用、さらにカスタマイズやライブラリの紹介まで行いました。

これらの知識を活用して、日時操作やフォーマットを効率的に行うことができます。

日時は多くのアプリケーションで重要な役割を果たしているため、これらのテクニックはプログラムの品質やパフォーマンスを向上させることに役立ちます。