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

7738 ワード
Materialize haml Rails enum simple_form Rails テキストリンク

selectボックスの項目が増えた場合、その度にコードの修正が必要となります。
enumを使って拡張性のあるselectボックスを作りたいと思います。

enumとは

int型、boolean型で定義されたカラムを、文字列で表現できるようにする機能です。
例えば曜日でいうと下記のように表現できるようにしたものです。

    MON = 1
    TUE = 2
    WED = 3
    THU = 4
    FRI = 5
    SAT = 6
    SUN = 7

事前準備

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