概要
enum_helpというgemを用いて、日本語で表示されたセレクトボックスを作った過程を備忘録として記録します。
環境
・ruby '2.5.7'
・rails '5.2.3'
・enum_help '0.0.17'
過程
1.準備
Gemfileにenum_helpを追加します。
gem 'enum_help'
ターミナルで「bundle install」します。
bundle install
2.テーブルにenumのカラムを追加
対象のカラムを追加します。
db/migrate/20xxxxxxxxx_add_place_to_datespots.rb
class AddPlaceToDatespots < ActiveRecord::Migration[5.2]
def change
add_column :datespots, :place, :integer
end
end
ターミナルで「rails db:migrate」します。
rails db:migrate
3.モデルの定義
テーブルにenumのカラムを用意したら、次はenumのカラムに複数個の定数を紐付けていきます。
app/models/datespot.rb
class Datespot < ApplicationRecord
（省略）
enum place: {
Ginza: 0, Yurakucho: 1, Shinbashi: 2, Hamamatsucho: 3, Tamachi: 4, Shinjuku: 5,
Yoyogi: 6, Okubo: 7, Shibuya: 8, Omotesando: 9, Aoyama: 10, Harajuku: 11,
Akasaka: 12, Roppongi: 13, Azabu: 14, Marunouchi: 15, Nihonbashi: 16, Kanda: 17,
Ningyocho: 18, Ikebukuro: 19, Jiyugaoka: 20, Sangenjaya: 21, Futakotamagawa: 22, Shinagawa: 23,
Gotanda: 24, Osaki: 25, Odaiba: 26, Toyosu: 27, ebisu: 28, Hiroo: 29,
Shirogane: 30, Daikanyama: 31, Nakameguro: 32, Meguro: 33, Iidabashi: 34, Yotsuya: 35,
Kagurazaka: 36, Ueno: 37, Asakusa: 38, Nakano: 39, Kichijoji: 40, Tachikawa: 41, Others: 42
}
end
4.enum_helpの定義
config/locales/ja.ymlに日本語への訳を追加します。
config/locales/ja.yml
ja:
enums:
datespot:
place:
Ginza: 銀座
Yurakucho: 有楽町
Shinbashi: 新橋
Hamamatsucho: 浜松町
Tamachi: 田町
Shinjuku: 新宿
Yoyogi: 代々木
Okubo: 大久保
Shibuya: 渋谷
Omotesando: 表参道
Aoyama: 青山
Harajuku: 原宿
Akasaka: 赤坂
Roppongi: 六本木
Azabu: 麻布
Marunouchi: 丸の内
Nihonbashi: 日本橋
Kanda: 神田
Ningyocho: 人形町
Ikebukuro: 池袋
Jiyugaoka: 自由が丘
Sangenjaya: 三軒茶屋
Futakotamagawa: 二子玉川
Shinagawa: 品川
Gotanda: 五反田
Osaki: 大崎
Odaiba: お台場
Toyosu: 豊洲
ebisu: 恵比寿
Hiroo: 広尾
Shirogane: 白金
Daikanyama: 代官山
Nakameguro: 中目黒
Meguro: 目黒
Iidabashi: 飯田橋
Yotsuya: 四ツ谷
Kagurazaka: 神楽坂
Ueno: 上野
Asakusa: 浅草
Nakano: 中野
Kichijoji: 吉祥寺
Tachikawa: 立川
Others: その他
5.セレクトボックスの作成
enum_helpの便利メソッドを用いて、セレクトボックスを作成します。
app/views/datespots/_datespot_form.html.erb
<%= form_with model: @datespot, local: true do |f| %>
（省略）
<div class = 'form-group'>
<%= f.label :place %> <span class="input-need">※必須</span>
<%= f.select :place, options_for_select(Datespot.places_i18n.invert, selected: f.object.place), { include_blank: true }, { class: 'form-control', id: 'datespot_place' } %>
</div>
<% end %>
「Datespot.places_i18n.invert」で日本語と英語のハッシュを作っています。
irb(main):001:0> Datespot.places_i18n.invert
=> {"銀座"=>"Ginza", "有楽町"=>"Yurakucho", "新橋"=>"Shinbashi", "浜松町"=>"Hamamatsucho", "田町"=>"Tamachi", "新宿"=>"Shinjuku", "代々木"=>"Yoyogi
", "大久保"=>"Okubo", "渋谷"=>"Shibuya", "表参道"=>"Omotesando", "青山"=>"Aoyama", "原宿"=>"Harajuku", "赤坂"=>"Akasaka", "六本木"=>"Roppongi", "麻
布"=>"Azabu", "丸の内"=>"Marunouchi", "日本橋"=>"Nihonbashi", "神田"=>"Kanda", "人形町"=>"Ningyocho", "池袋"=>"Ikebukuro", "自由が丘"=>"Jiyugaoka",
"三軒茶屋"=>"Sangenjaya", "二子玉川"=>"Futakotamagawa", "品川"=>"Shinagawa", "五反田"=>"Gotanda", "大崎"=>"Osaki", "お台場"=>"Odaiba", "豊洲"=>"To
yosu", "恵比寿"=>"ebisu", "広尾"=>"Hiroo", "白金"=>"Shirogane", "代官山"=>"Daikanyama", "中目黒"=>"Nakameguro", "目黒"=>"Meguro", "飯田橋"=>"Iidaba
shi", "四ツ谷"=>"Yotsuya", "神楽坂"=>"Kagurazaka", "上野"=>"Ueno", "浅草"=>"Asakusa", "中野"=>"Nakano", "吉祥寺"=>"Kichijoji", "立川"=>"Tachikawa",
"その他"=>"Others"}
「selected: f.object.place」で選択した値を保持しています。
「include_blank: true」で先頭に空の要素を追加しています。
これで、次のようなセレクトボックスが作れました！
6.ビューで値を受け取る
ちなみに、ビューで値を受け取る時は、「_i18n」を付ければ日本語で表示されます。
app/views/datespots/_datespot.html.erb
（省略）
<%= datespot.place_i18n %>