【Rails】gonっていうRailsで定義した変数をJSで使えるgem

【Rails】gonっていうRailsで定義した変数をJSで使えるgem

こんにちは、Mako(@makokamiya)です。

Startup Lab LagoonTOMONIとのコラボ、「実践!開発コース」での学習記録です。

gonとは

タイトル通りですが、「gon」というgemはRailsで定義した変数をJavaScriptでも使えるようにするRubyのライブラリです。

https://github.com/gazay/gon

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

https://rubygems.org/gems/gon

ちなみに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がたくさんあるので、どんどん使ってどんどん紹介して行きたいです!

ではまたー!