実現したいこと
フロントエンドのデータをバックエンドに渡したい！
↓詳しく↓
JavaScriptのデータをaxiosを用いてDBに保存したい！
開発環境＆前提条件
Ruby 3.0.2
Rails 6.1.4.4
データを保存するDBテーブル等は作成済み
1. axiosの導入
インストール
ターミナル
$ npm install axios
CDN
任意のファイル
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
2. Javascriptへaxiosの記載
任意のJSファイル
// ↓受け渡したいデータを格納
const data = { score: gameScore, user_id: "<%= current_user.id if logged_in? %>", beat_id: "<%= @beat.id %>" }
// ↓送信したいURLと渡したいデータを指定
axios.post('/scores', data);
上記記述を任意のfunction内（clickなど）に入れてaxiosを発火させます！
私の場合、scores#createにpostでデータを送っています！
データの中身はscoreテーブル内のカラムに入れたい内容を格納しています！
上記を詳しく
// ↓受け渡したいデータを格納
const data = { カラム名: "渡したいデータ" }
// ↓送信したいURLと渡したいデータを指定
axios.任意のメソッド('任意のURL', data);
3. Rails側の設定
任意のコントローラ
class ScoresController < ApplicationController
protect_from_forgery
# 以下省略
データを受け渡したいコントローラにprotect_from_forgeryの記載をします！
外部からのPOSTのため、上記を記載する必要があります。（詳細）
ストロングパラメーターも以下のように修正します！
任意のコントローラ
class ScoresController < ApplicationController
protect_from_forgery
# 省略
private
def score_params
# requireを削除
params.permit(:score, :user_id, :beat_id)
end
end
上記の通り、requireの記述を削除してpermitのみにします！
4. 動作確認
1~3を行ったのち、axiosのあるfunctionを動かしてみると、データの受け渡しができているはずです🎉
参考にさせていただいたサイト
最後に
JavaScriptからRailsへのデータの受け渡しの記事が全くなかったので執筆しました！
本記事が多くの悩める方に届けば幸いです🌱