【Rails】フォームでのradio_buttonとselectの使い方

Railsでのフォーム作成では、ユーザーが簡単に選択肢を入力できるようにするためにradio_buttonやselectがよく使われます。それぞれの使い方や実装例について詳しく解説します。

1. radio_buttonの使い方

radio_buttonは、複数の選択肢の中から1つだけ選択可能な入力フォームを作成するために使用します。

基本的な構文

<%= form_with model: @model do |f| %>
  <%= f.radio_button :属性名, 値 %>
  <%= f.label :属性名, 'ラベル名' %>
<% end %>

使用例

性別を選択するフォームを作成する場合：

<%= form_with model: @user, local: true do |f| %>
  <%= f.radio_button :gender, 'male' %>
  <%= f.label :gender_male, '男性' %>

  <%= f.radio_button :gender, 'female' %>
  <%= f.label :gender_female, '女性' %>

  <%= f.submit '送信' %>
<% end %>

f.radio_button :gender, 'male'

genderカラムに'male'の値を送信します。

f.label

選択肢の横に表示するラベルを設定します。

2. selectの使い方

selectは、ドロップダウン形式で複数の選択肢から1つを選択可能な入力フォームを作成します。

基本的な構文

<%= form_with model: @model do |f| %>
  <%= f.select :属性名, 選択肢の配列 %>
<% end %>

選択肢の配列は、[["表示名", "値"], ["表示名", "値"]]のように設定します。

使用例

都道府県を選択するフォームを作成する場合

<%= form_with model: @user, local: true do |f| %>
  <%= f.select :prefecture, [['北海道', 'hokkaido'], ['東京都', 'tokyo'], ['大阪府', 'osaka']] %>
  <%= f.submit '送信' %>
<% end %>

[['北海道', 'hokkaido'], ['東京都', 'tokyo']]

['表示名', '値']の形式で選択肢を設定します。

:prefectureカラムに選択した値が送信されます。

実装時の注意点

1.ラベルの対応

radio_buttonではlabelタグを使い、選択肢がどの値に対応しているかを明示するとユーザーにとって使いやすくなります。

2.選択肢のデータ管理

selectやradio_buttonの選択肢を直接HTMLに記述する方法もありますが、頻繁に変わるデータはモデルやヘルパーメソッドで管理すると便利です。

応用例

動的に選択肢を生成する

選択肢がデータベースに依存する場合、次のように選択肢を動的に生成できます。

selectで動的選択肢

<%= form_with model: @user, local: true do |f| %>
  <%= f.select :city, City.all.pluck(:name, :id) %>
  <%= f.submit '送信' %>
<% end %>

•	City.all.pluck(:name, :id)

データベースから都市名とIDを取得して選択肢を生成します。

radio_buttonで動的選択肢

<%= form_with model: @user, local: true do |f| %>
  <% City.all.each do |city| %>
    <%= f.radio_button :city_id, city.id %>
    <%= f.label "city_#{city.id}", city.name %>
  <% end %>
  <%= f.submit '送信' %>
<% end %>

•	City.all.each

都市ごとにラジオボタンを作成します。

まとめ

•radio_button: 複数の選択肢から1つだけ選ぶ際に使用。
•select: ドロップダウン形式で1つの選択肢を選ぶ際に使用。
•選択肢が動的に変わる場合は、データベースやヘルパーメソッドを活用して効率的に管理するのがポイント。