Rails6とaxiosを連携させてデータを受け渡す！

実現したいこと

フロントエンドのデータをバックエンドに渡したい！

↓詳しく↓

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を動かしてみると、データの受け渡しができているはずです🎉

参考にさせていただいたサイト

• https://github.com/axios/axios#instance-methods
• https://qiita.com/s_taro/items/30114cfa370aac6c085f

最後に

JavaScriptからRailsへのデータの受け渡しの記事が全くなかったので執筆しました！
本記事が多くの悩める方に届けば幸いです🌱