【徹底解説】JavaScriptでUTC日時をローカル日時へ変換する4つの方法

2024-04-02

JavaScript / jQuery で UTC 日時をローカル日時へ変換する方法

概要

UTC 日時 とは、協定世界時 (Coordinated Universal Time) のことで、世界共通の時間基準です。一方、ローカル日時 は、ブラウザが現在設定されているタイムゾーンに基づいた時間です。

方法

JavaScript

Date オブジェクトを生成します。
Date オブジェクトの getTimezoneOffset() メソッドを使って、ブラウザのタイムゾーンオフセットを取得します。
オフセット値をミリ秒単位で UTC 日時に加算または減算します。

// UTC 日時を取得
const utcDate = new Date('2024-03-26T12:00:00Z');

// タイムゾーンオフセットを取得
const offset = utcDate.getTimezoneOffset();

// ローカル日時を取得
const localDate = new Date(utcDate.getTime() + (offset * 60 * 1000));

console.log(localDate); // 2024-03-26T19:00:00+09:00

タイムゾーンオフセット は、ローカル日時と UTC 日時の差を表します。日本は UTC よりも 9 時間進んでいるため、タイムゾーンオフセットは +0900 になります。

jQuery を使用すると、より簡単にローカル日時を取得できます。

// UTC 日時を取得
const utcDate = '2024-03-26T12:00:00Z';

// ローカル日時を取得
const localDate = $.datepicker.parseDate('UTC', utcDate);

console.log(localDate); // 2024-03-26T19:00:00+09:00

$.datepicker.parseDate() メソッドは、UTC 形式の文字列を受け取り、ローカル日時を返します。

補足

上記のコードは、ブラウザのタイムゾーン設定に基づいてローカル日時を取得します。
特定のタイムゾーンに基づいてローカル日時を取得したい場合は、Intl.DateTimeFormat オブジェクトを使用できます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UTC 日時をローカル日時へ変換</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

script.js

$(function() {
  // UTC 日時を取得
  const utcDate = new Date('2024-03-26T12:00:00Z');

  // タイムゾーンオフセットを取得
  const offset = utcDate.getTimezoneOffset();

  // ローカル日時を取得
  const localDate = new Date(utcDate.getTime() + (offset * 60 * 1000));

  // 結果を出力
  $('#result').text(localDate.toString());

  // jQuery を使用してローカル日時を取得
  const localDate2 = $.datepicker.parseDate('UTC', utcDate);
  $('#result2').text(localDate2.toString());
});

index.html には、jQuery のライブラリと script.js ファイルを読み込むための記述があります。

script.js ファイルでは、以下の処理が行われます。

Date オブジェクトを使って、UTC 日時を取得します。
jQuery の parseDate() メソッドを使って、UTC 日時をローカル日時へ変換します。
取得したローカル日時を #result と #result2 要素に出力します。

このコードを実行すると、ブラウザのコンソールに以下の出力が表示されます。

2024-03-26T19:00:00+09:00
2024-03-26T19:00:00+09:00

応用例

異なるタイムゾーンにあるユーザーに、正しい日時を表示する。
ログファイルに、UTC 日時ではなくローカル日時を記録する。
国際的な会議の日程調整を行う。

JavaScript と jQuery を使って、UTC 日時をローカル日時へ変換する方法について解説しました。サンプルコードを参考に、実際にコードを書いて試してみてください。

UTC 日時をローカル日時へ変換するその他の方法

Moment.js は、日付と時刻の処理を簡単にする JavaScript ライブラリです。Moment.js を使用すると、以下のように簡単に UTC 日時をローカル日時へ変換できます。

// Moment.js ライブラリの読み込み
import moment from 'moment';

// UTC 日時を取得
const utcDate = moment('2024-03-26T12:00:00Z');

// ローカル日時を取得
const localDate = utcDate.local();

console.log(localDate.toString()); // 2024-03-26T19:00:00+09:00

Moment.js は、タイムゾーンの変換以外にも、日付と時刻の加算・減算、フォーマット変換など、様々な機能を提供しています。

Intl.DateTimeFormat オブジェクトは、ブラウザのロケール設定に基づいて、日付と時刻をフォーマットする JavaScript オブジェクトです。Intl.DateTimeFormat オブジェクトを使用すると、以下のように特定のタイムゾーンに基づいてローカル日時を取得できます。

// 特定のタイムゾーンに基づいてローカル日時を取得
const localDate = new Date().toLocaleDateString('ja-JP', {
  timeZone: 'Asia/Tokyo'
});

console.log(localDate); // 2024年3月26日

Intl.DateTimeFormat オブジェクトは、様々なオプションを指定して、日付と時刻のフォーマットを細かく制御することができます。

上記以外にも、以下のような方法で UTC 日時をローカル日時へ変換することができます。