form_withと非同期通信を

#本記事の内容
・本記事ではform_withについて自身の備忘録も兼ねて説明していきます。
誤った情報等あるかもしれませんが、その場合はご指摘いただけますと幸いです。

#バージョン
Ruby(2.6.5)
Ruby on Rails(6.0.3.5)
※ターミナル上でrails -v、ruby -vと実行することでバージョンの確認ができます。
#form_withとは
Railsでフォームタグを簡単に作成するためのヘルパーメソッドのこと。
ヘルパーメソッドとは主にviewにおいてHTMLタグを出現させたり、テキストを加工するために用意されているメソッドのことです。
#使い方
下に簡単にコードを記述してみます。

<%= form_with (モデル or URLベース,[スコープ],[オプション]) do |f| %>
    フォームの中身
<% end %>

フォームの中身には様々なメソッドを使用できる。
・label
→ラベルテキスト
・check_box
→チェックボックス
・password_field
→パスワード入力フィールド
・submit
→送信ボタン
・text_area
→複数行入力テキストエリア
・text_field
→テキスト入力フィールド
#local: trueの記述
local: trueの記述をしない場合、Ajax通信(非同期通信)がされる。
※AjaxはAsynchronous JavaScript + XMLの略称。
JavaScriptとXMLを用いて非同期でサーバーとの通信を行うという意味。

#非同期通信
webページではwebブラウザからサーバーにリクエストし、レスポンスがかえってくるが、その際に一部の情報のみをリクエストすることによってページ全体のリクエストをしない通信のこと。

#XMLHttpRequest
ブラウザ上でサーバーとHTTP通信を行うためのAPI。このAPIを使用してJavaScriptが実装される。

#APIとは
アプリケーションプログラミングインタフェースの略称。ソフトウェアの機能を共有できる仕組みのこと。
ex)FacebookやGoogleアカウントを使用したログイン機能など。詳細についてはこちらのURLからご覧ください。非常に分かりやすく、具体例もあるため理解しやすいと思います。
引用元：SAMURAIENGINEERBlog様
https://www.sejuku.net/blog/7278

#JavaScript
ブラウザ上でWebページをダイナミックに動かすプログラムのことです。
上に出てきたXMLHttpRequestはJavaScriptの組み込みオブジェクトです。
故にAjax通信を行う際はJavaScriptも必須となります。
#DOM
Document Object Modelの略称。HTML および XML ドキュメントのための API のこと。
これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。
Ajax通信により動的なページを作成する際にHTML・XML上のどの要素に手を加えるのか指定するが、その際に対象をツリー構造として展開する事でアプリケーション側に文章の情報を伝えて加工や変更をしやすくすることができます。
#XML
Extensible Markup Languageの略称。文書やデータの意味や構造を記述するためのマークアップ言語の一つ。現在ではXMLの代わりにJSONという型がよく使われる。Ajaxの名前には含まれていないが混同しない様に注意。

#Json
JavaScript　Object Notationの略。
軽量のデータ交換フォーマットのこと。
JavaScriptのオブジェクトの書き方を元にしたデータ定義方法のこと。
Phython,PHP,JavaScript,C++,Javaなど様々な言語でサポートされているため、各プログラミング言語間でのデータの受け渡しがとても簡単に行われる。

#最後に
form_withから派生して様々な知識に触れてきました。
私自身も完全に理解できているわけではないので、実際に手を動かしたり何度も見返すなどして学習します。
最後までお読みいただきありがとうございました。

#引用
Qiita
https://qiita.com/iverson3kobe0824/items/ab86394f3f04360e6b9f
https://qiita.com/hmmrjn/items/24f3b8eade206ace17e2
https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9
rails ガイド
https://railsguides.jp/form_helpers.html