Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

こんな人に見て欲しい

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした