【Rails】セレクトボックスを作る方法と注意点【f.select】

新人

セレクトボックスの使い方について知りたいな。

でも、なんか難しそう。

今回の記事は上記のような方におすすめ。

今回の記事では、Railsでセレクトボックスを作る方法について…Rails初心者でもわかるよう、わかりやすく解説いたします！

Railsでセレクトボックスを作る方法はいくつかあります。その中でも簡単な方法をご紹介します！モデルとの紐づけも必要みたいだし、Railsでのセレクトボックスの作り方って難しそう、と苦手意識を持つ方にもおすすめの記事です！

新人

間違っている箇所あったらコメントで教えてね。

本記事の内容

• rails：セレクトボックスとは？
• rails：セレクトボックスを作る方法
• rails：よく使うオプション【厳選】
• rails：オプション指定の順番は注意！

なおこの記事は3分で読める内容です。

rails：セレクトボックスとは？

railsのセレクトボックス関連のメソッドを使用すれば、入力フォームにセレクトボックスを追加できます。

また、セレクトボックスの作成方法はいくつかありますが、それぞれ指定できる項目なども異なるため、使い方には注意が必要です。

• 作成方法①：select メソッド
• 作成方法②：select_tag メソッド
• 作成方法③：collection_select メソッド【おすすめ】
• オプションの詳細と注意点【よく使う】

作成方法①：select メソッド

select メソッドを使ったセレクトボックスの構文は下記です。

select(オブジェクト名, オプションタグの要素(配列 or ハッシュ), オプション, HTMLオプション)

まず、コントローラーでselect に渡す要素を準備する必要があります。どのような方法でも良いですが、例として下記のような取得方法があるでしょう。

@users = User.pluck(:name, :id)
# => [["A太郎", 1], ["B太郎", 2], ["C太郎", 3]]

@users = User.all.map { |user| [ user.name, user.id ] }
# => [["A太郎", 1], ["B太郎", 2], ["C太郎", 3]]

ビューに渡す値が、[[“表示するHTML”, 渡すvalue値], [“表示するHTML”, 渡すvalue値], [“表示するHTML”, 渡すvalue値]…]の形式になるように値を取得します。配列はもちろん、ハッシュ形式でも問題ありません。

ビュー側は以下のように書きます。

<%= f.select :id, @users, {prompt: "選択してください"}, :class => 'form-control', :id => 'user_id' %>

また、オプションを指定することもできます。

HTML関連のオプションも指定可能です。こちらは色々種類ありますね。詳細は、こちらのRailsドキュメントをご覧ください。

作成方法②：select_tag メソッド

select_tag メソッドを使ったセレクトボックスの構文は下記です。

select_tag(要素名, オプションタグを表す文字列, オプション, HTMLオプション, イベント属性)

select メソッドとの一番の違いは、「オプションタグを表す文字列」です。つまりはセレクトボックスのoptionに指定する文字を「文字列そのまま」記述する必要があります。例として下記を「タグを表す文字列」にそのままズラーっと指定します。

<option value="1">A太郎</option><option value="2">B太郎</option>...

ただし、HTMLオプションをそのまま記述するのは冗長です。保守の観点からもあまりよろしくありませんよね。そこで、実際には、ズラーっと書くかわりに「options_for_select」メソッドや「options_from_collection_for_select」メソッドを使用することが多いです。

<%= f.select_tag :id, options_from_collection_for_select( User.all, :id, :name ), { prompt: "選択してください" } %>

「options_from_collection_for_select」についての詳細は、options_from_collection_for_selectを理解する（プルダウンリストを簡単に作りたい）[Rails]をご覧ください。上記のHTML結果ソースがこんな感じです↓

<select name="id" id="id">
  <option value="1">A太郎</option>
  <option value="2">B太郎</option>
</select>

また、オプションを指定することもできます。

select_tagのオプション

HTML関連のオプションも指定可能です。こちらは色々種類ありますね。詳細は、こちらのRailsドキュメントをご覧ください。

select_tagのHTMLオプション

select_tagのイベント属性

作成方法③：collection_select メソッド【おすすめ】

collection_select メソッドを使ったセレクトボックスの構文は下記です。

collection_select(オブジェクト名, メソッド名, 要素の配列, value属性の項目, テキストの項目, オプション, HTMLオプション, イベント属性)

select メソッドの際は、DBから取得したデータを select 用に加工したりしていました。しかし「collection_select」メソッドは加工することなく、セレクトボックスを簡単に作成できます！

<%= f.collection_select :id, User.all, :id, :name, {prompt: "選択してください"}, :class => 'form-control', :id => 'user_id' %>

データの整形や別メソッドと組み合わせる必要があるなどの面倒さがなく、簡単に記述できるので一番おすすめの方法です。

collection_selectのオプション

HTML関連のオプションも指定可能です。こちらは色々種類ありますね。詳細は、こちらのRailsドキュメントをご覧ください。

collection_selectのHTMLオプション

collection_selectのイベント属性

オプションの詳細【よく使う】

続いては、よく使うオプションについての説明です。下記のように記述すれば、デフォルトのvalue値を設定できます。

{selected: 1}

展開すると、下記のようになります。

<option value="1" selected>A太郎</option>

また、HTMLオプションを下記のように指定すれば…

{ class: 'form-control' , required: true }

このように展開されます。

<option value="1" class='form-control' required='required'>A太郎</option>

オプション指定の順番は注意！

さらには、オプションの指定には注意点もあります。HTMLオプションを指定する際には、先にオプションを必ず指定しなければ、うまく動きません（引数の順番が変わるので、当たり前と言えば当たり前なのかもですが）

# これはOK
<%= f.collection_select :id, User.all, :id, :name, {prompt: "選択してください"}, :class => 'form-control', :id => 'user_id' %>

# これもOK
<%= f.collection_select :id, User.all, :id, :name, {}, :class => 'form-control', :id => 'user_id' %>

# これはNG
<%= f.collection_select :id, User.all, :id, :name, :class => 'form-control', :id => 'user_id' %>

まとめ

書き方が色々あるので、どれが最適か迷いがちですが、状況に応じて選んで頂けたらと思う。個人的には、他のメソッドを呼び出したり、コントローラーで手を加えないと使えないメソッドよりは、書き方がシンプルなのがベストだと思うので、「collection_select」がおすすめ。

また、js周りのオプションも色々あるので、色々試して頂けたらと思う。

新人

ふー！！　長かった！！

（深呼吸…）

参考

• 【Rails/選択ボックス】selectを使って選択ボックスを作る方法
• 【Rails】 form_with, form_for でプルダウン（セレクトボックス）を実装してみる
• Ruby on Railsのf.selectの使い方を現役エンジニアが解説【初心者向け】
• Railsドキュメント「選択ボックスを生成：select」
• Railsドキュメント「選択ボックスを生成：select_tag」
• 【Rails】完全理解 formでセレクトボックスをつくるselectの使い方
• 【Rails】ViewHelperのselectボックス生成方法について