Railsでselect_boxの綺麗な書き方を知りたい！
そんな方必見です

前提知識

RubyとRailsの基礎知識
form_withの使い方の知識
MVCの基本的な知識

書き方

<%= f.select( プロパティ名, タグの情報, {オプション} ) %>
こんな普通に記述していきます！

プロパティ...カラム名
タグの情報...セレクトボックスに使いたいデータ
オプション...セレクトボックスのオプション(include_blankなどをよく使います)

カラム名はuser_idやmenu_idなどidをとってくることが一般的です！！
タグの情報はoptionタグに使われるデータなので配列かハッシュで指定します！

[[表示名, 送信したいデータ], [表示名, 送信したいデータ]]

オプションは{ include_blank: '選択してください'}のように書くことが多いと思います。
このオプションをつけると

こんな風にデフォルトの選択肢が指定した文字列になります！

設定

今回はmenusテーブルとreserationsテーブルを設定し、メニューを選択し、予約ができる！
といった設定にしていきます！

menusテーブル

schema.rb

  create_table "reservations", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci", force: :cascade do |t|
    t.string "name"
    t.datetime "start_time"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.integer "menu_id", null: false
  end

reservationテーブルnameカラムにdate_timeで予約時間を設定

schema.rb

  create_table "menus", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci", force: :cascade do |t|
    t.string "name"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

メニューテーブルは今回はわかりやすくnameカラムだけにします！

reservation.rb

belongs_to :menu

menu.rb

has_many :reservations

関係性としては1対多で設定します！

menuテーブルは今回はメニューを3つ設定します！
ドライヘッドスパ＋ハンドマッサージ15分
ドライヘッドスパ＋眼筋マッサージ　15分
ドライヘッドスパ＋首肩マッサージ　15分

実際に書いてみる

reservations_controller.rb

before_action :set_menus, only: [:new, :create]

 def set_menus
    @menus = Menu.all
  end

今回はbefore_actionでnewとcreateにmenuのデータ全てをとってきます！
同じ記述はなるべくリファクタリングして綺麗に書きましょう！

reservations/new.html.erb

<%= form_with(model: @reservation, local: true) do |f| %>

  <div class="field">
    <%= f.label :name, "フルネーム(必ずご自身のお名前)" %>
    <%= f.text_field :name %>
  </div>

  <div class="field">
    <%= f.label :menu, "メニューを選択してください" %>
    <%= f.select :menu_id, @menus.map { |menu| [menu.name, menu.id] },
      { include_blank: '選択してください'} %>
  </div>

  <div class="field">
    <%= f.label :start_time %>
    <%= f.datetime_select :start_time %>
  </div>

  <div class="actions">
    <%= f.submit class: "btn btn-primary reservation_btn" %>
  </div>

<%= f.select :menu_id, @menus.map { |menu| [menu.name, menu.id] },
{ include_blank: '選択してください'} %>
のように配列でとってくると綺麗にかけます！

※each文とかで繰り返し処理で書くとセレクトボックスが3つ表示されてしますので注意※

番外編

メニューを全てではなく最初の二つだけとってきたい！
そんな場合もあると思います！

<%= f.select :menu_id, @menus.first(2).map { |menu| [menu.name, menu.id] } %>
こんな感じで書きましょう！

[1] pry(main)> arry = [1,2,3,4,5,6]
=> [1, 2, 3, 4, 5, 6]
[2] pry(main)> arry.first(2)
=> [1, 2]
[3] pry(main)> arry.first(5)
=> [1, 2, 3, 4, 5]

配列にfirst(とってきたいデータの数)で好きな数だけデータがとってこれます！！
お疲れ様でした！

Railsのformでのselect_box使い方！【初学者向け】

前提知識

書き方

設定

実際に書いてみる

番外編