【初心者用】Ruby on Railsの勉強【一覧表示機能の実装】

ここでは一覧表示機能の実装の仕方について教えていきます。

あくまで初心者向けの方への記事ですので該当しない方は他の記事を見ることをお勧めします。初心者の方ができるだけわかりやすく理解できるように噛み砕いて解説していきます。

そもそも一覧表示って何?って思う方もいるかもしれません。一覧表示は簡単にいうとWebのトップページのことです。

 

 

✔︎本記事の内容

  • データを読み込む機能を実装する
  • indexアクションを使用して一覧表示(トップページ)を作る
  • レイアウトを整える
  • rootパスを理解する

 

MVCのおさらい

MVCがわからないという人のために簡単に解説します。他の記事でも説明していますので参考にしてください。

【初心者用】Ruby on Railsの勉強【MVC・モデルの作成方法】

 

Railsではルーティングコントローラーモデルビューの順番に処理が行われます。
このようにモデル(model)とビュー(view)、コントローラー(controller)を使用して処理を行なうシステムを、それぞれの頭文字を取ってMVCと呼ばれています。

これらを全て作っていくわけですが、今回はモデルの部分から作っていきます。

 

モデルの作成

モデルの作成方法も細かく解説していきますね。モデル名は基本的になんでもいいです。これといった決まりはありません。

自分が作りたいアプリケーションの名前を使いましょう。今回はツイート機能を作りたいのでモデル名は適当でOKです。。

 

✔︎コマンドを実行してモデルを作成

 

ターミナル
# モデルを作成
% rails g model モデル名

※ディレクトリって何?って方はこちらの記事を参考にしてください。(後から記事作成します。)

 

以下のようなログが表示されれば成功です

【例】ターミナル
1
2
3
4
5
6
      invoke  active_record
      create    db/migrate/~~~~~~~~~_create_モデル名.rb
      create    app/models/モデル名.rb
      invoke    test_unit
      create      test/models/モデル名_test.rb
      create      test/fixtures/モデル名.yml

 

上記コマンドを実行したことでモデル名.rbというモデルのファイルが作成されました。ファイルが保存されている場所はこちら
自分で作ったディレクトリ→app→models→モデル名.rb

 

これでモデルの作成が完成しました。

 

テーブルの作成

テーブルはデータを保存しておく箱のようなものです。データを種類別に保存しておくために作成します。

 

✔︎マイグレーションを編集しよう

マイグレーションファイルはモデルを作成したときに同時に作られます。保存場所はdb/migrateディレクトリです。作られたマイグレーションファイルを編集しましょう。(マイグレーションファイル名は20XXXXXXXXXXXX_create_モデル名.rb←こんな感じのやつです)

db/migrate/20XXXXXXXXXXXX_create_モデル名.rb
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
class Createモデル名 < ActiveRecord::Migration[6.0]
  def change
    create_table :モデル名 do |t|
      t.string :name
      t.string :text
      t.text :image
      t.timestamps
    end
  end
end

 

マイグレーションファイルはデータベース内のテーブルの形を設定するために用いられます。どの場所にどの種類のデータを保存するのかをこれで決めることができるのです。t. に続いているのが「型」です。stringは短文、textは長文、他にも数値や日付などの型があります。

: に続くのが「カラム名」です。いわゆる名前ですね。どんな名前の箱にデータを入れておくか。みたいな感じです。

 

✔︎マイグレーションを実行しましょう。

先ほどマイグレーションファイルを編集しましたが、今のままではデータベースは更新されていません、中身を更新するためにはマイグレーションを実行する必要があります。実行するためにはターミナルで以下のように記入しましょう。

 

ターミナル
1
2
# マイグレーションの実行(テーブルの作成)
% rails db:migrate

 

【例】ターミナル
1
2
3
4
5
# 下記のような結果が出力されれば成功です。(数字等は変化します)
== 20200306015943 Createモデル名: migrating =====================================
-- create_table(:モデル名)
   -> 0.0148s
== 20200306015943 Createモデル名: migrated (0.0149s) ============================

 

✔︎データベースにテーブルが作成できているか確認しよう

データベースを可視化するためにSequel Proというアプリをダウンロードしましょう。するとこのような感じで作成したテーブルが作成されているはずです。

テーブルの作成

 

 

カラムをダブルクリックすると編集することができます。name部分とtextの部分、日付の部分を編集してみましょう。どれも適当で構いません。3つほどデータを編集してみましょう。imageの部分は今は空のままでけっこうです。これでデータを保存する場所テーブルが完成しました。

 

投稿一覧表示機能の実装

投稿一覧を表示するってどういうことかというと、作成したテーブル内に複数のデータを保存しましたよね。例えば3つ分データを保存した場合、3つ全てのデータをブラウザに表示することを投稿一覧表示といいます。Twitterのように全ての投稿を表示するみたいな感じです。それでは実装していきましょう。

 

✔︎Indexアクションのルーティングを設定する

ルーティングを設定するためには自分で作ったディレクトリの中のroutes.rbを編集する必要があります。routes.rbはconfigというディレクトリの中にあります。indexアクションはデータを「表示」するために使うアクションです。その他にも色々なアクションがあります。詳しく知りたい方はこちらを参考ください。

【初心者用】Ruby on Railsの勉強【CRUDとindexアクション】

 

✔︎routes.rbを以下のように編集しましょう

1
2
3
4
Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
resources :モデル名, only: :index
end

 

これでMVCの中のルーティングも完了しました。モデルも先ほど作ったので残るはコントローラーとビューですね。

 

コントローラーを作成しよう

今回もコントローラー名はなんでもいいですが、コントローラーの命名は必ず複数形にしましょう。ターミナルに下記のコマンドを入力しましょう。

ターミナル
1
2
# コントローラーを作成
% rails g controller モデル名

 

 

正しく作成できていれば以下のような文章が表示されるはずです。

【例】ターミナル
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
      remove  app/controllers/モデル名_controller.rb
      invoke  erb
      remove    app/views/モデル名
      invoke  test_unit
      remove    test/controllers/モデル名_controller_test.rb
      invoke  helper
      remove    app/helpers/モデル名_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      remove      app/assets/stylesheets/モデル名.scss

 

 

これでコントローラーが作成されました。作成したコントローラーはappというディレクトリに保存されます。app→controller→モデル名_controllerという感じでファイルを開きましょう。

 

✔︎コントローラーを編集しよう

以下のように編集します。

1
2
3
4
5
class モデル名Controller < ApplicationController
  def index
    @モデル名 = モデル名.all
  end
end

 

@モデル名にテーブル全てのレコードを表示しなさいとという処理を代入します。@モデル名に代入することで、次に作成するビューファイルでわざわざ処理を記述しなくても@モデル名と書くだけで良くなります。つまり省略できるわけです。

allという部分はActive Record メソッドと言って、全てのデータを表示するという役割があります。他にもActive Record メソッドはありますがここでは説明を割愛させていただきます。Active Record メソッドを詳しく知りたい方はこちらから(後日、リンクを貼り付けます)

= モデル名の部分は先ほど作成したテーブルのことを指します。なので、上記の処理はテーブルに保存してある全てのデータを表示しなさい。という命令になります。

 

コントローラーの処理はdef(アクション名)~endの中に記述します。

 

投稿一覧のビューを作成しましょう

さて、残すはビューを作成するのみとなりました。コントローラーにindexアクションを指定したので作成するビューファイルはindex.html.erbとなります。ビューを作るときはコントローラーで指定したアクション名をファイル名にしないといけません。

仮にコントローラーでnewアクションを定義していたら作成するビューファイルはnew.html.erbです。

 

erbとはルビーを埋め込むことができるHTMLの仕組みのことです。

ビューファイルを作成する場所はapp→viewsというディレクトリに新しく作成します。

 

✔︎Index.html.erbを編集してみよう

  <% @モデル名.each do |モデル名| %>
      <p><%= モデル名.text %></p>
    <%= モデル名.name %>
   <% end %>

 

indexアクションで作成した@モデル名というインスタンス変数にeachメソッドを使用し全てのツイートを表示しなさいという処理にします。eachメソッドはデータ1つ1つに処理を行います。そうしなければ1番新しいデータのみが表示されてしまうからです。

 

これでビューが完成しました。(ビューのレイアウトは人それぞれいい感じで作ってください。cssを編集して見た目を良くするのもいいでしょう。)

 

 

レイアウトを整えよう

 

✔︎レイアウトテンプレートを使ってみよう
アプリケーションのビューファイルの共通部分をまとめたものです。
レイアウトテンプレートに、headの情報やヘッダー、フッターなどのすべてのビューで共通となる部分を記述しておくことで、各テンプレートファイルは個別の見た目を記述するだけでよくなります。

Railsの場合、application.html.erbというファイルがレイアウトテンプレートとなります。

 

 

✔︎application.html.erbを見てみよう

保存場所はapp→views→layout の中にあります。application.html.erbの中身を見てみましょう。以下のように記述されているはずです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <title>タイトルを入れよう</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

 

✔︎yieldメソッド

レイアウトテンプレートに、各テンプレートファイルを展開するためのメソッドです。
yieldを記述することで、indexアクションの場合はテンプレートファイルのindex.html.erbの内容が、newアクションの場合はnew.html.erbが、yield記述部分へ展開されるようになります。

application.html.erbでは、body要素内に<%= yield %>の記述がありました。この記述があることで、ビューファイルで記述した内容がこの部分に代入されます。つまり、ユーザーがブラウザを見るとこのファイルに書かれたコード+ビューファイル(中身)といった感じになります。

 

つまり、head要素をわざわざ各ページで記述しなくても、ここに記述しておけば全てのページで同じヘッダーやフッターをビューで表示することができます。中身の部分がyieldという部分に代入されるわけです。

 

✔︎application.html.erbを書き換えてみよう

app/views/layouts/application.html.erb
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <title>タイトルを入れよう</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <header>
         <h1>ヘッダーのタイトル</h1>
    </header>
    <%= yield %>
    <footer>
      <p>
        Copyright hogehogehoge 2020.
      </p>
    </footer>
  </body>
</html>

 

上記のようにヘッダーとフッター要素に記述しておけば全てのビューで同じヘッダーとフッターが表示されます。気をつけないといけないことは<%= yield %>忘れないこと。これがないと中身が表示されません。

 

これでHTMLの文章構成が完成しました。ただ、これだけでは見栄えが良くないので今度はcssを適用して見た目をよくしていきたいと思います。

 

✔︎cssファイルの適応

Railsでcssファイルを適応させるためにはstylesheet_link_tagというものを使用します。先ほど作成したapplication.html.erbを見て欲しいのですが、8行目にstylesheet_link_tagが記述されていますよね。これがRailsで読み込むcssファイルを指定できるヘルパーメソッドになります。

 

このcssファイルはapp→assets→stylesheetsディレクトリに保存されています。今回はapplication.html.erbstylesheet_link_tagの引数には、‘application’と書いてあるため、app/assets/stylesheets/ディレクトリ内のapplication.cssというCSSファイルを読み込むことを示しています。これによってapp/assets/stylesheets/ディレクトリ内にある全てのファイルを適応させることができるようになります。

 

✔︎cssファイルを作ろう

app/assets/stylesheets/ディレクトリ内に新たにcssファイルを作成します。cssについてはこの記事では触れませんので別記事を参考に自分で設定してみてください。

 

 

これでアプリケーションのレイアウトが完成しました。ブラウザに表示して確認してみましょう。何も投稿されていないので何もない状態のはずです。次回、投稿機能についての記事を書いていきますのでそちらを参考にして文章を投稿してみてください

 

rootパスの設定

今のままではhttp://localhost:3000へアクセスするとRailsの「初期画面」が表示されます。それを今回作成したトップページが表示されるようにすることをrootパスを設定するということです。

 

✔︎rootパスの設定方法

routes.rbファイルに以下のように記述しましょう。

config/routes.rb
1
2
3
4
5
Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root to: 'モデル名#index'
  resources :モデル名, only: :index
end

 

これは作成したコントローラーのindexアクションへパスを変更するという意味になっています。ちなみにルートパスというのはこれのことです。これでもう一度、http://localhost:3000にアクセスすると先ほど作成したトップページが表示されるようになります。

 

以上で一覧表示機能の実装についての解説を終わります。次回はこれに追加して色んな機能を実装していきます。また、ご覧になってみてください。

 

Follow me!

【初心者用】Ruby on Railsの勉強【一覧表示機能の実装】” に対して1件のコメントがあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です