Rails6.1以降のform_withのデフォルトはlocal: true だった！(非同期通信)

form_withでリクエストを送る際にこれがJS形式ではなくHTML形式のリクエストになってしまい、非同期通信がずっとできなかった。

この問題にずっと悩まされていたのだが、今日ついに本当の原因を発見することができた。

タイトルにある通り、Rails6.1以降のform_withのデフォルトはlocal: true 
つまりHTML形式のリクエストが送信されるらしい。

参照記事：
Rails6.1からform_withがデフォルトでdata-remote = "true"オフになっていた。

従ってform_withで非同期通信に必要なJS形式のリクエストを送信するには以下の設定が必要になる。

# config/application.rb で以下の記述を追加

config.action_view.form_with_generates_remote_forms = true

今まで参照していた記事がRails5系を使っており、こちらはデフォルトがJS形式だった。

新しい機能を実装するときは同じバージョンの記事を参照べきだということを身をもって体感した。

非同期通信に関するすべての問題がクリアになり、今日も非同期通信の実装を順調に進めることができた。今日非同期通信化したのはフォロー機能。

昨日のお気に入り登録に次いで、フォロー機能もヌメヌメに動作してくれるのは大変喜ばしい。

「フォローする・しない」ボタンと「フォロワー」の別々の欄を更新する必要があったが、2種類の部分テンプレートを用意することでうまく対応することができた。

# follows/creare.js.erb

# フォロワーの欄を更新する部分テンプレート
$("#follower_index").html("<%= j(render partial: "follows/follows", locals: {followers: @followers }) %>");

# ボタンを更新する部分テンプレート
$("#follow_button").html("<%= j(render partial: "follows/check_follow", locals: {check_follow: @check_follow }) %>");

フォロー登録時にフォロワーの欄が縦に長くなることにより、他のブロックの大きさも変わってしまう。ここは後々改善しようと思う。

実装が早く進んだので計画表を更新した。

明日はコメント機能をJqueryを用いた非同期通信に切り替える。その後はトップページに非同期通信を用いて表示の切り替え機能を実装する予定。引き続き実装に励んでいく。