【Rails】formヘルパーの理解

※この記事は有料設定ですが、無料で全て読めます。
役に立ったら投げ銭してください。

Railsチュートリアル完走後の時の私が、「こんなことを教えてくれたらな」とか「こんなことを知りたかった」と思った内容を書きました。

◇formヘルパー

Railsではformに関するヘルパーが用意されています。

・form_for
・form_tag
・form_with

それらの細かい使い方についてはRailsドキュメントなどを参照してもらうとして、今回はもっと根本的な理解について説明します。

◇formヘルパー丸覚えしがちだけど・・・

当時の私がそうでしたが、「どのように動いているのか」というロジックの部分の理解をせずに、ただただformヘルパーの使い方（構文）を丸暗記してしまってました。しかし、丸暗記したところで理解が足りなければ応用は効きません。これらのヘルパーが一体、裏で何をしているのかを理解しましょう、

◇実はHTMLに変換しているだけ

結論をいうとformヘルパーはhtmlに変換しているだけです。
htmlのformタグをいい感じに書いてくれるのがformヘルパーです。
つまり、極論を言えばformヘルパーを使わずとも、html文を直接記述すればフォームが作成できます。

私もそうでしたが、そもそもhtmlをきちんと勉強してformタグの存在を知っていないと、この事に気がつきません。
この事に気がつかないと、formヘルパー丸暗記に陥ってしまいがちです。
(※別に批判のつもりではないですが、progateではhtmlのformタグについての学習がなかった（はず）ので、「progate→railsチュートリアル」という、よくある勉強だとここでつまずいてしまいます)

◇まずはhtmlでのformを学ぶべき

一般的な連絡フォームを作るのを想定しましょう。（↓みたいなやつ）

<form>、<label>、<input>、<textarea>、そして <button>のhtml要素を使用します。

<form>要素

すべての HTML フォームは、以下のように <form> 要素から始まります

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

</form>

action 属性：フォームで収集したデータの送信先URLを定義
method 属性：データを送信時のHTTP メソッド ("get" や "post") を定義

<label>、<input> 、 <textarea> 要素

連絡フォームはとてもシンプルで 3 つのテキストフィールドを持っており、それぞれにラベルがついています。名前の入力フィールドは、基本的な単一行のテキストフィールドです。メールアドレスの入力フィールドは、メールアドレスだけを受け付ける単一行のテキストフィールドです。メッセージの入力フィールドは、基本的な複数行のテキストフィールドです。

HTML コードで、それらは以下のようになります:

 <div>
   <label for="name">Name</label>
   <input type="text" id="name" name="user_name">
 </div>
 <div>
   <label for="mail">E-mail</label>
   <input type="email" id="mail" name="user_mail">
 </div>
 <div>
   <label for="msg">Message</label>
   <textarea id="msg" name="user_message"></textarea>
 </div>

注目して欲しいのは"name"という属性です。nameで定義されている文字列がHTTPリクエストで送信するパラメーターのkeyとなります。そしてフォームランに記入した文字列がvalueとして格納されて送信されます。

HTTPリクエストのパラメーターについてはこちらで解説してます。

<button>要素

</form>の直前に以下の行を追加します

<div class="button">
 <button type="submit">Send</button>
</div>

submit 属性：クリックするとフォームのデータを、 <form> 要素の action 属性で定義したURLへ送信します。

おさらい

全体的になコードはこんな感じになります。

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div>
    <label for="msg">Message</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
  <div class="button">
    <button type="submit">Send</button>
  </div>
</form>

◇勉強のやりかた

ドキュメントを見ながらform_tag, form_for, form_with で実装してみて、実際に変換されたhtmlコードを覗くのが一番の近道かなと思います。このとき、色々ヘルパーでの引数を変化させながらhtmlを確認すると理解しやすいのかなと思います。
（htmlでの確認の仕方は、ブラウザがchromの場合右クリックで「ページのソースを確認」で見る事ができます）

=======================================================

◇この記事が役に立ったら

記事の内容としてはこれでおしまいですが、もしもこの記事が役に立たら、ページ下の「気に入ったらサポート」ボタンから投げ銭して頂けると幸いです！
noteの会員でない方でも、下の「記事を購入する」ボタンからこの記事を100円で購入することが可能です！
あなたの投げ銭がモチベーションに繋がるので、よろしくお願いします！