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


関連記事

Rubyを使ってDialogflowのお勉強

1 はじめに1.1 環境2 とりあえずAPIで叩いてみる2.1 テスト用のIntentを作成2.2 Gemの設定3 Eventについて3.1 WELCOMEイベント3.2 パラメータ付きで叩く3.3 ...

Rust入門してみた (基本構文編)

1 はじめに2 Rustとは?3 Rustの特徴的な基本構文3.1 変数と定数3.2 所有権3.3 所有権の借用3.4 関数3.5 エラーハンドリング3.5.1 回復不能なエラー(panic!)3.5 ...

rails

RailsでS3に画像をアップロードする

1 はじめに2 今回やりたいこと3 下準備3.1 ImageMagickをインストールする3.2 Gemをインストールする4 レコード生成時にファイルを指定してアップロードする4.1 アップローダを作 ...

aws

Amazon ECSのタスク定義について

1 はじめに1.1 Amazon ECSのタスク定義についておさらい2 タスク定義3 アプリケーションのアーキテクチャ3.1 Fargate起動タイプ3.2 EC2起動タイプ4 タスク定義パラメータ4 ...

Go言語

gorpを使ってDBを操作する

1 はじめに1.1 GoのORM1.2 gorpの紹介2 gorpの基本操作2.1 insert2.2 select2.3 update2.4 delete3 構造体のmapping4 テーブルの作成 ...

フォロー

blog-page_side_responsive

2018年11月
 123
45678910
11121314151617
18192021222324
252627282930  

アプリ情報

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