【Rails】ActiveHash（アクティブハッシュ）の導入と「確認」→「保存」→「表示」

#はじめに

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


###目次

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



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

【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`モデルを編集します。

```ruby: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に以下を追記します。


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

  validates :num_id, presence: true
```
ついでに、バリデーションも設定してます。

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


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

```ruby: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

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

```ruby:config/routes.rb
Rails.application.routes.draw do
  root to: 'tops#index'

    resources :events do
      collection do
        post :confirm
      end
    end
  end
```
###コントローラーを作成・編集
入力用に`new`だけ追記します。

```ruby:app/controllers/events_controller.rb
class EventsController < ApplicationController
  def index
  end

  def new
    @event = Event.new
  end

#省略
```

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

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

```html: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 %>

```

構文はこちらです。

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

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

![スクリーンショット 2020-11-25 6.32.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769854/45bbd47f-1de0-21ff-7e3d-d4f5fad615a2.png)

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



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

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

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


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

```ruby:app/controllers/events_controller.rb
#省略
  def confirm
    @event = Event.new(event_params)
    render :new if @event.invalid?
  end
#省略
```
バリデーションをかけてるので、ここで適応させます。


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


```html: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 「保存」


###コントローラー

```ruby: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

#省略

```

これで保存ができます。



###ビュー

```ruby:app/events/create.html.erb
<h1>保存しました。</h1>

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

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

![スクリーンショット 2020-11-25 12.57.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769854/4fafc6a3-0f95-60dd-33bf-2ef7d5dabfc7.png)

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


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


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

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



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

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