開発環境

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のカウントを定義して、リアルタイムでカウント表示したりというときに使えそう。