shimmyShow Webアプリ開発ブログ

プログラミングスクールTECH::CAMPを73期を卒業し、紙媒体で実施されている教育の根本を変えていくためのサービスを開発中。当ブログを読めば誰でも当該サービスを開発できるようにするため軌跡を記録中。

都道府県テーブル作成前に確認したい gem active_hash !

都道府県名など基本的に変更が入らないデータに関しては都道府県テーブルを作成し、データベース上に登録しておいてもいいが、active_hashを用いることでデータベースへ登録する必要がなくなる。

 

具体的な導入方法

Gemの追加

Gemfileへ下記記述を追加する。

 Gemfile

  gem 'active_hash'

gemのinstall

下記コマンドを実行する。

  bundle install

 

モデルを作成

下記コマンドを実行する。

(group_dev部分は生成するモデル名のため作成したいモデル名を入力してください。)

 rails g model group_dev 

マイグレーションファイルの修正

モデルを生成するとマイグレーションファイルが生成される。

必要なカラム prefecture_idとprefecture_nameを追加する。

 db/migrate/20XXXXXXXXXXXX_create_group_devs.rb

  def change

      create_table :group_devs do |t|

        t.integer :prefecture_id

        t.string :prefecture_name

        t.timestamps

      end

   end

 

マイグレーションファイルの実行 

下記コマンドを実行する。

 rails db:migrate

 

Prefectureモデルの生成

コマンドではなく、新規ファイル生成から下記ファイルを作成する。

/app/models/prefecture.rb

class Prefecture < ActiveHash::Base

  self.data = [

      {id: 1, name: '北海道'},

      {id: 2, name: '青森県'},

      {id: 3, name: '秋田県'},

      {id: 4, name: '岩手県'},

      {id: 5, name: '宮城県'},

      {id: 6, name: '山形県'},

      {id: 7, name: '福島県'},

      {id: 8, name: '茨城県'},

      {id: 9, name: '栃木県'},

      {id: 10, name: '群馬県'},

      {id: 11, name: '埼玉県'},

      {id: 12, name: '千葉県'},

      {id: 13, name: '東京都'},

      {id: 14, name: '神奈川県'},

      {id: 15, name: '新潟県'},

      {id: 16, name: '富山県'},

      {id: 17, name: '石川県'},

      {id: 18, name: '福井県'},

      {id: 19, name: '山梨県'},

      {id: 20, name: '長野県'},

      {id: 21, name: '岐阜県'},

      {id: 22, name: '静岡県'},

      {id: 23, name: '愛知県'},

      {id: 24, name: '三重県'},

      {id: 25, name: '滋賀県'},

      {id: 26, name: '京都府'},

      {id: 27, name: '大阪府'},

      {id: 28, name: '兵庫県'},

      {id: 29, name: '奈良県'},

      {id: 30, name: '和歌山県'},

      {id: 31, name: '鳥取県'},

      {id: 32, name: '島根県'},

      {id: 33, name: '岡山県'},

      {id: 34, name: '広島県'},

      {id: 35, name: '山口県'},

      {id: 36, name: '徳島県'},

      {id: 37, name: '香川県'},

      {id: 38, name: '愛媛県'},

      {id: 39, name: '高知県'},

      {id: 40, name: '福岡県'},

      {id: 41, name: '佐賀県'},

      {id: 42, name: '長崎県'},

      {id: 43, name: '熊本県'},

      {id: 44, name: '大分県'},

      {id: 45, name: '宮崎県'},

      {id: 46, name: '鹿児島県'},

      {id: 47, name: '沖縄県'}

  ]

end

 

group_devモデルの修正

 rails g modelコマンドで生成したモデルへprefecture active_hashとのアソシエーションを記述する。

 group_dev.rb 

  class GroupDev < ApplicationRecord

    extend ActiveHash::Associations::ActiveRecordExtensions

    belongs_to_active_hash :prefecture

  end

 

準備完了

コントローラーの編集

都道府県データを登録するためにコントローラーに下記を実装する。

 class GroupDevsController < ApplicationController

   def index

     @prefecture = GroupDev.new

   end

 end

 

ビューの編集

 今回はindex.html.haml都道府県の選択ボックスを表示することにする。

 (下記のままコピー&ペーストで使用することもできるが、それぞれの環境でクラス名等の変更は実施してください。)

 index.html.haml

 .putup

   .putup__main

     .putup__main__prefecture

       %p.putup__main__prefecture__title

         都道府県

         %span.putup__main__prefecture__title__imperative

           必須

       .putup__main__prefecture__box

         = form_for @product do |f|

           = f.collection_select :prefecture_id, Prefecture.all, :id, :name, {prompt: ""}, {class: "putup__main__prefecture__box__def"}

 

cssの編集

index.html.haml用にscssも下記のように編集する。

index.scss

.putup{

  background-color: whitesmoke;

 

  &__main{

    width: 50%;

    min-width: 500px;

    height: 100vh;

    margin:0 auto;

    background-color: white;

    &__prefecture{

      padding-top: 40px;

      &__title{

        margin-left: 40px;

        font-weight: bold;

        font-size: 14px;

        &__imperative{

          border-radius: 2px;

          padding: 2px 4px;

          font-size: 12px;

          background-color:#99FFFF;

        }

      }

      &__box{

        margin: 20px 40px 0px 40px;

        height: 40px;

        border-radius: 5px;

        &__def{

          width: 100%;

          height: 40px;

        }

      }

    }

  }

}

 

上記記述が完了し、ブラウザで確認すると下記のように表示される。

f:id:erwinmarvin:20200610224849p:plain

表示

f:id:erwinmarvin:20200610224915p:plain

プルダウン表示