【Rails】gonっていうRailsで定義した変数をJSで使えるgem
- 2020.02.18
- プログラミング学習
- gem, Ruby, Ruby on Rails, 実践!開発コース/TOMONI×Lagoon

こんにちは、Mako(@makokamiya)です。
Startup Lab LagoonとTOMONIとのコラボ、「実践!開発コース」での学習記録です。
gonとは
タイトル通りですが、「gon」というgemはRailsで定義した変数をJavaScriptでも使えるようにするRubyのライブラリです。

すごく便利で使いやすく、バージョン管理もしっかり行われています。なんと1千万回以上もダウンロードされ、世界中のrails使いに愛されているようです。

ちなみにSinatraでgonを使いたい場合はこちらを参考にしてください。
https://rubygems.org/gems/gon-sinatra
https://github.com/gazay/gon-sinatra
さっそく使ってみよう!
gemのインストール
ではさっそくインストールから始めましょう。
gem install gon
bundlerで管理している場合はgemfileに追加して、インストールします。
gem 'gon'
bundle install
インストールしたgonを読み込む
<!DOCTYPE html>
<html>
<head>
<title>SampleGon</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= include_gon %> ←ここに追加!
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
これで準備は完了です!
gem install gon
でインストール- bundlerで管理している場合は、Gemfileに
gem 'gon'
を追記してbundle install
- headに
<%= include_gon %>
を追加して読み込む
コントローラーで変数を定義する
次はコントローラーで変数を定義します。
def show
@user = User.find(params[:id])
end
# usersテーブル#
# id | name #
# 1 | mako #
@userにはユーザーのidやnameなどのデータが格納されています。この変数をJSで使えるようにするには・・・
def show
@user = User.find(params[:id])
gon.user = @user ←"gon"をつけるだけ!
end
任意の変数名の先頭に”gon.”をつけるだけ!すっごく簡単です。
- “gon.user”のように変数の頭に”gon”をつけるだけ
JavaScriptで使う
さきほどコントローラーで定義した”gon.user”をJSで使ってみましょう。
window.alert(`hello,${gon.user.name}!`); ←そのまま使う!

できた!
さきほどコントローラーで定義した変数を使うだけです。
注目して欲しいのが、@userにはユーザーのidやnameなどのデータが格納されているので、”@user.id”や”@user.name”のように、“gon.user.id”や”gon.user.name”と書くことで値を使うことができます!
window.alert(
`hello,${gon.user.name}!\n
your id is... ${gon.user.id}\n
your name is... ${gon.user.name}`
);

- コントローラで定義した変数をそのまま使うだけ。
- “gon.user.id”や”gon.user.name”のように格納されている値を使うことができる。
まとめ
いかがでしょうか。とーっても簡単でしたね!他にも便利なgemがたくさんあるので、どんどん使ってどんどん紹介して行きたいです!
ではまたー!