【Rails】Modelの作成とルーティングと一覧表示まで

テックアカデミーというプログラミングスクールに通いながらお店の口コミサイトを鋭意製作中です。
今日は中核を担うお店のモデル（Shopsテーブル）を作る予定です。

予めお店をいくつかDBに保存しておき、それを一覧表示するところまで進めたいと思います。

ShopsテーブルのDB設計

shopsテーブルのDB設計は以下のように行いました。

【Shopsテーブル】

Shopsモデルの作成

Shopモデルをコンソールで作成、テーブルも作成します

マイグレーションファイルを実行してテーブルを作成

テーブルが作成されているか確認

これで考えてたDB構成が作られてた。

close_flgはBoolean型なのでnilを受け付けないようにデフォルトをFalseにしようと思いました。

マイグレーションファイルを修正して、再度マイグレーションを実行‥

とやったら、おかしくなった。。

一度実行したマイグレーションファイルの再実行は駄目なんだそうです。

ここで１時間ほどつまづきました。

実は既にレッスンで習ったことを忘れてて、何故か既に実行済のマイグレーションファイルをいじりはじめてしまったのです‥（汗

テックアカデミーの講師によると

｀rails db:rollback｀ で前に反映したものを未反映（ ｀rails db:migrate:status｀ で down 表示になる状態）にしてから再度 ｀rails db:migrate｀で反映して下さい

とのことなので。いったんロールバックしてから、マイグレーションファイルを以下のように編集して、再度マイグレーションを実施。

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

class CreateShops < ActiveRecord::Migration[5.0]
  def change
    create_table :shops do |t|
      t.string :name
      t.string :y_id
      t.string :y_gid
      t.string :y_uid
      t.string :y_ido
      t.string :y_keido
      t.string :y_address
      t.string :y_leadimage
      t.boolean :close_flg, default: false, null: false

      t.timestamps
    end
  end
end

デフォルト値の指定は以下のような書き方となります。同時にnullの場合はfalseにするように指定しています。

t.boolean :close_flg, default: false, null: false

あと基本的に（特に本番環境で）反映済のマイグレーションファイルを直接いじってはいけませんのでご注意下さい。

運営開始してから間違ってDB作り直しとかすると、（バックアップ取ってなければ）会員情報とか投稿してもらった情報とか全部飛びます。

また複数人で開発しているとDB周りに差分が出来たりするとバグるので気をつける必要があります。

うーん。DBは最初に設計をしっかりやっておかないと大変なことになりそうだな。。プログラミング初心者には難しいぜ！

モデルを作ったらルーターを作成

Railsの一般的なプログラミングの流れに従って、モデル→ルーター→コントローラーという順で作っていきます。

config/routes.rbを次のように編集。

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

  resources :shops
end

$rails routesでルーティングが作成されてるか確認。

このようになりました。
それぞれ以下のように考えています。（これが後のレビューで修正になるとは‥）

①ショップの一覧を表示する
shops GET /shops(.:format) shops#index

②ショップのDB保存
POST /shops(.:format) shops#create

③口コミ投稿画面
new_shop GET /shops/new(.:format) shops#new

④2回目以降の口コミ投稿画面
edit_shop GET /shops/:id/edit(.:format) shops#edit

⑤店舗口コミ詳細画面
shop GET /shops/:id(.:format) shops#show

この3つはよくわからないので取り敢えず保留（汗
PATCH /shops/:id(.:format) shops#update
PUT /shops/:id(.:format) shops#update
DELETE /shops/:id(.:format) shops#destroy

ルーターを作ったらコントローラーを作成

コンソールで生成コマンド

shopのコントローラーを実装

shops_controller.rbに７つのメソッドを書いて枠だけ作っておく。随時それぞれのメソッドを実装していく形にしています。

class ShopsController < ApplicationController
  def index
  end

  def show
  end

  def new
  end

  def create
  end

  def edit
  end

  def update
  end

  def destroy
  end
end

コントローラーの次はVIEWの作成

コントローラーを作ったらビューを作る、というのもRailsの標準的な開発の流れです。

cd app/views/shops/　で移動して以下ファイルを作成。

index.html.erb
show.html.erb
new.html.erb
edit.html.erb

ショップ一覧画面を作成する

index.html.erbでショップ一覧を表示させるので、以下のように記述。

<% content_for :cover do %>
  <div class="cover">
    <div class="cover-inner">
      <div class="cover-contents">
        <h1>店舗一覧</h1>
      </div>
    </div>
  </div>
<% end %>

<p>テスト</p>

テストのところにDBから取ってきたShopの一覧を表示させたいと思います。

手動で予めデータを入れておく

さて、このタイミングでショップ情報を手動でDBに入れておきました。

rails cコンソールを使って手動でデータ作成。

mysqlで確認。

shop#indexアクションを実装

先程作成したshop_controller.rbの、indexメソッドを実装していきます。

取り敢えず、すべてのshopを取得して@がついた変数に代入します。これでVIEW側でもこの変数が使えるようになる。

class ShopsController < ApplicationController
  def index
    @shops = Shop.all
  end

VIEW（index.html.erb）の実装

上のindexアクションから送られてきた@shopsを用いて一覧表示を行います。

<p><%= @shops.length %>件ヒットしました。</p>

<div class="shoplist">

  <% @shops.each do |shop| %>
  
    <article class="shoplist-item">
  
      <p class="shoplist-title"><%= shop.name %></p>
      
      <div class="shoplist-thumb">
        <img src="<%= root_url %>images/icon/icon-no-image.png">
      </div>
  
      <div class="shoplist-cont">
        <p><%= shop.y_address %></p>
        <p>緯度：<%= shop.y_ido %>　経度：<%= shop.y_keido %></p>
      </div>
  
    </article>
  <% end %>

</div>

each文でショップの数だけループさせ、その中でshop.nameで店舗名を表示、また画像はまだ無いので仮のNo Image画像を出して、ショップの住所と緯度・経度だけを表示させます。

これでここまで出来ました。

データベースに後からカラムを追加（汗

ここまで実装を進めてきたのですが、途中でカラムを追加したくなりました（汗）あれほど言われてるのに。

設計の時に先を見越してちゃんとしたDBを構築できていれば良かったのですが、テックアカデミーの講師の方とのレビューもまだなので、かつ自分で試行錯誤したかったのでこのようになってしまいました。

shopsテーブルに追加したカラムは

osusume(boolean)　→　店主が◯◯をおすすめしてるかどうか
y_moyorieki(str)　→　最寄り駅と徒歩◯分

の2つです。

作成済みDBに後からカラムを追加する方法

コンソールで以下のように実行。

Addカラム名Toテーブル名 カラム名:型
とやります。

osusumeカラム追加

マイグレーションファイルが作成されます。

y_moyoriekiカラム追加

マイグレーションも実行しました。テーブルに本当にカラムが追加されているか確認します。

これでOKですね。

画面表示はこのようになりました。

ボタンも作成したのですが、うまく枠内にはまりません。

ショップ一覧画面を一旦完成させる

Bootstrapを使って画面をデザインして結果的にindex.html.erbは以下のようにしました。

<% content_for :cover do %>
  <div class="cover">
    <div class="cover-inner">
      <div class="cover-contents">
        <h1>店舗一覧</h1>
      </div>
    </div>
  </div>
<% end %>

<p><%= @shops.length %>件ヒットしました。</p>


<div class="shoplist">

  <% @shops.each do |shop| %>
  
    <article class="shoplist-item">
  
      <div class="raw">

        <div class="col-xs-4"> 
          <div class="shoplist-thumb">
            <img class="mw100" src="<%= root_url %>images/icon/icon-no-image.png">
          </div>
        </div>
    
        <div class="col-xs-8"> 
          <div class="shoplist-cont">

            <p class="shoplist-title orange b"><%= shop.name %></p>
            <p><%= shop.y_address %><br><%= shop.y_moyorieki %></p>
            <p>緯度：<%= shop.y_ido %>　経度：<%= shop.y_keido %></p>


<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
<p>ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう</p>

            <div class="raw">
              <div class="col-xs-6"><a class="btn btn-danger" href="new_kuchikomi_path"><span>店情報の投稿に協力する</span></a></div>
              <div class="col-xs-6"><%= link_to shop, class: "btn btn-warning" do %><span>店内写真や口コミを見る</span><% end %></div>
            </div>


          </div>
        </div>
      </div>

    </article>
  <% end %>

</div>

画面表示が以下のようになったところで、ひとまずショップ一覧画面は完成として次に進みたいと思います。

次は、口コミModelの作成に入ります！