9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails】Rails⇔JavaScript間で時間データを渡す方法

Posted at

【はじめに】

先日、こちらの記事を書きました。
【Rails】Rails側で定義した変数をJavaScriptに簡単に渡せるgem 「gon」を使ってみた - Qiita

ただ、時間関係の変数についてはフォーマットがRubyとJavaScriptで異なってしまい、うまく動きません。

そこでRails⇔JavaScript間で時間データを渡す変換方法を調べたのでまとめてみました:relaxed:

【この記事が役に立つ方】

  • Rails⇔JavaScript間で時間データをやりとりしたい方

【この記事のメリット】

  • Rails⇔JavaScript間で時間データをやりとり出来るようになる。

【環境】

  • macOS Catalina 10.15.1
  • zsh: 5.7.1
  • Ruby: 2.6.5
  • Rails: 5.2.4

【ポイント】

1000を掛ける、割るで調整する。


【変換方法】

1.Ruby → JavaScript

t1 = Time.now
=> 2019-12-05 14:11:03 +0000

t1.to_f * 1000
=> 1575555063351.479

Ruby側でto_fメソッドを使い、1000を掛けることでミリ秒に変換。

JavaScript側でnew Date()の引数にそのミリ秒を渡す。

let d1 = new Date(1575555063351.479)

d1
// Thu Dec 05 2019 23:11:03 GMT+0900 (日本標準時)

2.JavaScript → Ruby

let d2 = new Date()

d2
// Thu Dec 05 2019 23:20:04 GMT+0900 (日本標準時)

d2.getTime() / 1000
// 1575555604.804

JavaScript側でgetTime()で拾った数値を1000で割る。

Ruby側でTime.at()の引数にその数値を渡す。

Time.at(1575555604.804)
=> 2019-12-05 14:20:04 +0000

【参考】公式リファレンスより

###【Ruby】 Timeオブジェクト 単位

Time オブジェクトは時刻を起算時からの経過秒数で保持しています。起算時は協定世界時(UTC、もしくはその旧称から GMT とも表記されます) の 1970年1月1日午前0時です。なお、うるう秒を勘定するかどうかはシステムによります。

class Time (Ruby 2.6.0 リファレンスマニュアル)

###【JavaScript】 Dateオブジェクト ミリ秒単位

日付や時刻を扱うことが可能な、JavaScript の Date インスタンスを生成します。Date オブジェクトは、1970 年 1 月 1 日 (UTC) から始まるミリ秒単位の時刻値を基準としています。

Date - JavaScript | MDN

【おわりに】

最後まで読んで頂きありがとうございました:bow_tone1:

特にJavaScriptと他言語は頻繁に関わってくると思いますが、言語間でエラーが出たらそもそも前提が違うという視点を持って対処していかないといけないですね:thinking:

【参考にさせて頂いたサイト】(いつもありがとうございます)

9
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?