【Rails】 form_withの使い方を徹底解説！

form_withとは、railsで情報を送信するためのヘルパーメソッドです。 form_withを使うことにより、簡単に入力フォームに必要なHTMLを作成することができます。

form_tagのように入力された情報をデータベースに保存しない時は、以下のように記述します。

1
2
3
<%= form_with url: "パス" do |form| %>
  <!--フォーム内容 -->
<% end %>

そして、データベースに保存する時は、以下のように記述します。

1
2
3
<%= form_with model: モデルクラスのインスタンス do |form| %>
  <!--フォーム内容 -->
<% end %>

この記事では、他のform系ヘルパーメソッドの使い分け、form_withの使い方など１つ１つ丁寧に解説します。

form系ヘルパーメソッドの使い分け

リンクをコピーしました

form_withはrails5.1から追加されたフォームを作成するためのヘルパーメソッドです。
それ以前はfor_tag、form_forと言ったヘルパーメソッドが使われていました。

form_tagはフォームに入力されたデータを保存する必要がない時に使われます。

1
2
3
4
<%= form_tag('/main', method: :post) do %> 
  <input type="text" name="nickname"> 
  <input type="submit"> 
<% end %>

それに対し入力されたデータを保存する必要があるときはform_forを使用します。

1
2
3
4
<%= form_for(@user) do |f| %>
  <%= f.text_field :name %>
  <%= f.submit %>
<% end %>

上の例文を見るとわかるようにform_forだとFormBuilderオブジェクトのヘルパーメソッドを使用している事がわかります。
form_tagとform_forで書き方が異なるのは不便なので、form_withではどちらの場合もFormBuilderオブジェクトのヘルパーメソッドを使って記述する事ができるようになりました。

form_withの基本的な使い方

リンクをコピーしました

それでは、form_withの基本的な使い方を確認してみましょう。
まずはmodelオプションを使った際の書き方です。

1
2
3
<%= form_with model: モデルクラスのインスタンス do |form| %>
  フォーム内容
<% end %>

次はurlオプションを使った時の記述です。

1
2
3
<%= form_with url: "パス" do |form| %>
  フォーム内容
<% end %>

下記のように記述します。

1
2
3
<%= form_with url: root_path do |form| %>
  フォーム内容
<% end %>

form_withの引数

リンクをコピーしました

modelオプションを使う場合、form_withの引数にはモデルクラスのインスタンスを指定します。
※（）は省略可能です。
モデルクラスのインスタンスとは保存したいテーブルのクラスのインスタンスのことです。
今回はusersテーブルに新たにレコードを作成したいので、コントローラー側で下記のように記述します。

1
2
3
def new
  @user = User.new
end

この@userをform_withの引数に指定するわけです。

コントローラーで作成したインスタンスがnewメソッドで新たに作成されて何も情報を持っていなければ自動的にcreateアクションへ、findメソッドなどで作成され、すでに情報を持っている場合はupdateアクションへ自動的に振り分けてくれます。

1
2
3
4
def new
  @user = User.new
end
# 新規に作成したレコードなのでcreateアクションが動く

ビューファイルを下記のように記述するとします。

1
2
3
4
<%= form_with model: @user do |form| %>
  <%= form.text_field :name %>
  <%= form.submit %>
<% end %>

コンパイルされると下記のようにcreateアクションが動くパスに変換されます。

1
<form action="/users" method="post" data-remote="true">

editアクションの時は下記のようになります。

1
2
3
4
def edit
  @user = User.find(params[:id])
end
# 既存のレコードを取得しているのでupdateアクションが動く

コンパイルされると下記のように各アクションが動くパスに変換されます。

1
2
<form action="/users/"編集するレコードのid" method="post" data-remote="true">
<input type="hidden" name="_method" value="patch">

ネストをしている時の書き方

リンクをコピーしました

ルーティングでネストを定義している時は記述が変わります。
記事に関するコメントを投稿するフォームを例に挙げてみます。
まずはコントローラーのインタンス変数の定義です。

1
2
3
4
5
6
7
8
9
def new
  @article = Article.find(params[:article_id])
  @comment = Comment.new
end

def edit
  @article = Article.find(params[:article_id])
  @comment = Comment.find(params[:id])
end

コメントは必ずいずれかの記事に紐づいているので、どの記事のコメントなのかという情報が必要になります。

ですので@article = Article.find(params[:article_id])でコメントする記事を取得しています。

ビュー側は下記のように引数に配列を渡す形になります。

1
2
3
4
<%= form_with model: [@article, @comment] do |form| %>
  <%= form.text_field :text %>
  <%= form.submit %>
<% end %>

コンパイルされると下記のようなコードになります。

1
2
3
4
5
# create時の例
<form action="/articles/1/comments" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" />

# update時の例
<form action="/articles/1/comments/1" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" />

html属性の付け方

リンクをコピーしました

下記のように記述するとフォームにhtml属性を付けることができます。

1
<%= form_with @user, 属性: ‘属性値' do |form| %>

例えばidにnew_formと付けたいときは下記のように記述します。

1
<%= form_with @user, id: 'new_form' do |form| %>

form_withではform_tagやform_forで自動で付与されていたhtml属性(idやclass)が付かなくなったので上のように定義する必要があります。

アクション名で記述してみよう

リンクをコピーしました

form_withはパスとhttpメソッドで次に動かすアクションを指定しなくても良いと書きましたが、ルーティングがうまくいかない時などは直接コントローラー名とアクション名を指定することもできます。

1
2
3
4
<%= form_with @user, url: {controller: 'users', action: 'index' } do  |form| %>
  <%= form.text_field :name %>
  <%= form.submit %>
<% end %>

投稿フォームの作り方

リンクをコピーしました

form_withで投稿フォームを作成するときは下記のように記述します。

1
2
3
4
<%= form_with model: @user do |form| %>
  <%= form.text_field :name %>
  <%= form.submit %>
<% end %>

このようにform.htmlタグ名 :カラム名と指定します。 カラム名は保存される先のテーブルのカラム名を指定します。

つまり上の例だとusersテーブルのnameカラムに投稿した内容が送られることなります。
送信ボタンはform.submitとするだけで作成されます。

form_withは最初は記述が難しそうに感じますが、実は非常にシンプルに記述ができます。

手元に置いておきたい１冊！

リンクをコピーしました

こちらの「パーフェクト Ruby on Rails」は、Ruby on Railsの基礎から複雑なデータ操作の実装など実践レベルの応用まで、非常に広範にわたる内容がこの１冊にまとめられています。

コンテナ利用などRails6.0からの変更点も詳しく解説されている良書です。

初学者にはやや難しい内容になっていますが、ここまでRuby on Railsの本格的な知識を広範囲でカバーしている技術書はあまりないでしょう。

また仕組みも解説してくれるので、「なぜそのようになるのか」をしっかりと理解させてくれます。

この１冊を手元に置いておいて損はありません！

パーフェクト Ruby on Rails　【増補改訂版】

Rails 6.0も含めて広い範囲を体系的に学ぶことができます。

楽天市場

Amazon

form_withで使用できるhtmlタグ

リンクをコピーしました

form_withで使用できるhtmlタグ名には下記の種類があります。

それではそれぞれのタグの具体的な使い方を見ていきます。

form.text_field

リンクをコピーしました

一行のテキスト投稿フォームを作成します。

オプションとして下記の項目を設定することができます。

1
<%= form.text_field :name, class: "hoge", size: 30 %>

このように指定するとhogeというcssのhogeというクラスが指定されて、幅が30文字になります。
設定しない場合の初期値は20になります。

form.text_area

リンクをコピーしました

複数行のテキスト投稿フォームを作成します。

オプションとして下記の項目を設定できます。

1
<%= form.text_area :name, class: "hoge", size: "30x10" %>

このように指定するとhogeというcssのhogeというクラスが指定され、幅が30文字の行が10行表示されます。

設定しない場合の初期値は40x20になります。（※「x」はXの小文字）

form.number_field

リンクをコピーしました

数字を増減させるためのボタンが利用できるフォームを作成します。

直接フォームに数字を入力することもできますが、その際は数値以外は入力することができません。

1
<%= form.number_field :age, class: "hoge", min: 1, max: 150 %>

このように指定するとhogeというcssのクラスが指定され、最小値1、最大値が150の範囲でしか投稿できないようになります。

form.search_field

リンクをコピーしました

検索フォームを作成します。

text_fieldと同じに見えますが、検索フォームはinputタグにtype="search"が記述されているフォームです。

この記述があることによりフォームの右に「x」ボタンが表示されるようになります。
「x」ボタンをクリックすると入力された内容をリセットすることができます。

ransackのようなgemを使って検索フォームを作るときなどに使います。

form.email_field

リンクをコピーしました

メールアドレスを入力してもらうフォームを作成します。
投稿内容に@が含まれないとメールアドレスとみなされずにエラーになります。

form.check_box

リンクをコピーしました

チェックボックスを作成します。

1
<%= form.check_box :sex ,{}, "true", "false" %>

このように指定するとチェックされている時はtrueが、されていない時はfalseが送られます。

1
<%= form.check_box :sex ,{checked: true}, "true", "false" %>

このように指定すると初期状態のチェックボックスがチェックされた状態になって表示されます。

form.collection_check_boxes

リンクをコピーしました

データベースの情報を元にチェックボックスを生成します。
テーブル同士の関係が多対多であるときに使用します。
書き方は下記の通りです。

1
<%= form.collection_check_boxes(保存されるカラム名, オブジェクトの配列, カラムに保存される項目, チェックボックスに表示されるカラム名 ) %>

説明を見るよりも実際の例を見た方がわかりやすいので例をあげて確認してみます。
ユーザーは複数のグループに所属でき、グループはたくさんのユーザーを持つことができるとします。

1
<%= form.collection_check_boxes :user_ids, User.all, :id, :name %>

このように記述すると下記のように複数の選択可能なチェックボックスを表示させることができます。

コンパイルされると下記のコードになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="hidden" name="group[user_ids][]" value="" />
<input type="checkbox" value="1" name="group[user_ids][]" id="group_user_ids_1" />
<label for="group_user_ids_1">programan</label>
<input type="checkbox" value="2" name="group[user_ids][]" id="group_user_ids_2" />
<label for="group_user_ids_2">programan_father</label>
<input type="checkbox" value="3" name="group[user_ids][]" id="group_user_ids_3" />
<label for="group_user_ids_3">programan_mother</label>
<input type="checkbox" value="4" name="group[user_ids][]" id="group_user_ids_4" />
<label for="group_user_ids_4">programan_bigsister</label>
<input type="checkbox" value="5" name="group[user_ids][]" id="group_user_ids_5" />
<label for="group_user_ids_5">programan_sister</label>
<input type="checkbox" value="6" name="group[user_ids][]" id="group_user_ids_6" />
<label for="group_user_ids_6">programan_bigbrother</label>
<input type="checkbox" value="7" name="group[user_ids][]" id="group_user_ids_7" />
<label for="group_user_ids_7">programan_brother</label>

group[user_ids][]"のgroupの部分は対応したモデル名を指していて自動で入ります。

実際下記のようにチェックをして投稿してみます。

この時のparamsの構造をみてみましょう。

1
2
params
=> "group"=>{"name"=>"ピカわか", "user_ids"=>["", "1", "5", "7"]}

※最初の""は<input type="hidden" name="group[user_ids][]" value="" />の部分が入っています。

このようになっているためストロングパラメーターは下記のように記述します。
{ user_ids: [] }の部分がcollection_check_boxesの値を指しています。

1
2
3
def user_params
 params.require(:group).permit(:name, { user_ids: [] })
end

form.radio_button

リンクをコピーしました

ラジオボタンを作成します。
下記の通りに記述します。

1
<%= form.radio_button "保存されるカラム名", "カラムに保存される内容" %>

実際の例を見てみましょう。

1
<%= form.radio_button :gender, "男" %>男 <%= form.radio_button :gender, "女" %>女

このように記述すると下記のように表示されます。

男を選択しているとgenderカラムに「男」という文字列が保存されます。
どれか一つしか選択させたくない場合に使います。
3つ以上でも記述が可能です。

オプションとして下記の項目を設定することができます。

下のように記述すると「女」が初期状態で選択されます。

1
性別：<%= form.radio_button :gender, 0 %>男<%= form.radio_button :gender, 1, checked: true %>女

この場合は「女」を選択するとgenderカラムに「1」という数字が保存されます。

form.select

リンクをコピーしました

データベースの情報を使わずにフォームで指定した選択肢を表示させます。
書き方は下記の通りです。

1
<%= form.select :保存されるカラム名, [ ["表示される文字","保存される値"], ["表示される文字","保存される値"] ], {オプション}, {htmlオプション} %>

第三引数のオプションを定義する部分と第四引数のhtmlオプションは省略できます。
ただし、第三引数のオプションを定義しないで第四引数のhtmlオプションを定義するときは第三引数は省略できないので空の{ }として記述します。

第三引数にはpromptオプションやinclude_blankオプションを指定できます。
promptオプションは未選択の時に一番上に表示されるメッセージを定義できるオプションです。

include_blankオプションは先頭に表示されるメッセージに空白行を表示するオプションです。include_blank: trueのような形で使用します。使用しないときはfalseを定義します。

またtrue、falseの部分に文字列を入れるとその文字が表示されます。

上の説明だとわかりにくいので、実際の例を見て確認してみましょう。

1
<%= form.select :job_id, [ ["プログラマン講師",1], ["家電メーカー", 2], ["主婦", 3 ] ,["保育士", 4], ["学生", 5], ["営業", 6] ], prompt: "職業を選択してください", class: "hoge" %>

第三引数と第四引数の中身は1つなら上の例のように{ }は省略できます。
複数の場合は下記のようになります。

1
<%= form.select :job_id, [ ["プログラマン講師",1], ["家電メーカー", 2], ["主婦", 3 ] ,["保育士", 4], ["学生", 5], ["営業", 6] ], prompt: "職業を選択してください", { class: "hoge", id: "fuga" } %>

例にはprompt: "表示するメッセージ"を追加してみました。
上のコードは下記のように表示されます。

上の例だと「プログラマン講師」を選択すると「job_id」のカラムに「1」の値が保存されます。

コンパイルされると下記のコードになります。

1
2
3
4
5
6
7
8
9
<select name="user[job_id]" id="user_job_id">
<option value="">職業を選択してください</option>
<option value="1">プログラマン講師</option>
<option value="2">家電メーカー</option>
<option value="3">主婦</option>
<option value="4">保育士</option>
<option value="5">学生</option>
<option value="6">営業</option>
</select>

プログラマン講師を選択した時のparamsで取得できるパラメーターは下記の通りです。

1
2
params
=> "user"=><ActionController::Parameters {"job_id"=>"1"} permitted: false>

form.collection_select

リンクをコピーしました

データベースに保存されている情報を元に選択肢を表示させます。
下記のように記述します。

1
<%= form.collection_select(保存されるカラム名, オブジェクトの配列, カラムに保存される項目, 選択肢に表示されるカラム名, {オプション}, {htmlオプション} ) %>

第五引数のオプションを定義する部分と第六引数のhtmlオプションはform.selectと同様に扱います。

説明をみてもわかりづらいので実際の例をみてみましょう。
今jobsテーブルのnameカラムに下記のレコードが保存されているとします。

この6つのレコードのnameカラムを選択肢として投稿フォームに表示させ、選択した項目のidがusersテーブルのjob_idに保存したい時には下記のように定義します。

まずはusersコントローラーのnewアクションをこのように定義します。

1
2
3
def new
  @jobs = Job.all
end

これでjobsテーブルから全てのレコードを取得し、@jobsという変数に代入しました。

次にビューの方で下記のように記述します。

1
<%= form.collection_select(:job_id, @jobs, :id, :name ) %>

するとこのように表示されます。

@jobsの最初のレコードのnameカラムの値が順番に選択肢として表示されているのが確認できます。

ここで一番上の「プログラマン講師」を選択し、送信するとform_withの引数に渡したインスタンスのテーブルのjob_idというカラムにjobsテーブルのidカラムの数値が保存されます。

collection_selectではこのように引数に記述する順番が大事なので記述する際は気をつけましょう。

第五引数にはオプションを定義することができます。

具体的な使い方を確認しましょう。

prompt

リンクをコピーしました

1
<%= form.collection_select(:job_id, @jobs, :id, :name, {prompt: "職業を選択してください"}) %>

上のように記述すると下記のコードにコンパイルされます。

1
2
3
4
5
6
7
8
9
<select name="user[job_id]" id="user_job_id">
  <option value="">職業を選択してください</option>
  <option value="1">プログラマン講師</option>
  <option value="2">家電メーカー</option>
  <option value="3">主婦</option>
  <option value="4">保育士</option>
  <option value="5">学生</option>
  <option value="6">営業</option>
</select>

そして下記のように表示されます。

include_blank

リンクをコピーしました

1
<%= form.collection_select(:job_id, @jobs, :id, :name, {include_blank: true}) %>

trueとすると下のように空白のオプションが先頭に追加されます。

文字を入れればpromptと同じ用にその文字が表示され空白のオプションが先頭に追加されます。

1
<%= form.collection_select(:job_id, @jobs, :id, :name, {include_blank: "----"}) %>

上のように記述すると下記のコードにコンパイルされます。

1
2
3
4
5
6
7
8
9
<select name="user[job_id]" id="user_job_id">
  <option value="">---</option>
  <option value="1">プログラマン講師</option>
  <option value="2">家電メーカー</option>
  <option value="3">主婦</option>
  <option value="4">保育士</option>
  <option value="5">学生</option>
  <option value="6">営業</option>
</select>

そして下記のように表示されます。

selected

リンクをコピーしました

1
<%= form.collection_select(:job_id, @jobs, :id, :name, {selected: 3}) %>

上のように記述すると下記のようなコードに変換されます。

1
2
3
4
5
6
7
8
<select name="user[job_id]" id="user_job_id">
  <option value="1">プログラマン講師</option>
  <option value="2">家電メーカー</option>
  <option selected="selected" value="3">主婦</option>
  <option value="4">保育士</option>
  <option value="5">学生</option>
  <option value="6">営業</option>
</select>

3としたのでValueが3のオプションにselected="selected"が追加され最初から選択された状態で表示することができます。

disabled

リンクをコピーしました

1
<%= form.collection_select(:job_id, @jobs, :id, :name, {disabled: 3}) %>

上のように記述するとValueが3のオプションが選択できないようになります。

配列で指定すると複数のオプションに適用されます。

1
<%= form.collection_select(:job_id, @jobs, :id, :name, {disabled: [3,4,6]}) %>

html属性を追加する場合

リンクをコピーしました

form.collection_selectにclassを与える場合は下記のように記述します。

1
<%= form.collection_select(:job_id, @jobs, :id, :name, { }, {class: "hoge"}) %>

このようにしてあげるとclassを適用させることができます。
第五引数のオプションの定義部分も空として記述する必要があります。

上のコードは下記のコードにコンパイルされます。

1
2
3
4
5
6
7
8
<select class="hoge" name="user[job_id]" id="user_job_id">
<option value="">表示するメッセージ</option>
<option value="1">プログラマン講師</option>
<option value="2">家電メーカー</option>
<option value="3">主婦</option>
<option value="4">保育士</option>
<option value="5">学生</option>
<option value="6">営業</option></select>

idも同じように適用することができます。

1
<%= form.collection_select(:job_id, @jobs, :id, :name, { }, {class: "hoge", id: "fuga"}) %>

form.file_field

リンクをコピーしました

ファイルを送信する際のファイル選択ボックスを生成します。
下記のように記述します。

1
<%= form.file_filed :保存されるカラム名 %>

form.file_fieldはlabelと組み合わせるとfont-awesomeのアイコンの画像と紐付けする事ができます。
labelについての詳しい使い方は後述します。

1
2
<%= form.label :カラム名, for: “属性値”, class: “fa fa-アイコン名” do %>
<%= form.file_field :カラム名, 属性: “属性値”, style: "display: none;" %>

例えば下記のように記述します。

1
2
<%= form.label :image, for: “file-input”, class: “fa fa-file-picture-o” do %>
<%= form.file_field :image, id: “file-input”, style: "display: none;" %>

上のように記述すると下記のようになります。

フォームを表示させずにアイコンをクリックすればよくなるのでビューをスッキリさせることができます。

f.datetime_field

リンクをコピーしました

日時の入力フォームを作成します。

form.date_select

リンクをコピーしました

日付選択ボックスを作成します。

このタグには多数のオプションが用意されています。

オプションは下記のように指定します。

1
<%= form.date_select :カラム名, {オプション名: 値} %>

基本は次のように指定します。

1
2
#値をtrueにする
<%= form.date_select :カラム名, {discard: true} %>

開始年と終了年の指定は下記のように指定します。
片方だけでも指定できますし、両方指定することも可能です。

1
2
3
4
5
#開始年を1990年に指定
<%= form.date_select :カラム名, {start_year: 1990} %>

選択できる年を1990から2100に指定
<%= form.date_select :カラム名, {start_year: 1990, end_year: 2100} %>

最初に選択される日付を変更するには下記のように指定します。

1
2
#最初の選択を2000年1月1日にする。
<%= form.date_select :カラム名, default: { year: 2000, month: 1, day: 1 } %>

form.hidden_field

リンクをコピーしました

非表示のフォームを作成します。
ユーザーのidなど、ユーザーがフォームから入力しない情報をパラメーターとして渡したいときに使用します。

1
<%= form.hidden_field :カラム名, value: "値" %>

例えばユーザーidに現在ログインしているユーザーのidを入れたい場合は下記のように記述します。

1
<%= form.hidden_field :user_id, value: current_user.id %>

配列に入れたい場合は下記のように記述します。

1
<%= form.hidden_field 'モデル名[user_ids][]', value: current_user.id) %>

例えばグループに所属するユーザーであれば下記のような記述になります。

1
<%= form.hidden_field 'group[user_ids][]', value: current_user.id) %>

同じようなタグとしてform_withのタグではないですが、hidden_field_tagがあります。
hidden_field_tagは単体でも使えますし、form_withの中でも使用することができます。
下記のように記述します。

1
<%= hidden_field_tag :カラム名, 値 %>

上のform.hidden_fieldの例をhidden_field_tagで書くと下記のようになります。

1
<%= hidden_field_tag :user_id, current_user.id %>

hidden_field_tagの方が若干簡単にかけることがわかります。
hidden_field_tagで書いた場合はparamsで取得する際の書き方が異なるので注意しましょう。

1
2
3
4
5
<%= form_with model: @user do |form| %>
  <%= form.text_field :name %>
  <%= hidden_field_tag :user_id, current_user.id %>
  <%= form.submit "送信" %>
<% end %>

上の場合、nameとuser_idを取り出すコードは下記のようになります。

1
2
3
4
5
# nameを取得する場合
params[:user][:name]

# user_idを取得する場合
params[:user_id]

form.submit

リンクをコピーしました

送信ボタンを作成します。

1
<%= form.submit "ボタンの名前" %>

上のように記述すると下のような送信ボタンが生成されます。

1
<%= form.submit "送信" %>

labelを貼ってみよう

リンクをコピーしました

labelタグを作成します。
例えばnameカラムのフォームにラベルをつける時は下記のように記述します。

1
2
<%= form.label :name %>
<%= form.text_field :name %>

このようにラベルがつきました。
今回はカラム名と同じになりましたが、自由に設定することもできます。
それには下記のように記述をします。

1
2
<%= form.label :name, "名前：" %>
<%= form.text_field :name %>

こちらの方がわかりやすいですね！

Ajax処理について

リンクをコピーしました

form_withでフォームを作成するとデフォルトでajax処理が行われるようになります。
これを無効にしたい場合は下記のように記述します。

1
<%= form_with model: @user, local: true do |form| %>

form_withを使ってAjaxの実装をしたい場合は、
こちらの「remote: trueでフォーム送信をAjax実装する方法とは？」を参考にしてください。

役に立ったらSHARE♪

• twitter
• facebook
• はてブ