Ruby on Rails を初めて紹介されたとき、私はかなり驚かされました。 これは、私が学んだ最初のプログラミング フレームワークで、正直なところ、私は恋に落ちました。 Sinatra を使用してアプリケーションを構築する方法を学んだばかりで、これはかなり素晴らしいツールだと思いましたが、Rails で何ができるかを見て…

Rails の主要機能の 1 つで、本当に楽しく使用したのが From ヘルパーです。 これにより、フォームを構築するためにすべての HTML を書き出す必要がなくなり、その結果、より複雑な機能を実行できるようになりました。 この記事では、Rails で提供されているさまざまなフォーム ヘルパーを詳しく説明し、Rails 5.1 リリースで登場した新しいヘルパーにも触れます。

HTML でフォームを作成することは、特に入力フィールドが多くて長い場合、時に厄介なことがあります。 フォームが特定の API エンドポイントにデータを送信したり、データベース モデルと関連付けたりする必要がある場合は、さらに厄介になることがあります。 以下は、ユーザーを作成するための html フォームです:

<form class="new_user" action="/users" method="post">
<label for="user_name">Name</label>
<input type="text" name="user">
<br>
<label for="user_password">Password</label>
<input type="password" name="user">
<br>
<input type="submit" name="commit" value="Create User" data-disable-with="Create User">
</form>

見ての通り、これをすべて書き出すと、かなり早く複雑になります。 フォームをよく見ると、新しいユーザーを作成するためにフォームに action と method 属性を渡していることがわかります。 これはこれで素晴らしいのですが、Railsはフォームの送信に関して非常にうるさいのです。 この特殊なフォームは、送信されたときにカットされることはありません。

フォームヘルパー

私が初めてフォームヘルパーの使い方を学んだとき、正直言って、これが何をするものなのか信じられませんでした。 前に行ったフォームからわかるように、実現にはある程度の時間と複雑さが必要です。 しかし、フォーム ヘルパーを使用すると、これはかなり少ない作業で、かなりの「マジック」で実現できます。

Railsで迅速かつ有用なフォームを構築するのに役立つヘルパーは、form_tagform_forform_withの3種類です。

form_tag

form_tagは最も基本的なヘルパーで、「魔法」のようなことはあまり行いません。 このヘルパーはフォームを構築してくれますが、URL パスをより明確に宣言する必要があり、フォームが Controller#action にアタッチされていない場合に主に使用されます。 例として、基本的な検索フォームを使ってみましょう。

<%= form_tag("/search", method: "get") do %>
<%= label_tag(:q, "Search for:") %>
<%= text_field_tag(:q) %>
<%= submit_tag("Search") %>
<% end %>

これにより、次のような HTML が生成されます。

<form accept-charset="UTF-8" action="/search" method="get">
<input name="utf8" type="hidden" value="&#x2713;" />
<label for="q">Search for:</label>
<input name="q" type="text" />
<input name="commit" type="submit" value="Search" />
</form>

見てわかるように、form_tag でフォームパラメータに渡す経路を宣言しています。 これは <%= form_tag("/search", method: "get") do %> 行で行われており、http リクエストを指定していることもおわかりいただけると思います。 これでもかなりすごいことで、基本的なフォームヘルパーでもRailsがいろいろやってくれているのがわかりますが、Railsにはこれより強力なバージョンがあります。 このヘルパーを使うと、フォームをオブジェクトにバインドして、オブジェクトの作成/編集を行うことができます。 form_tag の例で見たように、フォームのパラメータを送信するために使用する URL パスを明示する必要がありましたが、form_for によってこれを抽象化することができるようになりました。

<%= form_for @user do |f| %> <%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.submit %><% end %>

これは、最初の html フォームの例で見たのと同じコードを生成します。

<form class="new_user" action="/users" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token"
value="QPJXa5iS/XNvodHhpcwV5q42RoGFWsmZkwL3ATHFfeKqxZ8IQsLs1QjJvcrdO3BwCaOfQ4TxNLDD0b6VbxiACg=="> <label for="user_name">Name</label>
<input type="text" name="user">
<br>
<label for="user_password">Password</label>
<input type="password" name="user">
<br>
<input type="submit" name="commit" value="Create User" data-disable-with="Create User"></form>

このコードが form_for を使用することでどれだけきれいに見えるかはすぐにわかるでしょう。 正直なところ、このような小さなコードでこれだけのhtmlを作成できることに少し驚きましたが、本当にそうなっているのです! form_for の最初の行で、ユーザーのインスタンス変数を渡して、このフォームをそのオブジェクトにアタッチしているのがわかると思います。 この変数を渡すことのもうひとつの利点は、Railsが適切なURLパスを探してくれるということです。form_tagではデータをどこに送るか明示的に指示しなければなりませんでしたが、これはとても便利です。

form_with

  • form_withとその使い方について話す
  • Use code snippets for example

リリースノートでは、form_forとform_tagがform_withに統合されると書いています。 この新しいヘルパーの最大の利点は、URL、スコープ、またはモデルに基づいて form_with フォーム タグを生成できることです

早速試してみましょう!

form_with using URLs

form_for で使用した同じ例を使用して、form_withURL だけを使用して適用してみます。

<%= form_with url: user_path do |f| %>
<%= f.label :first_name %>
<%= f.text_field :first_name %>
<%= f.label :last_name %>
<%= f.text_field :last_name %>
<%= f.submit %>
<% end %>

見ての通り、特定の URL を指定する form_tag と非常に似ています (user_path)

form_with using models

form_with で本当に素晴らしいことは、form_for と同様にモデル オブジェクトを渡すために使用できる点です。

<%= form_with model: @user do |f| %>
<%= f.label :first_name %>
<%= f.text_field :first_name %>
<%= f.label :last_name %>
<%= f.text_field :last_name %>
<%= f.submit %>
<% end %>

これは、form_for を使用して生成されたものと同じ HTML を作成します。

form_withからの最大の利点は、form_tagform_for のどちらを使用するかを決定することに悩む必要がなくなったということです。

結論

Rails のフォームヘルパーは素晴らしく、新しく追加された form_with は本当に form_tagform_for の両方の利点をまとめています。 これで、どんなニーズに基づいてもフォームを構築できるツールを手に入れました。 検索フォームであろうと、データベースにデータを永続化するフォームであろうと、Rails フォーム ヘルパーで対処できます。

Rails ガイドを読んで、より複雑なフォームの作成について学習することもお勧めします。 モデルにネストされた属性を受け取らせる、ネストされた属性を持つ、カスタム入力フィールドを作成するための他のフォームヘルパーなど、かなりのオプションが用意されています。 これらのドキュメントを読むと、遊べることがたくさんあるので、ぜひ活用してください!

ハッピー コーディング!

コメントを残す

メールアドレスが公開されることはありません。