自己紹介
はじめまして、はる（@lemonade_37）と申します。
駆け出しエンジニアとして働き始めて約2ヶ月弱が経過しました🐣
概要
仕事中、form_with関係の実装で詰まり、自分の理解が浅かったツケが来たのを感じたので、調べてみました😇
お恥ずかしながら、スクール時代はRails5、今はRails7を触っており、Railsのバージョンごとでの違いがごちゃ混ぜになっていたこと、フォームのオプションやそもそもAjaxなどきちんと理解できていなかったので調べたことをまとめます。
間違っている箇所があるかもしれませんので、その際は是非教えて頂けると嬉しいです🙇
フォームの非同期送信に関するオプション
Rails5以前
フォーム送信時、デフォルトではページ全体がリロードされます。非同期処理をするにはオプションを明示的に設定します。
-
remote: true
Rails5以前でフォームのオプションで使われていました。Ajaxを用いて非同期にします。
Rails5以降
form_withメソッドが導入され、フォーム送信時はデフォルトで非同期送信になりました。
-
local: true
Rails5以降でフォームのオプションで使われていました。フォームが通常のHTTPリクエストとして送信され、ページ全体がリロードされます。
-
local: false
Rails5以降でフォームのオプションで使われていました。Ajaxを用いて非同期にします。
Rails7以降
デフォルトでTurboが有効化され、リンクやフォームが基本的に非同期送信になりました。
-
data: { turbo: false }
Rails7で導入されたTurbo Drive機能に関する設定です。フォームに限らず使用されます。
Rails7では、Turbo Driveはデフォルトで有効であり、リンクやフォームのクリックがページの全体リロード無しに非同期的に行われます。
この記載をすることで、Turbo Driveを無効にし、ページ全体をリロードする方式にします。
Ajaxとはそもそも何か
定義を調べてみました。Wikipedia1)より、
Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である。
XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る。
Ajax は『Asynchronous JavaScript And XML』の略
概念レベルでちゃんと理解できていない自分にとっては、こちらの記事が大変わかりやすかったです🙇♀️
HTTPリクエストとはそもそも何か
フォームのオプションでは、method: :postなどのようにリクエスト方法を指定することができます。
Railsのフォーム内で指定できるHTTPリクエストについて調べてみました。MDN2)より、
-
GET
GET メソッドは、指定したリソースの表現をリクエストします。 GET を使用するリクエストは、データの取り込みに限ります。 -
POST
POST は指定したリソースに実体を送信するために使用するメソッドであり、サーバー上の状態を変更したり、副作用が発生したりすることがよくあります。 -
PATCH
PATCH メソッドは、リソースを部分的に変更するために使用します。 -
PUT
PUT メソッドは対象リソースの現在の表現全体を、リクエストのペイロードで置き換えます。 -
DELETE
DELETE メソッドは、指定したリソースを削除します。
ここまで調べた上でformを再確認
ここまで調べた＋Railsガイドのフォームヘルパーのページを一通り読んでみた上で、
再度formを見てみます。
<%= form_with(model: @user, url: user_registration_path, method: :post, data: { turbo: false }) do |form| %>
この例の場合、
Userのmodelオブジェクトに紐づけて、user_registration_pathのurlに対して、POSTmethodでHTTPリクエストを送信する、フォームを生成しているということがわかりました。
またRails7において、このフォームではsubmit時にページ全体をリロードするようにdata: { turbo: false }が設定されています。
まとめ
今までオプションが多く、Railsのバージョンによっても書き方が変化したり、苦手意識を持ったままだったところを調べ、理解が少し深まりました。
また、ふんわりなんとなくAjaxって非同期通信のやつでしょ？という理解だったのが、実際の挙動について調べて勉強になりました。
まだまだRailsが深く理解できていない部分が多いため勉強していきます。
参考・引用記事
引用記事
1）Ajax - Wikipedia
2）HTTP リクエストメソッド - HTTP | MDN