개요

enum_help라는 gm를 사용하여 일본어로 표시된 선택 상자를 만드는 과정을 비망록으로 기록합니다.

컨디션

・ruby'2.5.7’
・rails'5.2.3’
・enumhelp '0.0.17'

프로세스

1. 준비

게임 이름: Gemfilehelp를 추가합니다.

gem 'enum_help'

종착역 "bundle install"에 있습니다.

bundle install

2. 테이블에num 열 추가하기

대상 열을 추가합니다.
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 %>

참고 자료

EnumHelp
[Rails] enum 튜토리얼