【Rails5】gem gonの使い方 ~RailsからJSに変数を渡す方法~

実装した機能

開発環境

ruby > 2.6.5
rails > 5.2.4.2
gon > 6.3.2

今回はシンプルに、RailsのControllerで定義した変数をJSに渡してhtmlに表示します。
Railsに標準搭載されているhoge.js.erb形式やcoffeescriptで書いたほうがスムーズだったりしますが、うまく表示できないときの回避策としても使えるGemかなと思ったのでご紹介します。

※注意
Gemの仕様上、htmlソース内に変数自体が表示されるので、セキュリティ的に隠す必要があるものには使わないほうが良いです。

導入方法

まずは、Gemfileに追加

gem 'gon'

そして、インストール

$ bundle install

RailsのView内にコードを記述
今回は全ページで使う想定ですが、必要なviewに記述されていればOKです。
JSを読み込むのと同じく、読み込みのタイミングによって挙動が異なるので読み込み順には注意しましょう。

・・・
<%= include_gon %>
<%= javascript_include_tag "application" %>
・・・
</body>

これで準備完了です。

変数を渡す

RailsのControllerでGon用の変数を定義します。
といっても、変数の頭にgon.をつけるだけです。

def show
  @user = User.find(1)
  gon.username = @user.name #これをJSに渡します
end

JSに変数を渡してhtmlに表示します。

・・・
<p id="name"></p>
・・・

・・・
let name = gon.username
$('#name').html(name);
・・・

このように表示されればOKです。

・・・
<p id="name">こうへい</p>
・・・

html内の表示について

冒頭で「html内に変数が見えちゃう」という話をしましたが
実際にはこのように読み込まれています。
良くも悪くもわかりやすい構造になっていますね笑

・・・
  <script>
    //<![CDATA[
      window.gon={};gon.username="こうへい";
    //]]>
  </script>
</body>
・・・

その他機能

単純に変数を渡す以外にも

• 配列、ハッシュを渡す
• 変数をすべて読み込む

などの使い方もできるようです。
むしろ、Gemの役割としてはこっちのほうが大きいのかもしれませんね。
詳しくは公式ページをご確認ください。

Gon公式
https://github.com/gazay/gon