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)

page_footer_300rect




page_footer_300rect




-BackEnd
-

執筆者:


comment

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

CAPTCHA


関連記事

RSpecの個人的Tips集〜その1〜

1 はじめに2 テストコードの実行をスキップする3 共通のテストコードを用意する4 外部APIの返却値をスタブにする5 さいごに はじめに みなさん、テストコードは書かれているでしょうか? 私も極力書 ...

rails

Capistrano3でRailsアプリケーションをデプロイする

1 はじめに1.1 前提条件2 Cpistranoについて3 導入3.1 Gemのインストール3.2 設定ファイルの準備4 デプロイ設定4.1 Capfileを修正する4.2 各環境で共通のデプロイ設 ...

markdownで書けるドキュメントツールのGitbookを試す

1 はじめに2 Gitbookとは3 nvm4 node.jsインストール5 Gitbook導入5.1 インストール5.2 初期化5.3 ローカルでブラウザから確認6 作成と編集6.1 見出し編集7 ...

php logo

PHP入門 〜文字列と数値の操作〜

1 はじめに2 基本ルール2.1 開始と終了のタグ2.2 ホワイトスペース2.3 大文字と小文字の区別2.4 コメント2.5 変数の定義3 文字列の操作3.1 文字列の定義3.2 無駄なスペースを削除 ...

rails

form_withでフォームの送信前に処理を行う方法

1 はじめに2 form_with3 サンプル4 さいごに5 参考 はじめに フォームを送信する前に処理を行いたいケース(Google Analyticsのイベントのトラッキングなど)があると思います ...

フォロー

follow us in feedly

AppLink

英語

page_side_300rect

2018年11月
« 10月 12月 »
 123
45678910
11121314151617
18192021222324
252627282930 

アプリ情報

目標を達成したい方を応援する、TODOアプリもリリースしております。 下記のアイコンから無料でダウンロードできます。

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。 下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。