開発環境
- OS：macOS Big Sur 11.2.2
- Ruby：2.6.5
- Ruby on Rails：6.0.0
- テキストエディタ：Visual Studio Code
つまづいたこと
投稿の詳細画面から非同期通信でDB更新をしたいと考えたときに、更新に必要な値を更新アクションを定義しているコントローラーに渡せず詰まった。
コントローラーからビューファイルに値を渡すときはインスタンス変数を定義するが、JavaScriptへはどうしたらいいのだろう？と思い調べてみた。gonというgemの導入により実現できるらしい。
実践したこと
gonは簡単にJSファイルにデータを受け渡すために作られたgemらしい。（と、いうことは難しい手順を踏めば使わなくてもできるということか・・・）
使い方は、
①まずgemファイルにgonを定義
gem 'gon'
②gemをインストール
% bundle install
③includeの記述を追加
下記の通り、headのapplication.js読み込みより前に追加する
application.html.erb
<head>
~
<%= include_gon %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
~
</head>
これで準備は完了。あとは、
④受け渡したい値を「gon.〜」という名前で変数定義する
recipes_controller.rb
def show
# JSに渡す変数を定義
gon.receipe_id = @recipe.id
end
⑤受け取ったJSファイルで使用
clip.js
// clipコントローラーへのリクエスト
const XHR = new XMLHttpRequest();
const URL = `/recipes/${gon.receipe_id}/clips`
XHR.open('POST', URL, true);
XHR.responseType = "json";
XHR.send();
以上。意外と簡単にできる。
gonのその他の機能について
せっかくなので公式ドキュメントを見ていたら、`「gon.watch.〜」という指定の仕方を見つけた。
どうやら値の一定間隔での置き換え・リフレッシュに使う模様。
今回は利用しなかったが、更新したDBのカウントを定義して、リアルタイムでカウント表示したりというときに使えそう。