もう迷わない！JavaScriptでミリ秒を日付に変換する3つの方法とサンプルコード

2024-05-20

JavaScriptとjQueryでミリ秒を日付に変換する方法

方法1：Dateオブジェクトを使用する

ミリ秒を格納する変数を作成します。

const milliseconds = 1584825600000; // 2020年9月22日 00:00:00 UTC のミリ秒数

Dateオブジェクトを作成します。
```
const date = new Date(milliseconds);
```

必要な日付情報を取り出します。

const year = date.getFullYear();  // 年
const month = date.getMonth() + 1; // 月 (0始まりなので、1を足す)
const day = date.getDate();       // 日
const hours = date.getHours();    // 時
const minutes = date.getMinutes();  // 分
const seconds = date.getSeconds();  // 秒
const milliseconds = date.getMilliseconds(); // ミリ秒

console.log(`<span class="math-inline">\{year\}/</span>{month}/${day} <span class="math-inline">\{hours\}\:</span>{minutes}:<span class="math-inline">\{seconds\}\.</span>{milliseconds}`);
// 出力: 2020/09/22 00:00:00.000

方法2：jQueryを使用する

jQueryライブラリをロードします。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

jQueryの$.datepicker.formatDate()関数を使用して、日付をフォーマットします。

const formattedDate = $.datepicker.formatDate('yy/mm/dd hh:mm:ss', new Date(milliseconds));
console.log(formattedDate);
// 出力: 2020/09/22 00:00:00

補足

上記の例では、UTC時間帯のミリ秒を想定しています。ローカル時間帯のミリ秒を変換する場合は、Date.UTC()関数を使用して、UTC時間帯に変換してから処理する必要があります。

JavaScriptとjQueryでミリ秒を日付に変換するサンプルコード

方法1：Dateオブジェクトを使用する

// ミリ秒を格納する変数
const milliseconds = 1584825600000; // 2020年9月22日 00:00:00 UTC のミリ秒数

// Dateオブジェクトを作成
const date = new Date(milliseconds);

// 年、月、日、時、分、秒、ミリ秒を取り出す
const year = date.getFullYear();
const month = date.getMonth() + 1; // 月 (0始まりなので、1を足す)
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const milliseconds = date.getMilliseconds();

// フォーマットされた日付を出力
const formattedDate = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
console.log(formattedDate);
// 出力: 2020/09/22 00:00:00.000

方法2：jQueryを使用する

<!DOCTYPE html>
<html>
<head>
  <title>ミリ秒を日付に変換</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <script>
    // ミリ秒を格納する変数
    const milliseconds = 1584825600000; // 2020年9月22日 00:00:00 UTC のミリ秒数

    // jQueryのformatDate()関数を使用して、日付をフォーマット
    const formattedDate = $.datepicker.formatDate('yy/mm/dd hh:mm:ss', new Date(milliseconds));
    console.log(formattedDate);
    // 出力: 2020/09/22 00:00:00
  </script>
</body>
</html>

JavaScriptでミリ秒を日付に変換するその他の方法

toLocaleDateString()メソッドを使用する

この方法は、ブラウザのロケール設定に基づいて日付をフォーマットします。

const milliseconds = 1584825600000;
const date = new Date(milliseconds);
const formattedDate = date.toLocaleDateString();
console.log(formattedDate);
// 出力: 2020年9月22日 (日本ロケールの場合)

const milliseconds = 1584825600000;
const date = new Date(milliseconds);
const formattedTime = date.toLocaleTimeString();
console.log(formattedTime);
// 出力: 00:00:00 (日本ロケールの場合)

ライブラリを使用する

Moment.jsなどのライブラリを使用すると、より柔軟に日付をフォーマットすることができます。

const moment = require('moment'); // Moment.jsライブラリをロード
const milliseconds = 1584825600000;
const formattedDate = moment(milliseconds).format('YYYY/MM/DD HH:mm:ss');
console.log(formattedDate);
// 出力: 2020/09/22 00:00:00

手動でフォーマットする

日付を自分でフォーマットしたい場合は、以下のコードのように、個別に年、月、日、時、分、秒、ミリ秒を取り出して、好きな形式で文字列を連結することができます。

const milliseconds = 1584825600000;
const date = new Date(milliseconds);
const year = date.getFullYear();
const month = date.getMonth() + 1; // 月 (0始まりなので、1を足す)
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const milliseconds = date.getMilliseconds();

const formattedDate = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
console.log(formattedDate);
// 出力: 2020/09/22 00:00:00.000