Ajax通信とform_withメソッド(開発者ツール、ネットワークの確認方法)

パーフェクトRubyonRails輪読会

現在、フィヨルドブートキャンブ内にて、＠Sakiさん主催の「パーフェクト Ruby on Rails輪読会」が行われています。 こちらの本、大変参考になりますが、なんだか難しいし、もう少し深掘りがしたい！と思いまして、このブログに予習・復習した内容を簡単に載せていきたいなと考えています。

6-4-5

フォームからイベント作成、SJRを利用してエラーメッセージを出そうとしたときに、エラーが出てしまった。

ActionController::UnknownFormat in EventsController#create
EventsController#create is missing a template for this request format and variant. request.formats: ["text/html"] request.variant: []

なにやらテンプレートがない。けれども今回はviewファイルを作るわけでもないし、なぜだろう。

原因：フォームにlocale: trueを付けていたからだった。

今回はSJRということでAjaxを利用してPOSTしようとしていた。
コードを書いていく中で、いつもの流れでlocale: trueをつけてしまっていたよう
つけたことで同期通信となっていた。Railsのバージョンは6.0系。

form_withメソッドは、デフォルトでdata-remote="true"がついている。
Ajaxを無効にしたいときにはlocale: trueをつけると同期通信
ちなみに、Railsのバージョンが6.0、5.2、5.1であればform_withのデフォルトはlocal: false（＝非同期通信）のよう
（参考：Rails 6.1で form_withのデフォルトが「remoteなし」になった（翻訳）｜TechRacho by BPS株式会社）

あとはこんなとき、リクエストをDevツールで確認しておけばすぐに解決だった。

失敗時(locale: trueをつけていた)

リクエストヘッダー

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

あまり見慣れない406エラー 。参考ページの406エラーへの対処法と原因の見つけ方には、

サイトのサーバーが誤ったファイル形式を送信したため、受け入れることができません。

どうやらこれっぽい。MIMEタイプの相違が原因。
要求したリソースのMIMEタイプはdocument、 リクエストヘッダーのAcceptにもクライアント側が受信可能なデータ形式に細かく書かれていた。

成功時

リクエストヘッダー

Accept: text/javascript, application/javascript, application/ecmascript, application/x-ecmascript, */*; q=0.01

ステータスは200ということで成功。
要求したリソースのMIMEタイプはxhr、Ajaxのx。Ajax通信が行われていることがわかる。
Acceptも確認するとJavaScriptファイルを受け取りたいということになっている。

リクエストに関するエラーはネットワークタブで確認。
Devツールでのネットワーク確認方法はChrome DevTools の使い方を参考にした。