ここでは一覧表示機能の実装の仕方について教えていきます。
あくまで初心者向けの方への記事ですので該当しない方は他の記事を見ることをお勧めします。初心者の方ができるだけわかりやすく理解できるように噛み砕いて解説していきます。
そもそも一覧表示って何？って思う方もいるかもしれません。一覧表示は簡単にいうとWebのトップページのことです。
✔︎本記事の内容
- データを読み込む機能を実装する
- indexアクションを使用して一覧表示（トップページ）を作る
- レイアウトを整える
- rootパスを理解する
MVCのおさらい
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←こんな感じのやつです）
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の部分、日付の部分を編集してみましょう。どれも適当で構いません。３つほどデータを編集してみましょう。imageの部分は今は空のままでけっこうです。これでデータを保存する場所テーブルが完成しました。
投稿一覧表示機能の実装
投稿一覧を表示するってどういうことかというと、作成したテーブル内に複数のデータを保存しましたよね。例えば３つ分データを保存した場合、３つ全てのデータをブラウザに表示することを投稿一覧表示といいます。Twitterのように全ての投稿を表示するみたいな感じです。それでは実装していきましょう。
✔︎Indexアクションのルーティングを設定する
ルーティングを設定するためには自分で作ったディレクトリの中のroutes.rbを編集する必要があります。routes.rbはconfigというディレクトリの中にあります。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番新しいデータのみが表示されてしまうからです。
これでビューが完成しました。（ビューのレイアウトは人それぞれいい感じで作ってください。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を書き換えてみよう
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を見て欲しいのですが、８行目にstylesheet_link_tagが記述されていますよね。これがRailsで読み込むcssファイルを指定できるヘルパーメソッドになります。
このcssファイルはapp→assets→stylesheetsディレクトリに保存されています。今回はapplication.html.erbのstylesheet_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ファイルに以下のように記述しましょう。
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の勉強【ツイートの一覧表示】 […]