【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 gonbundlerで管理している場合は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がたくさんあるので、どんどん使ってどんどん紹介して行きたいです！
ではまたー！