selectボックスの項目が増えた場合、その度にコードの修正が必要となります。
enumを使って拡張性のあるselectボックスを作りたいと思います。
enumとは
int型、boolean型で定義されたカラムを、文字列で表現できるようにする機能です。
例えば曜日でいうと下記のように表現できるようにしたものです。
MON = 1
TUE = 2
WED = 3
THU = 4
FRI = 5
SAT = 6
SUN = 7
事前準備
- 前述の通りenumに定義するカラムはint型、boolean型で定義されている必要があります。
- Materializeやsimple_formの導入については下記をご参照ください。
Materializeとsimple_formでシンプルでいい感じのフォームを作りたい！
Materialize確認事項
selectボックスを使用するには、jqueryの設定が必要です。
application.jsに下記記載を行います。また公式ページを参考に
language-javascript.jsを作成し、下記記載を行いました。
application.js
//= require jquery
//= require jquery_ujs
//= require materialize-sprockets
//= require turbolinks
//= require_tree .
language-javascript.js
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('select').formSelect();
});
enumの設定
該当モデルのファイルに記載を行います。
今回は通貨を設定しているProductモデルのunitカラム(integer型)に定義します。
product.rb
class Product < ApplicationRecord
validates :name, presence: true
validates :description, presence: true
validates :price, presence: true
validates :unit, presence: true
enum unit: [:yen, :usd, :eur] #追記
mount_uploader :image, ImageUploader
end
上記により定義が行えました。ターミナルの結果です。
[モデル].[カラムの複数形]で確認ができます。
ターミナル.
Product.units
=> {"yen"=>0, "usd"=>1, "eur"=>2}
またkeysと追加で記述するとkeyのみ取得することも可能です。
ターミナル.
Product.units.keys
=> ["yen", "usd", "eur"]
selectボックスを追加
下記のように記述することでselectボックスを使用することができます。
new.html.haml
= simple_form_for(@product) do |f|
.row
.input-field.col.s6
= f.input :name
= f.input :description
= f.input :price
= f.select :unit,Product.units.keys, {}, placeholder: 0 #追加
= f.input :image
= f.button :submit
結果
正常に実装することができました！
おまけ
続きでenumの日本語化を下記にまとめてます。よかったら引き続きどうぞー
enumを日本語化する
以上です。少しでも参考になりましたら、いいねやフォロー気軽にしていただけると励みになります！＼(^o^)／