【gem gon】Railsで定義した変数をさくっとJavascriptで使う

こんな人に見て欲しい

Railsで定義した変数をさくっとJavascriptで使いたい方へ。

経緯

Javascriptの処理をcurrent_userのidによって条件分岐したい
『でもどうやったら変数もってこれるんだああああ(泣)』
そんなときってありませんか？

偶然にも僕は昨日そんなタイミングがありました。

ということで、四苦八苦して何とか解決するに至ったので記録に残しておきます。

環境

• macOS High Sierra
• ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-darwin17]
• Rails 5.0.7
• gon (6.2.1)

手順

①gemをインストール

★Gemfileに以下のコードを記入する

gem 'gon'

★ターミナルで以下のコマンドを実行する

bundle install

②application.html.erbに設定追加

★headタグ内に以下のコードを記入する

application.html.erb

<%= include_gon %>

③controller.rbにJavascriptファイルで使いたい変数を定義

★controller.rbに以下のコードを記入する
※必要なのは『gon.current_id = current_user.id』の1行だけです。周りのコードに関してはお気になさらず...

muscles_controller.rb

def index
  @muscle = Muscle.all.order("created_at DESC")
  if user_signed_in?
    gon.current_user_id = current_user.id
    # 左辺にはgon.〇〇〇という形式で変数の名前を記入する。(頭にgon!!)
    # この名前を使ってJavascriptファイルから変数を呼び出す。
    # 右辺には代入したいオブジェクト(値)を記入する。
  end
end

④Javascriptファイルで変数を使用

★上述の変数を使ってJavascriptファイル内で変数を定義する、そして使う

muscle.js

$(function() {
    $(".action-btn").on("click", function () {
        var c_u_id = gon.current_user_id;
        //左辺にはこのJavascriptファイル内で使用する変数の名前を記入する。
        //右辺には先程controller.rbで定義した変数名を記入する。
        //あとは左辺に記入した変数名を使って、煮るなり焼くなり！！
        if(c_u_id != 1) {
            $(".muscle").addClass("protein");
            return false;
        }
    });
});

おわりに

以上、gem『gon』を使ってRailsで定義した変数の値をさくっとJavascriptで使う方法でした。

『もっと簡単にできる方法あるよーーー！』『ここ間違っているよーーー！』等ございましたらご連絡いただけると幸いです。

※参考ページ
GitHub - gazay/gon: Your Rails variables in your JS
https://github.com/gazay/gon