BackEnd

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

投稿日:2018年11月8日 更新日:

はじめに

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

Moment Timezone

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

セットアップ

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

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

使用例

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

Moment Timezoneの機能

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

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

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

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

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

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

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

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

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

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

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

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

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

さいごに

Moment Timezoneを使ってフロントエンドで任意のタイムゾーンに日付を変換する方法を紹介しました。

おすすめ書籍

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発 Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門 Vue.js入門 基礎から実践アプリケーション開発まで リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

blog-page_footer_336




blog-page_footer_336




-BackEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

rails

RailsでSidekiqを使ってみた

1 はじめに1.1 実行環境2 前準備2.1 Redisのインストール3 Railsの準備3.1 プロジェクト作成3.2 新規登録時にAPIを叩く4 Sidekiqの準備4.1 Workerを作る5 ...

rails

関連するモデルのレコードを一緒に作成する方法

1 はじめに1.1 前提条件2 実装2.1 モデルの作成2.2 コントローラの作成2.3 Viewの作成3 さいごに はじめに フォームからレコードを作成する際に、関連するモデルのレコードを一緒に作成 ...

rails

Shrineをモデルに関連付けないで使用してハマったこと

1 はじめに2 アップロード時にリサイズする3 アップロード時のバリデーション4 アップロード時に古いファイルを削除する5 さいごに はじめに ShrineはRailsでのアップロードを簡単に行えるよ ...

php logo

PHPでGmail APIを利用してメールデータを取得してみる その2

1 はじめに2 メールの内容取得3 MessagePartオブジェクト3.1 件名3.2 本文4 multipartの場合4.1 本文の取得5 全文6 さいごに7 おすすめ書籍 はじめに 前回は、Gm ...

laravel logo

Laravelの便利なメールアドレスのバリデーション設定

1 はじめに2 不具合内容2.1 バリデーションルール設定2.2 不正なメールアドレス例3 対応3.1 email:rfc3.2 email:strict3.3 email:dns3.4 email: ...

フォロー

blog-page_side_responsive

2018年11月
 123
45678910
11121314151617
18192021222324
252627282930  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。