【Rails】同期送信・非同期送信について

開発ツールのソースに下記が表示されていました。

rails-ujs.js:649 Uncaught Error: rails-ujs has already been loaded!
    at ./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.start (rails-ujs.js:649:1)
    at ./app/javascript/packs/application.js (application.js:15:1)
    at __webpack_require__ (bootstrap:19:1)
    at bootstrap:83:1
    at bootstrap:83:1

チェックすべきエラー部分：
rails-ujs has already been loaded!（１行目）
⇒rails-ujs が重複して読み込まれていることを意味する。

---

rails-ujsとは

Railsが提供するフロントエンド用のJavaScriptライブラリ。
非同期フォーム送信などを行う。
（form_with や form_forのリモートリクエストを有効化する）

エラーメッセージの２～３行目から…

• Webpacker：app/javascript/packs/application.js 内で rails-ujs を import している。
• Sprockets：app/assets/javascripts/application.js 内で //= require rails-ujs を指定している。

ということがわかる。

---

非同期フォーム（AJAXフォーム）とは

• フォームの送信を、ページ全体を再読み込みせず行う仕組み。
• JavaScriptを利用してフォームデータをサーバーに送信する。（AJAXで送信）つまり、JavaScriptが必須になる。
• サーバーからの応答を動的に処理し、必要な部分だけを更新する。

例：
remote: true を使用することで、form_with や form_for がAJAXを利用して非同期通信を行うようになる。

<%= form_with model: @task, remote: true do |f| %>
  <%= f.text_field :title %>
  <%= f.submit '保存' %>
<% end %>

AJAX（Asynchronous JavaScript and XML）とは

非同期送信の技術。

使用例：

• 動的なデータ更新。
  TwitterやFacebookのフィード更新、検索結果のリアルタイム更新、フォームのバリデーションなど。
• ページ全体ではなく、ページの一部だけを更新したい場合。
  コメントの投稿や商品の在庫確認など。
• サーバーとのやり取り

---

同期フォームとは

local: trueを使用すると、通常のフォーム送信となり、フォーム送信時にページ全体が再読み込みされる。
これにより、AJAXを使わない通常のフォーム送信が行われる。

JavaScriptに依存せず、通常のHTMLフォームとして動作する。
一時的に同期フォームにして確認するなど、エラーの原因を特定するために使える。

<%= form_with model: @task, local: true do |f| %>
  <%= f.text_field :title %>
  <%= f.submit '保存' %>
<% end %>