#はじめに

個人開発中のアプリケーションにActiveHash（アクティブハッシュ）を導入したので記事にしました。
ユーザーに、あらかじめ決まってる項目を入力してもらうのであれば、プルダウンで選択してもらった方が、手入力より便利ですし、打ち間違えがありません。
入力フォームで情報を入力する際、プルダウンで選択する方法紹介します。

###目次

ActiveHashの導入
ActiveHashモデル作成・編集
モデルの作成・編集
入力画面にプルダウン表示
「確認」→「保存」→「表示」

前提に、今回の導入は「確認画面」のを挟んでます。
よければこちらもご参照ください。

【Rails】「入力」→「確認画面」→「保存」→「表示」
https://qiita.com/AKI3/items/cbdd77d604fe6aeb47d8

#開発環境
ruby 2.6.5
rails 6.0.0
データベース mysql2 0.4.4

#1. ActiveHashの導入
それでは実装して行きます〜

まずGemのアクティブハッシュをインストール。

Gemfile

gem 'active_hash'

ターミナル

bundle install

Gemをインストールした後はrails sをcontrol + Cで一度停止し、サーバーを再起動する必要があります。

#2. ActiveHashモデル作成・編集

まず、アクティブハッシュ用のモデル作ります。

ターミナル

rails g model num --skip-migration

--skip-migrationはマイグレーションファイル作らないと言う意味。

次に、今作ったnumモデルを編集します。

app/models/num.rb

class Num < ActiveHash::Base
  self.data = [
    { id: 0, name: '--' },
    { id: 1, name: '1' },
    { id: 2, name: '2' },
    { id: 3, name: '3' },
    { id: 4, name: '4' },
    { id: 5, name: '5' },
    { id: 6, name: '6' },
    { id: 7, name: '7' },
    { id: 8, name: '8' },
    { id: 9, name: '9' },
    { id: 10, name: 'お問い合わせください' },
  ]
end

この時、ActiveHash::Baseクラスを継承します。
「ActiveHash::Base」は、ActiveHashのGemに定義されていて、モデル内（クラス内）でActiveHashを用いる際に必要となるクラスです。

nameにはビューで表示させたい事を記述します。

#3. モデルの作成・編集
今回は、eventモデルを作成します。

ターミナル

rails g model event

ActiveHashを使ってる場合は、ActiveHashで定義されているmoduleをモデルに取り込んで、アソシエーションを設定する必要があります。
ActiveHash::Associations::ActiveRecordExtensionsと記述してmoduleを取り込みます。

そして、アソシエーションを設定します。numモデルにはbelongs_toを設定します。

それでは、event.rbに以下を追記します。

app/model/event.rb

class Event < ApplicationRecord
  #モジュールを取り込む記述
  extend ActiveHash::Associations::ActiveRecordExtensions
  # アクティブハッシュ用アソシエーション
  belongs_to_active_hash :num

  validates :num_id, presence: true

ついでに、バリデーションも設定してます。

今回は、複雑なデータベース設計ではないので上記で上手く機能してます。
ActiveHashを用いたアソシエーションの設定は、他にもあるにたいなので、詳しくは下記の参考から公式サイトを確認してみてください。

マイグレーションファイル編集もします。

2020XXXXXXXX_create_events.rb

class CreateEvents < ActiveRecord::Migration[6.0]
  def change
    create_table :events do |t|
      t.integer    :num_id

      t.timestamps
    end
  end
end

ターミナル

rails db:migrate

migrateをお忘れなく。

#4. 入力画面にプルダウン表示

今回、「確認画面」を挟み込んでるので少し特殊な記述になってます。
詳しくは、こちを先に参照してください。

【Rails】「入力」→「確認画面」→「保存」→「表示」
https://qiita.com/AKI3/items/cbdd77d604fe6aeb47d8

###ルーティングの設定

config/routes.rb

Rails.application.routes.draw do
  root to: 'tops#index'

    resources :events do
      collection do
        post :confirm
      end
    end
  end

###コントローラーを作成・編集
入力用にnewだけ追記します。

app/controllers/events_controller.rb

class EventsController < ApplicationController
  def index
  end

  def new
    @event = Event.new
  end

#省略

###続いてビューの編集をします。

プルダウンで選択してもらうため、selectメッソドを使います。

new.html.erb

<%= form_with(model: @event, url:confirm_events_path, local: true) do |f| %>

  <div class="number">
    <%= f.label :num, '参加人数' %>
    <%= f.collection_select(:num_id, Num.all, :id, :name, {}, {class:"#", id:"#"}) %>  
  </div>

  <div class="submit">
    <%= f.submit "確認画面へ", class:"#" %>
  </div>
<% end %>

構文はこちらです。

app/views/events/new.html.erb

<%= f.collection_select(:num_id,  Num.all,  :id,  :name,  {},  {class:"#", id:"#"}) %>
<%= f.collection_select(保存先のカラム名, オブジェクトの配列, 保存する項目, 表示されるカラム名, オプション, htmlオプション) %>

newページで確認してください。

これで最低限のActiveHashは実装できました！！
次は、「確認」→「保存」→「表示」→「編集」　と進めていきます。

#5. 「確認」→「保存」→「表示」

今回、確認画面を挟んでるのでまず「確認画面」作成していきます。

##5.1 「確認画面」
まずはコントローラーから設定します。

###コントローラー
confirmのアクション作ります。

app/controllers/events_controller.rb

#省略
  def confirm
    @event = Event.new(event_params)
    render :new if @event.invalid?
  end
#省略

バリデーションをかけてるので、ここで適応させます。

###ビュー
views/events配下に新しくconfirmのビューを作成します。

app/views/events/confirm.html.erb

<h1>確認画面</h1>

  <div class="">
    <p>参加人数: <%= @events.num.name %></p>
  </div>

<%= form_with(model: @event, url:product_events_path, local: true) do |f| %>

  <%= f.hidden_field :num_id %>

  <%= f.submit "予約する" %>
  <%= f.submit "戻る", name: :back %>
<% end %>

表示用の@events.num.nameとフォーム（保存）用の
f.hidden_field :plan_idに分けて二種類記述します。

これで「確認画面」の完成です！

続いて確認したデータを保存します。

##5.2 「保存」

###コントローラー

app/controllers/events_controller.rb

#省略
  def create
    @event = Event.new(event_params)
    @event.save!
  end

#省略

 private
  
  def event_params
    params.require(:event).permit(:num_id)
  end

#省略

これで保存ができます。

###ビュー

app/events/create.html.erb

<h1>保存しました。</h1>

<p>参加人数: <%= @event.num.name %></p>

<div>
  <%= link_to "Topへ戻る", root_path %>
</div>

保存内容が確認できたら成功です！！

#まとめ
ActiveHash（アクティブハッシュ）の導入と、「確認」→「保存」→「表示」でした。

####最後に
私はプログラミング初学者ですが、同じ様に悩んでる方々の助けになればと思い、記事を投稿しております。

それでは、また次回お会いしましょう〜

#参考
アクティブハッシュ公式
https://github.com/zilkey/active_hash

【Rails】「入力」→「確認画面」→「保存」→「表示」
https://qiita.com/AKI3/items/cbdd77d604fe6aeb47d8