4
1

More than 1 year has passed since last update.

enumを使用してラジオボタンを実装する[Rails]

Last updated at Posted at 2022-10-09

はじめに

enumを使用して、以下のようなラジオボタンを実装しました。実装するまで理解に時間を要してしまった部分もありましたので、備忘録として投稿させていただきます。
スクリーンショット 2022-10-09 17 04 34

開発環境

  • OS:Amazon Linux2
  • Rails 6.1.6.1

enumについて

 enumは、数値に意味を持たせることができます。
例えば、enumを導入せずに、integer型のフィールドで次のようにフォームを作成するとします。

<%= f.radio_button :achieve_status, 0 %> 未達成
<%= f.radio_button :achieve_status, 1 %> 達成

すると、modelやviewファイル等でachieve_statusの値を評価したい次のような場合、

<% if announcement.achieve_status == 0 %>
   :

「0」とは何のことを表しているのか、全くわからない状態になるかと思います。(ちなみに今回の場合、0とはachieve_statusが「未達成」であることを表しています)。このような時、enumを使用すれば0という数値に意味を持たせて扱うことができるようになります。

実装

enum_helpの導入

まず、数値と文字列を関連づけるためのgemである、enum_helpを導入します。

Gemfile
gem "enum_help"

bundle installも行なっておきます。

bundle install

モデルへの記述

続いてモデルにenumを定義し、数値と文字列を紐づけていきたいと思います。

app/models/announcement.rb
:
enum achieve_status: { nonachieve: 0, achieve: 1 }
:

ここで、0ならnonachieve(未達成)、1ならachieve(達成)ということを表します。

日本語化を行う

先ほどモデルで記述したものを日本語化するには、Railsアプリケーションを日本語化させる必要があります。
config/application.rbに以下の記述をします。

config/application.rb
module enum_app
  class Application < Rails::Application
    :
    config.i18n.default_locale = :ja
    :
  end
end

これで、Railsのデフォルト言語が日本語になります。

ymlファイルの作成

続いて、config/locales フォルダに ja.yml というファイルを作成します。
このファイルには、次のように作成します。

config/locals/ja.yml
ja:
 enums:
  announcement:
   achieve_status:
    nonachieve: "未達成"
    achieve: "達成"

このように記述することで、先ほどモデルに記述した、数値と紐づいた文字列が、日本語化されるようになります。また、こちらは少しでもインデントがずれるとうまく日本語化されなくなりますので、もしうまく日本語化されない場合はインデントを見直してみたください。

ラジオボタンの実装

続いて、viewファイルにラジオボタンを実装していきます。

app/views/announcements/new.html.erb
 :
   <%= f.radio_button :achieve_status, Announcement.achieve_statuses.key(0) %>
   <%= f.label :achieve_status, Announcement.achieve_statuses_i18n[:nonachieve], value: Announcement.achieve_statuses.key(0) %>
    
   <%= f.radio_button :achieve_status, Announcement.achieve_statuses.key(1) %>
   <%= f.label :achieve_status, Announcement.achieve_statuses_i18n[:achieve], value: Announcement.achieve_statuses.key(1) %>
:

まず、以下の記述についてですが、

 <%= f.radio_button :achieve_status, Announcement.achieve_statuses.key(0) %>

Announcement.achieve_statuses.key(0)で、先ほどモデル部分に記述した、

enum achieve_status: { nonachieve: 0, achieve: 1 }

のkey(0)なので、"nonachieve"を表します。
以下は、rails consoleで確認した結果です。
スクリーンショット 2022-10-09 19 18 38
次に、以下の記述です。

 <%= f.label :achieve_status, Announcement.achieve_statuses_i18n[:nonachieve], value: Announcement.achieve_statuses.key(0) %>

こちらはラベルタグを作成しています。Announcement.achieve_statuses_i18n[:nonachieve]は、ラベルに名前をつけています。このように記述することで、0や1と出力されていたものが、「未達成」、「達成」という形で、日本語表示できるようになります。
以下は、rails consoleの結果です。
スクリーンショット 2022-10-09 18 45 57
value: Announcement.achieve_statuses.key(0)としているのは、ラジオボタンだけでなく、「未達成」、「達成」という文字をクリックした時にもラジオボタンを選択できるようにするためです。
また、viewに記述するときは、achieve_statusという単数ではなく、achieve_statusesの複数形で記述します。

このようにenumを導入したことで、viewファイルで、0や1といった数値を使用せず、次のように条件式を記述することができるようになりました。これで、コードを見直したとき、条件分岐の内容を理解しやすくなりました。

<% if announcement.achieve_status == "nonachieve" %>
   :

参考にさせていただいた記事

まとめ

これで、enumを利用してラジオボタンを作成することができました!ラジオボタンを選択して、値をDBに登録するときのRspecについての記事も書かせていただきました!

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1