Ruby on Railsのf.selectの使い方を現役エンジニアが解説【初心者向け】
初心者向けにRuby on Railsのf.selectの使い方について現役エンジニアが解説しています。f.selectとは、Ruby on Railsでセレクトボックスなどの入力フォームを追加することができるものです。f.selectの書き方や使い方について解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
Ruby on Railsのf.selectの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Ruby講座の内容をもとに紹介しています。
今回は、Rubyに関する内容だね！
どういう内容でしょうか？
Ruby on Railsのf.selectの使い方について詳しく説明していくね！
お願いします！
目次
Railsのf.selectとは？
Webアプリケーションでは、入力フォームを作成することがよくあります。
f.selectは、Railsでその入力フォームの中にセレクトボックスを追加したい時に使います。f.selectは、Railsのヘルパーメソッドform_withと一緒に使います。
f.selectでできること
f.selectを使うと、セレクトボックスの選択項目や選択された時の値や、セレクトボックスに設定したいオプションを指定できます。
最終的には、HTMLのselectタグと関連タグが生成されます。Railsで定義したモデルを利用したセレクトボックスが簡単に作れます。
f.selectの書き方
f.selectは、
<%= f.select 属性, 選択肢の集合, {オプション}, {HTMLオプション} %>
と書くか、あるいは、
<%= f.select( 属性, 選択肢の集合, {オプション}, {HTMLオプション} ) %>
と括弧を使って書きます。
実際に書いてみよう
性別(sex)を持つuserモデルがあるとします。userにsexを選択して登録するフォームは、
<%= form_with(model: user, local: true) do |f| %>
<div class="form-group">
<%= f.label :sex, '性別' %>
<%= f.select :sex, {'男性': 1, '女性': 2}, { include_blank: '選択してください'}, { class: 'form-control' , required: true } %>
</div>
<div class="form-group">
<%= f.submit '送信', class: 'btn btn-primary btn-block' %>
</div>
<% end %>
と書きます。
form_withからendまでがフォームです。userモデルのsexカラムに対して値を取得するためのフォームです。divはBootstrapで装飾した例です。divはなくても動作します。
セレクトボックスは、f.selectで用意します。f.labelは、セレクトボックスの項目名です。f.selectとf.labelは、同じ属性(この例では :sex)を指定することで、セレクトボックスを直接マウスでクリックしなくても、項目名をクリックしてセレクトボックスが選択可能になります。
f.selectの選択肢の集合は、
{'男性': 1, '女性': 2}
あるいは、
[['男性', 1], ['女性', 2]]
にように定義します。選択肢の情報は、ハッシュか配列で定義します。この例では、’男性’ か ‘女性’ の2択を定義したハッシュです。選択肢はもっと増やすこともできます。
'男性': 1
のように、1つの要素が1つの選択肢です。男性が選択されたら、1が設定されるという定義です。
オプションは、
{ include_blank: '選択してください' }
のようにします。この例では、何も選択されていない時は、 ‘選択してください’ という項目が選択されるという定義です。セレクトボックスの1番目の選択肢に ‘選択してください’ が追加されます。ユーザーが ‘選択してください’ を選択しても、何も選択されていないことになります。あくまで選択の注意を促すために使います。
include_blankを使わず、初期状態でどれかの項目を選択した状態にしたい場合には、オプションで
{selected: 2}
のようにします。この例では2の値を持つ 選択肢 ‘女性’ を選択した状態にできます。2ではなく1にすれば、男性を選択した状態にすることもできます。
最後のHTMLオプションは、
{ class: 'form-control' , required: true }
のようにします。HTMLタグとして追加したい属性を設定します。この例では、
class: 'form-control'
は、
class='form-control'
というHTMLタグを追加できます。Bootstrapなどのために何かclassを指定したい場合に使います。
required: true
は、
required='required'
というHTMLタグを追加できます。つまり、入力(選択)必須にできます。
最終的には、
<div class="form-group">
<label for="user_sex">性別</label>
<select prompt="選択してください" class="form-control" required="required" name="user[sex]" id="user_sex">
<option value="">選択してください</option>
<option selected="selected" value="1">女性</option>
<option value="2">男性</option>
</select>
</div>
が生成されます。※見やすいように整形してあります。
まとめ
f.selectを使うと、入力フォームにセレクトボックスを追加できます。
Webアプリケーションでセレクトボックスを使う機会は多いので、是非利用してみてください。
筆者プロフィール
| 伊藤広明（いとうひろあき）
1990年代からソフトウェア開発を仕事としてはじめ、2000年ごろからWEBエンジニアの仕事にも従事。 作れるもの：Webシステム、スマホアプリ |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも、Ruby on Railsを使ったプログラミングを習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
