【rails】セレクトボックスの日本語化

※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。

目次表示

目次へ

セレクトボックスを日本語化する

以前、セレクトボックスを使ってプロフィールの性別を選択した

セレクトボックスの選択肢は英語で、プロフィールに反映している性別も英語のままになってしまっている

【rails】プロフィールのフォームを作る

今回やりたいこと

config/locales/enum.ja.ymlのファイルを作る

日本語表記したい言葉を書き込む

ja:
  enum:
    genders:
      male: '男性'
      female: '女性'
      other: 'その他'

enum.ja.ymlで定義した日本語表記を、そのまま反映させる場合は以下のように書く

#{I18n.t("enum.genders.female")})
 # => 女性

enum.ja.ymlファイルから、enumのgendersのfemaleの値を表示している

femaleの部分を汎用的にすると良さそう

app/views/profiles/show.html.hamlのコードを書き換える

↓　今、セレクトボックスで「female」を選択した場合

#{current_user.gender})
 # => female

セレクトボックスでの選択肢が英語のまま表示される

セレクトボックスでcurrent_userが選択したgenderを日本語表記にする

#{I18n.t("enum.genders.#{current_user.gender}")}

プロフィールの性別が日本語表記になった！

セレクトボックスの仕組み

選択肢として、[['男性', 'male'], ['女性', 'female'], ['その他', 'other']]の配列を用意する

= f.select :gender, [['男性', 'male'], ['女性', 'female'], ['その他', 'other']],
 {}, { class: 'text' }

セレクトボックス

検証画面

この配列をどうやって作るのか？？

すでにある配列を作り変えるには「map」を使う

Profile.genders.map { | k, v | [ I18n.t("enum.genders.#{k}"), k ] }

【前提】profile.rbにてenum gender: { male: 0, female: 1, other: 2 }と定義されている

{ | k, v |
→　配列のkey「female」、value「1」を取得する
[ I18n.t("enum.genders.#{k}"),
→　key「female」をlabelにしたいので日本語表記にする
　※"enum.genders.#{k}"は、"enum.genders.female"の意味になる
k ] }
→　key「female」をvalueに入れて送信する

#DAY24