Ruby on Railsのf.selectの使い方を現役エンジニアが解説【初心者向け】

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

 

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

 

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

 

目次

• Railsのf.selectとは？
• f.selectでできること
• f.selectの書き方
• 実際に書いてみよう
• まとめ

 

Railsのf.selectとは？

Webアプリケーションでは、入力フォームを作成することがよくあります。

f.selectは、Railsでその入力フォームの中にセレクトボックスを追加したい時に使います。f.selectは、Railsのヘルパーメソッドform_withと一緒に使います。
 

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

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システム、スマホアプリ 書ける言語: Ruby・PHP・Python・Java・Swift・C#・C/C++・JavaScriptなど 経験があるフレームワーク: Laravel・Ruby on Rails・Apache Strutsなど

 

 

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

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