【決定版】JavaScriptで日時を自在にフォーマットする方法まとめ【初心者向け】

Webアプリやフロントエンド開発をしていると、「日付や時刻を見やすく表示したい！」という場面は必ず出てきますよね。

でも、JavaScriptでは、Dateオブジェクトが提供する日時のフォーマット機能が意外と使いづらいんです…。

今回は、標準の書き方から、実務で役立つカスタムフォーマット、さらには便利なライブラリの使い方まで、わかりやすく解説していきます。

JavaScriptで現在の日時を取得する方法

まずは基本となる現在の日時の取得です。

const now = new Date();
console.log(now); // 例: Thu May 22 2025 18:45:00 GMT+0900

これでは扱いにくいので、整形が必要ですね。次の方法で見やすくしていきましょう。

よく使う日時フォーマットの手動整形

JavaScriptでは、標準で提供されているフォーマット関数が少ないため、自分で整形するコードを書くのが一般的です。

例：YYYY-MM-DD HH:MM:SS 形式

const now = new Date();

const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月は0始まり
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');

const formatted = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
console.log(formatted); // 例: 2025-05-22 18:45:00

少し長いコードですが、これで綺麗にフォーマットされた日時が表示されます。

日時をパーツごとに取得するメソッド一覧

Dateオブジェクトから各要素を取得するメソッドをまとめました。

国際化APIでのフォーマット（簡単＆強力）

JavaScriptのIntl.DateTimeFormatを使えば、ロケール（地域設定）に応じたフォーマットも可能です。

const now = new Date();
const formatted = new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
}).format(now);

console.log(formatted); // 例: 2025/05/22 18:45:00

この方法は、タイムゾーンの調整や言語対応にも便利なんです。手動で整形するよりも楽ですね。

実務で使える！人気ライブラリで楽にフォーマット

より実用的な開発では、専用のライブラリを使うことが多いです。代表的なものを紹介します。

Day.js（軽量・シンプル）

npm install dayjs

import dayjs from 'dayjs';

console.log(dayjs().format('YYYY-MM-DD HH:mm:ss')); // 2025-05-22 18:45:00

date-fns（関数ベースで柔軟）

npm install date-fns

import { format } from 'date-fns';

console.log(format(new Date(), 'yyyy-MM-dd HH:mm:ss')); // 2025-05-22 18:45:00

Luxon（タイムゾーンが強い）

npm install luxon

import { DateTime } from 'luxon';

console.log(DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss'));

どのライブラリも、標準のDateオブジェクトよりもずっと使いやすいですよ。

まとめ

JavaScriptでの日時フォーマットは、用途やプロジェクト規模に応じて柔軟に選ぶのがポイントです。

今日のまとめ

• 標準のDateで取得し、手動で整形するのが基本
• 国際化API（Intl）なら多言語・多地域対応も簡単