カテゴリー: BackEnd

Moment Timezoneを使ってJavaScriptで日付を変換する

1 はじめに
2 Moment Timezone
- 2.1 セットアップ
- 2.2 使用例
3 Moment Timezoneの機能
4 さいごに
5 おすすめ書籍

はじめに

グローバルなアプリケーションだと、地域ごとにその地域にあったタイムゾーンで時間を表示したいケースがあります。実装の方針としては大きく分けて2つあり、バックエンドで日付を変換する方法とフロントエンドで日付を変換する方法です。
今回はセレクトボックスでタイムゾーンを選択するケースを想定し、フロントエンド側で日付を変換する方法としてMoment Timezoneを使った方法を紹介します。

Moment Timezone

Moment Timezone は日付の操作に関する様々な機能を提供するJavaScriptのライブラリです。サマータイムに対応しており、自動的に日付が補正されます。

セットアップ

パッケージマネージャとしてyarnを使い、Railsアプリケーションで使用する前提で説明します。まずは、moment-time-zone-with-dataをインストールします。

$ yarn add moment-timezone-with-data

次にRails側のロード処理をapplication.jsに追加します。

//= require moment/moment
//= require moment-timezone/builds/moment-timezone-with-data

使用例

それでは、一般的な使い方を説明します。文字列からZone Objectを生成し、表示してみます。

// 第1引数で日付を第2引数でタイムゾーンを指定する。
var tokyo = moment.tz('2018-11-07 12:00:00', 'Asia/Tokyo');

// デフォルトのフォーマットで日付を表示する。
console.log(tokyo.format());
// 2018-11-07T12:00:00+09:00

// UTCに変換して表示する
console.log(tokyo.utc().format());
// 2018-11-07T03:00:00Z

// サマータイムは自動で補正されます
var noSummer = moment.tz('2018-01-01 00:00:00', 'America/New_York');
console.log(noSummer.format());
// 2018-01-01T00:00:00-05:00
var summer = moment.tz('2018-04-01 00:00:00', 'America/New_York');
console.log(summer.format());
// 2018-04-01T00:00:00-04:00

Moment Timezoneの機能

Moment Timezoneの機能をいくつか紹介します。

タイムゾーンの一覧を表示する

Moment Timezoneで変換できるタイムゾーンの一覧は下記のように取得できます。

console.log(moment.tz.names());
// (592) ["Africa/Abidjan", "Africa/Accra", "Africa/Addis_Ababa", "Africa/Algiers", 
// "Africa/Asmara", "Africa/Asmera", ...]

現在のタイムゾーンを表示する

現在、自分がいる地域のタイムゾーンは下記のように取得できます。

console.log(moment.tz.guess());
// Asia/Tokyo

様々なフォーマットからパースする

Moment Timezoneでは様々なフォーマットからパースすることができます。

// 文字列から生成
var a = moment.tz('2018-11-07 12:00:00', 'Asia/Tokyo');
console.log(a.format());
// 2018-11-07T12:00:00+09:00

// 文字列から生成
var b = moment.tz("November 7th 2018 12PM", "MMM Do YYYY hA", "Asia/Tokyo");
console.log(b.format());
// 2018-11-07T12:00:00+09:00

// 配列から生成（＋1ヶ月される）
var c = moment.tz([2018, 11, 7, 12, 0, 0], "Asia/Tokyo");
console.log(c.format());
// 2018-12-07T12:00:00+09:00

// オブジェクトから生成（＋1ヶ月される）
var d = moment.tz({ year: 2018, month: 11, day: 7, hour: 12 }, 'Asia/Tokyo');
console.log(d.format());
// 2018-12-07T12:00:00+09:00

任意のタイムゾーンで日付を変換する

Zone Objectを別のタイムゾーンへ変換する方法は下記のとおりです。

var tokyo = moment.tz('2018-11-07 12:00:00', 'Asia/Tokyo');
console.log(tokyo.format());
// 2018-11-07T12:00:00+09:00

// タイムゾーンをAmerica/New_Yorkに変更して新たなZone Objectを作る
var newYork = tokyo.clone().tz('America/New_York');
console.log(tokyo.format());
// 2018-11-07T12:00:00+09:00
console.log(newYork.format());
// 2018-11-06T22:00:00-05:00

// clone()しないと自分自身を変更する
tokyo.tz('UTC');
console.log(tokyo.format());
// 2018-11-07T03:00:00Z

フォーマットを指定して日付を表示する

Moment Timezoneでは指定したフォーマットで日付を出力することができます。

tokyo.tz('UTC');
console.log(tokyo.format());
// 2018-11-07T03:00:00Z
console.log(tokyo.format('Y/M/D HH:mm:ss'));
// 2018/11/7 12:00:00
console.log(tokyo.format('Z z'));
// +09:00 JST

様々なパラメータを取得する

Zone Objectのパラメータの一部を紹介します。

var tokyo = moment.tz('2018-11-07 12:00:00', 'Asia/Tokyo');

// 日付を配列を取得
console.log(tokyo._a);
// (7) [2018, 10, 7, 12, 0, 0, 0]

// 日付を異なるフォーマットで取得
console.log(tokyo._d);
// Wed Nov 07 2018 21:00:00 GMT+0900 (日本標準時)

// Zone Objectの日付フォーマットを取得
console.log(tokyo._f);
// YYYY-MM-DD HH:mm:ss

// Zone Objectの日付フォーマットで日時を取得
console.log(tokyo._i);
// 2018-11-07 12:00:00

// Unix Time Stampを取得
console.log(tokyo.unix());
// 1541559600

// Zone Objectが正常か
console.log(tokyo.isValid());
// true
var invalid = moment.tz('2018 00', 'Asia/Tokyo');
console.log(invalid.isValid());
// false