【Ruby】Active Hashを使用してプルダウンを実装する。
ネットショップの購入画面とかアンケートとか、何かしら情報提供をする際の項目でプルダウンから選択する場面って多いですよね。
<%= f.select :sweet, [["chocolate", "chocolate"], ["cake", "cake"], ["cookie", "cookie"], ["candy", "candy"]], include_blank: "choose it" %>
上記のようなコードをHTML上に書いて表示することも可能ですが、選択肢が多い項目だと可読性に欠けてしまう（都道府県とか膨大な量になってしまう！） そんなときに使うのがActive Hashです。
・Active Hashを用いたフォーム実装の流れ・ ①必要なGemを導入
gem 'active hash'
→bundle install
②選択肢を保存するモデルを作成
⚠︎ここでのモデル作成は、ディレクトリに直接作成⚠︎
rails g model xxxで余計なファイルを作成しない！
③選択肢用のモデルにデータを記述
class Sweet < ActiveHash::Base self.data = [ { id: 1, name: 'chocolate' }, { id: 2, name: 'cake' } , { id: 3, name: 'cookie' }, { id: 4, name: 'candy' } ] end
ハッシュで配列にデータを格納していきましょう。
④アソシエーションの定義 値を保存する(form_withで参照する)モデルにアソシエーションを定義していきます。 ex)
<%= form_with model: @item, local: true do |f| %> 〜中略〜
モデルでのアソシエーションの定義↓
extend ActiveHash::Associations::ActiveRecordExtensions belongs_to_active_hash :sweet belongs_to_active_hash :drink belongs_to_active_hash :options belongs_to_active_hash :prefecture
もちろん、複数のフォームがある場合は上記のように複数定義してOKでした！ ⑤ビューファイル編集
<div class="form"> <div class="weight-bold-text"> お菓子 <span class="indispensable">必須</span> </div> <%= f.collection_select(:sweet_id, Sweet.all, :id, :name, {prompt: "---"}, {class:"select-box", id:"sweet"}) %> 〜後略〜
ビューファイル上では非常にスッキリ見えますが、実際にはちゃんとoptionとして設定されています！
・実装の際の注意点・
- テーブルのカラム型は必ずinteger型で設定。ハッシュで設定した際のIDでデータを保存するため
- カラム名は~~~_id。理由は上記と一緒。
Active Hashを使う最大のメリットは、他のモデルにも流用できること！ 例えば都道府県のフォーム、ネットショップでのデータ登録の際にユーザー情報と届け先情報。 それぞれでモデルを作る場合、一般形でそれぞれ記述していたら手間がかかりますよね。 そんなときにActive Hashを使えば、アソシエーションさえ定義すれば簡単に実装できます。 もちろん、最初のデータ入力は大変ですが… 便利なGEMなので、積極的に活用していきたいと思います。 ユーザー側でフォルダを作るタイプのものでのプルダウンはできるのかな…？ それはそれとして調べていきたいと思います！
今回、以下の記事を参考にいたしました。ありがとうございました。
