enumを使ったselectボックスの実装

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^)／

参考

[参考]Github simple_form
[参考]Github materialize-sass