Skip to content

board_001

Jump to bottom
irisAsh edited this page Jan 3, 2018 · 2 revisions

その１- 簡単な一覧画面と詳細画面を作成する

概要

このセクションで行うことは以下である。

  • Thread モデルの作成
  • Thread のデータ一覧参照画面、データ登録画面、データ詳細参照画面の作成

Thread モデルの作成

migrate ファイルの作成

作成する Thread モデルのとりあえずの構成は以下とする。

Column Type Note
id integer スレッド ID。
title string スレッドのタイトル。
user_id integer スレッドの作成者
created_at datetime スレッドの作成日時
updated_at datetime スレッドの更新日時

以下の 通りにrails generate modelを利用して モデルを作成する。id, created_at, updated_atはモデル作成時に自動で作成されるので、 コンソールからの指定は不要である。

$ bin/rails g model board_thread title:string user_id:integer
  invoke  active_record
  create    db/migrate/20180102125048_create_board_threads.rb
  create    app/models/board_thread.rb

db/migrate/20180102125048_create_board_threads.rb の中身を 見てみると、

class CreateBoardThreads < ActiveRecord::Migration[5.1]
  def change
    create_table :board_threads do |t|
      t.string :title
      t.integer :user_id

      t.timestamps
    end
  end
end

となっている。rails generate model時にカラムの 設定を忘れた等場合、このファイルを編集すれば後からモデル構成を変えることができる。t.string :titleのようにt.型 :カラム名 の形式で編集追加を行えば良い。

migrate を実行し、DB にテーブルを作成する

作成した migrate ファイルから実際に DB にテーブルを作成する。

$ bin/rake db:migrate
== 20180102125048 CreateBoardThreads: migrating ===============================
-- create_table(:board_threads)
  -> 0.0063s
== 20180102125048 CreateBoardThreads: migrated (0.0064s) ======================

Postgresql から実際に確認する

$ psql -U postgres

postgres=# \c learnrails_develop
learnrails_development=# \d
learnrails_development=# \d board_threads

動作確認用データの作成

データ一覧参照画面を作成した時に 表示確認のためのデータを作成しておく。Postgresql から登録しても良いが、練習のためrails consoleからデータ登録してみる。

$ bin/rails c
> BoardThread.create(title: 'Rails を学ぶ', user_id: 1)
> BoardThread.create(title: 'Ruby を学ぶ', user_id: 2)
> BoardThread.all

BoardThreadモデルのcreateメソッドを利用するとデータの Insert が行える。またBoardTheadモデルのallメソッドでテーブル内の全データを select できる。

コントローラーの作成とルーティングの設定

コントローラーの作成

rails generate controllerを利用してコントローラーを作成する。同時にアクションを作成できるが、後から作成できるので指定していない。アクションを作成する場合はrails generate controller コントローラー名 アクション名 アクション名 ...とすれば作成される。 ここでは、掲示板のコントローラーをサブディレクトリに分けるためにboard::と namespace を指定しているが、必要がなければ省いて良い。

$ bin/rails g controller board::threads
  create  app/controllers/board/threads_controller.rb
  invoke  haml
  create  app/views/board/threads

ルーティングの設定

config/routes.rbを編集してルーティングを設定する。 Rails には規則として決まったアクションが存在する。以下の通りである。

action Note
index データ一覧画面
create データ作成処理
new データ作成の入力画面
edit データ更新画面
show データ詳細画面
update データ 更新処理
destroy データ削除処理

ルーティングでは必要なアクション 分のものだけを用意すればいいが、resourcesを利用すれば一度に全アクションを追加できる。試しにconfig/routes.rbに追加してみる 。

config/routes.rb

Rails.application.routes.draw do

  namespace :board do
    resources :threads
  end

end

コンソールからルーティングを確認してみると、

$ bin/rake routes
           Prefix Verb   URI Pattern                       Controller#Action
    board_threads GET    /board/threads(.:format)          board/threads#index
                  POST   /board/threads(.:format)          board/threads#create
 new_board_thread GET    /board/threads/new(.:format)      board/threads#new
edit_board_thread GET    /board/threads/:id/edit(.:format) board/threads#edit
     board_thread GET    /board/threads/:id(.:format)      board/threads#show
                  PATCH  /board/threads/:id(.:format)      board/threads#update
                  PUT    /board/threads/:id(.:format)      board/threads#update
                  DELETE /board/threads/:id(.:format)      board/threads#destroy

と全てのアクションに対してのルーティングが設定されている。

参考

このままでもよいが、ここでは個別にルーティングの設定を行うことにする。

config/routes.rb

Rails.application.routes.draw do
  namespace :board do
    get     '/threads'          => 'threads#index'
    post    '/threads'          => 'threads#create'
    get     '/threads/new'      => 'threads#new'
    get     '/threads/:id'      => 'threads#show'
  end
end

コントローラー作成時に namespace を設定しなかった場合は、namespace :board doは不要である。 ルーティング設定の順番には注意が必要である。newの ルート設定をshow の 次の行に記述すると/threads/new とブラウザから入った時に、/newを/:idと認識されshowの画面が表示されてしまう。

ルーティングの確認

ルーティングが設定されたかコンソールから確認してみる。

$ bin/rake routes
           Prefix Verb URI Pattern                  Controller#Action
    board_threads GET  /board/threads(.:format)     board/threads#index
                  POST /board/threads(.:format)     board/threads#create
board_threads_new GET  /board/threads/new(.:format) board/threads#new
            board GET  /board/threads/:id(.:format) board/threads#show

アクションの作成

app/controllers/board/threads_contorller.rbにアクションを追加する。

app/controllers/board/threads_controller.rb

class Board::ThreadsController < ApplicationController

    def index
    end

    def create
    end

    def new
    end

    def show
    end
end

とりあえず追加したアクションはindex, create, new, showである。

一覧画面の作成

indexアクションを編集する。

app/controllers/board/threads_controller.rb

def index
    @threads = BoardThead.all
end

モデルの allメソッドを利用し、 全データを取得しインスタンス変数に 詰めておく。

次にビュー側を作成する。ビューは app/views/board/threads 配下にファイルを用意する。 デフォルトであれば、erb テンプレートを利用するが、今回は haml というテンプレートエンジンを利用する。

erb の場合は以下のようにファイルを作成する。

app/views/board/threads/index.html.erb

<h1>掲示板</h1>
<h2><%= link_to 'スレッドを作成する', board_threads_new_path %></h2>
<h2>スレッド一覧</h2>
<ul>
  <%= @threads.each do |thread| %>
    <li><%= link_to thread.title, board_path(thread.id) %></li>
  <% end %>
</ul>

ここでは、haml を利用するので以下のようにファイルを作成する。

app/views/board/threads/index.html.haml

%h1 掲示板
%h2= link_to 'スレッドを作成する', board_threads_new_path
%h2 スレッド一覧
%ul
  - @threads.each do |thread|
    %li= link_to thread.title, board_path(thread.id)

link_toを利用するとページへのリンクを用意できる。board_thread_new_pathとあるのは/board/threads/newの URL ことである。パスの表記は、bin/rake routesで表示されるPrefixの末尾に_pathを付与すればよい。

参考

登録画面の作成

Clone this wiki locally