Ruby on Railsでform_withを使う方法を現役エンジニアが解説【初心者向け】

Ruby on Railsでform_withを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Ruby講座の内容をもとに紹介しています。
 

 

目次

• Ruby on Railsのform_withとは
• form_withを使う方法
• form_withでよく使われるメソッド
• 実際に書いてみよう
• まとめ

 

Ruby on Railsのform_withとは

form_withとは、Railでフォームタグを簡単に作成するためのヘルパーです。使い方をマスターすれば、コーディングがずっと楽になります。RailsでWebアプリケーションを作成する際に、ほぼ必須のヘルパーです。

form_withは、Rails5.1以上で推奨されているヘルパーです。以前から、form_forやform_tagというヘルパーが用意されていましたが、form_withに統合されました。

form_forについては、Railsのform_forの書き方を現役エンジニアが解説【初心者向け】を参照してください。
 

[PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中

form_withを使う方法

form_withは、

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

と書きます。

モデルには、@userや@postなどモデルオブジェクトを入れる場合に使います。URLベースは、URLを指定する場合に使います。スコープには、formのフィールド名にスコープを追加する場合に使います。オプションには、送信先のurlやタグの設定（クラスをつけたり、MIMEタイプを指定したり）をします。

フォームの中身には、色々なフィールドを生成できるFormBuilderオブジェクトを利用したメソッドが使えます。
 

form_withでよく使われるメソッド

form_withでよく使われるメソッドは以下の通りです。

• label                     ラベルテキスト
• check_box          チェックボックス
• password_field  パスワード入力フィールド
• submit                 送信ボタン
• text_area            複数行入力テキストエリア
• text_field            テキスト入力フィールド

 

他にも利用できるメソッドはたくさんあります。詳しくは、Ruby on Rails公式のフォームヘルパーの説明を参照してください。
 

実際に書いてみよう

URLを指定する場合

<%= form_with url: users_path do |f| %>
  <%= f.label :name, '名前' %>
  <%= f.text_field :name %>
  <%= f.submit "送信" %>
<% end %>

と書きます。nameという属性を持つusersモデルを使った例です。url: users_pathで、URLを指定しています。

f.とすることで、ポストモデルとラベル(label)やテキストボックス(text_firld)を紐づけることができます。

f.labelは、contentのラベルタグを生成し、f.text_fieldは、nameのテキストボックスを生成します。f.submitは、このフォームの送信ボタンを生成します。

Webブラウザで表示(実行)すると、以下のようなタグが生成されます。

<form action="/users" accept-charset="UTF-8" data-remote="true" method="post">
  <label for="user_name">名前</label>
  <input type="text" name="name" id="name" />
  <input type="submit" name="commit" value="送信" data-disable-with="送信" />
</form>

 

モデルを指定する場合

<%= form_with model: @user do |f| %>
  <%= f.label :name, '名前' %>
  <%= f.text_field :name %>
  <%= f.submit "送信" %>
<% end %>

と書きます。@userにuserモデルのインスタンスを格納している時の例です。以下のようなタグが生成されます。

<form action="/users" accept-charset="UTF-8" data-remote="true" method="post">
  <label for="user_name">名前</label>
  <input type="text" name="user[name]" id="user_name" />
  <input type="submit" name="commit" value="送信" data-disable-with="送信" />
</form>

actionが”/users” となり、labelやidは”user_name”となり、inputのnameはuser[name]となります。
 

スコープを設定する場合

<%= form_with url: users_path, scope: :scope1 do |f| %>
  <%= f.label :name, '名前' %>
  <%= f.text_field :name %>
  <%= f.submit "送信" %>
<% end %>

と書きます。実行すると以下のようなタグが生成されます。

<form action="/users" accept-charset="UTF-8" data-remote="true" method="post">
  <label for="user_name">名前</label>
  <input type="text" name="scope1[name]" id="scope1_name" />
  <input type="submit" name="commit" value="送信" data-disable-with="送信" />
</form>

inputのnameが、scopeを反映した”scope1[name]”となります。
 

オプションを設定する場合

<%= form_with url: users_path, class: "form_class", local: true do |f| %>
  <%= f.label :name, '名前' %>
  <%= f.text_field :name %>
  <%= f.submit "送信" %>
<% end %>

と書きます。実行すると以下のようなタグが生成されます。

<form class="form_class" action="/users" accept-charset="UTF-8" method="post">
  <label for="user_name">名前</label>
  <input type="text" name="scope1[name]" id="scope1_name" />
  <input type="submit" name="commit" value="送信" data-disable-with="送信" />
</form>

class=”form_class”が、class: “form_class”オプションによって追加されています。

data-remote=”true”が、local: trueオプションによって削除されています。ちなみにdata-remote=”true”は、画面遷移しない通信(非同期通信)のための指定です。この例では同期通信の指定となります。
 

まとめ

formはWebアプリケーションでよく使われます。

form_withの使い方をマスターして積極的に使ってみましょう。
 

筆者プロフィール

伊藤広明（いとうひろあき） 1990年代からソフトウェア開発を仕事としてはじめ、2000年ごろからWEBエンジニアの仕事にも従事。 世の中で末長く使ってもらえるシステム開発が信条。後進の育成にも力を入れている。 作れるもの：Webシステム、スマホアプリ 書ける言語: Ruby・PHP・Python・Java・Swift・C#・C/C++・JavaScriptなど 経験があるフレームワーク: Laravel・Ruby on Rails・Apache Strutsなど

 

 

TechAcademyでは、初心者でも、Ruby on Railsを使ったプログラミングを習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。