#はじめに
個人開発中のアプリケーションに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のアクティブハッシュをインストール。
gem 'active_hash'
bundle install
Gemをインストールした後はrails sをcontrol + Cで一度停止し、サーバーを再起動する必要があります。
#2. ActiveHashモデル作成・編集
まず、アクティブハッシュ用のモデル作ります。
rails g model num --skip-migration
--skip-migrationはマイグレーションファイル作らないと言う意味。
次に、今作ったnumモデルを編集します。
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に以下を追記します。
class Event < ApplicationRecord
#モジュールを取り込む記述
extend ActiveHash::Associations::ActiveRecordExtensions
# アクティブハッシュ用アソシエーション
belongs_to_active_hash :num
validates :num_id, presence: true
ついでに、バリデーションも設定してます。
今回は、複雑なデータベース設計ではないので上記で上手く機能してます。
ActiveHashを用いたアソシエーションの設定は、他にもあるにたいなので、詳しくは下記の参考から公式サイトを確認してみてください。
マイグレーションファイル編集もします。
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
###ルーティングの設定
Rails.application.routes.draw do
root to: 'tops#index'
resources :events do
collection do
post :confirm
end
end
end
###コントローラーを作成・編集
入力用にnewだけ追記します。
class EventsController < ApplicationController
def index
end
def new
@event = Event.new
end
#省略
###続いてビューの編集をします。
プルダウンで選択してもらうため、selectメッソドを使います。
<%= 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 %>
構文はこちらです。
<%= f.collection_select(:num_id, Num.all, :id, :name, {}, {class:"#", id:"#"}) %>
<%= f.collection_select(保存先のカラム名, オブジェクトの配列, 保存する項目, 表示されるカラム名, オプション, htmlオプション) %>
newページで確認してください。
これで最低限のActiveHashは実装できました！！
次は、 「確認」→「保存」→「表示」→「編集」 と進めていきます。
#5. 「確認」→「保存」→「表示」
今回、確認画面を挟んでるのでまず「確認画面」作成していきます。
##5.1 「確認画面」
まずはコントローラーから設定します。
###コントローラー
confirmのアクション作ります。
#省略
def confirm
@event = Event.new(event_params)
render :new if @event.invalid?
end
#省略
バリデーションをかけてるので、ここで適応させます。
###ビュー
views/events配下に新しくconfirmのビューを作成します。
<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 「保存」
###コントローラー
#省略
def create
@event = Event.new(event_params)
@event.save!
end
#省略
private
def event_params
params.require(:event).permit(:num_id)
end
#省略
これで保存ができます。
###ビュー
<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