【Rails】form_withとは - プログラミング学習

今回はRailsで入力フォームを作成するときに登場するform_withメソッドについて見ていきます。

form_withヘルパーとは
そもそもフォームとは
form_withヘルパーの使い方

form_withヘルパーとは
まず初めにform_withヘルパーとはどのようなものなのかについて見ていきます。

form_withとは、railsで情報を送信するためのヘルパーメソッドです。 form_withを使うことにより、簡単に入力フォームに必要なHTMLを作成することができます。
引用元：【Rails】 form_withの使い方を徹底解説！ | Pikawaka - ピカ1わかりやすいプログラミング用語サイト

こちらのサイトによるとform_withとは簡単に入力フォームに必要なHTMLを作成することができるヘルパーメソッドのことのようです。
つまりform_withを理解するためにはHTMLの入力フォームについての理解が必須となります。
なので、HTMLの入力フォームについて見ていきましょう。

ウェブフォームとは
ウェブフォームとはユーザーがウェブサイトへデータを送るためのものです。
送信されたデータはウェブサーバーに送られて処理、保存されるなどして扱われます。
このウェブフォームには以下のHTML要素が使用されます。それぞれ詳しく見ていきましょう。

formについて全てのフォームはこの
タグから始まります。このタグでフォームを構成する部品を囲います。

<form action="/my-handling-form-page" method="post">
</form>

このフォーム内でフォーム動作を設定するための属性をサポートすることができます。
属性の中でも特に大切よなるのは以下の2つです。

action属性…フォーム内で収集したデータを送信する場所のURLを定義する。
method属性…データを送信するために使用するHTTP メソッドを定義する。
その他にもたくさんの属性がありますがとりあえず上記の2つを押さえておきましょう。

labelについてこのタグはフォームの部品に対して名前を付けることができます。
以下のコードのようにlabel forの形で名前を指定することによって入力部分との紐づけをすることが可能になります。

<form action="/form.php" method="post">
        <div>
            <label for="name">名前</label>
        </div>
</form>

inputについてこのタグは実際に入力を行うためのフィールドを設置する役割も持ちます。
inputタグではinput = "text"などの形で属性を指定することができ、この属性によって入浴される値の種類(メールアドレス、テキストなど）を決めることができる。
また、inputタグ内のidがlabelのfor属性と日もずいている。
さらにname="name"の部分ではそれぞれの入力した値に対して名前を付けているので複数のデータが送信された場合でも値の識別を行うことができます。

 <form action="/form.php" method="post">
        <div>
            <label for="name">名前</label>
            <input type="text" id="name" name="name">
        </div>

textareaについてこのタグではinputタグのtext属性と同じような外観を作ることができ、複数のテキストを入力することができます。

<label for="message">内容</label>
            <textarea id="message" name="message"></textarea>

buttonについて最後のタグのbuttonはユーザーがフォームに記入したらデータを"送信"するためのボタンを追加します。
buttonタグはsubmit属性を受けることでボタンをクリックするとフォームのデータを、要素の action 属性で定義したウェブページへ送信してくれます。

<li class="button">
  <button type="submit">メッセージを送信</button>
</li>

ここまででウェブフォームがどのようにして構成されているかを学ぶことができました。
次に本題であるform_withヘルパーメソッドによってウェブフォームを書くことがどのように簡略化されるのかについて見ていきましょう。

form_withの使い方
form_withヘルパーでは以下のようにコードを記述することで先ほど紹介したウェブフォームに必要なHTMLを生成してくれます。

<%= form_with model: @user do |f| %>
  <%= f.label :name %>
 <%= f.text_field :name, id = "task_name" %>
  <%= f.submit '登録' %>

また、データの送信先については、:urlオプションを追加することによっても指定できますが、
渡されたモデルの状態(①新規②既存)によって自動推定をしてくれるます。
新規の場合であればcreateアクションに既存の場合であればupdateアクションに送信されます。

以上でform_withに関する説明を終わります。
長くなってしまいましたがフォームに対する理解を深めることでform_withヘルパーに対する理解も深まったと思います！

参考記事： https://qiita.com/hakusai_it/items/234d10c97c380294c285

初めてのフォーム - ウェブ開発を学ぶ | MDN

【HTML入門】formタグを使ってフォームを作る方法を1から解説 | 侍エンジニアブログ