Help us understand the problem. What is going on with this article?

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

【はじめに】

先日、こちらの記事を書きました。
【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:

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away