icon
icon

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

初心者向けにRuby on Railsでform_withを使う方法について現役エンジニアが解説しています。form_withとは、Railでフォームタグを簡単に作成するためのヘルパーです。form_withの書き方やURLを指定する方法やモデルを指定する方法など使い方について解説します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

 

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

 

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

田島悠介

今回は、Rubyに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Ruby on Railsで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] 未経験からWebエンジニアを目指す方法とは

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を使ったプログラミングを習得できる、オンラインブートキャンプを開催しています。

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