Rails 大まかな流れ(3)

 ページに情報を表示する

今回から情報のやりとりについてまとめます。

先日ブログアプリを作成しましたので、そちらを例に、記事を投稿する、投稿された記事を表示するという流れを書きます。

今回は、ページに投稿された記事を表示させるという流れから見ていきます。

 

本来は処理自体はルーティング→コントローラ→ビューという流れですが、表示されている情報はどこから来たのかという視点でビューからまとめてみたいと思います。

後半は、ルーティングからの流れもまとめます。

 

まず、画面に表示するされるのはビューファイルの内容です。

ビューファイル

index.html.erb

 
<p><%= @article.blogs %></p>
 

indexはトップページです。

表示されるのは@articleというインスタンス変数に入った情報ということになります。ではこの@articleはどこから来たのか見ていきましょう。

 

コントローラ

blogs_controller.rb

def index
@articles = Article.all
end

ビューファイルに表示する情報を渡すのはコントローラーの役割でした。

上記はの内容は、indexアクションが定義されていますので、同じ名前のindex.html.erbに対し情報を渡しています。

どのような情報かというと@articleです。では今回の@articleはどういうものかというと

Article用のテーブル(テーブル名はarticleと先頭小文字になります)の情報を全て(all)取り出しインスタンス変数@articleに代入します。

 

ちなみに小生が作ったブログアプリのindexアクションは下記の通りです。

長いですが、要はユーザーが投稿した記事を1ページ5記事ずつ新しい順に上から表示するという内容です。paramsは情報を受け取るためのものなので、次回以降のブログで説明します。

 
def index
@articles = Article.includes(:user).page(params[:page]).per(5).order("created_at DESC")
end

 

そして、コントローラとデータベースの間にはモデルというものがあるのでした。

 

モデル

article.rb

class Article < ApplicationRecord
belongs_to :user
end

belongs_to :userは何を意味するかというと、「一つの記事は一人のユーザーに属する」です。一つの記事を複数人が投稿はしませんよね。このようにユーザーと記事やコメントなどそれぞれ関係付けるのをアソシエーションと言います。

user.rb

class User < ApplicationRecord
has_many :articles
end

逆に一人のユーザーは複数の記事を投稿できます。それを表すと上記のようになります。

このようにモデルにはアソシエーションを定義し、それぞれのデータに矛盾が生じないようしています。

 

 

ルーティング

route.rb

Rails.application.routes.draw do
devise_for :users
root 'blogs#index'
get 'blogs' => 'blogs#index'

indexは上記で説明した通りトップページです。投稿した記事の一覧はトップページで見れるようにしています。rootというのは最初に訪れる、また他ページからのリダイレクト先にあたります。getはHTTPメソッドの一つで、リクエストしたらレスポンスを返す(ページを表示する)を表します。getの文は説明の為に書きましたがindexはrootに設定しているので省略可能です。

 

 

以上は、ユーザーが実際に目にするページであるビューから遡って見てきました。

しかし本来はアクセスしてリクエストを送り、 レスポンスとして帰ってきたもの(ビュー)を見るという流れですので、ルーティングからざっと流れをまとめます。

 

まず、ユーザーはWEBページにアクセスします。

最初に表示される、つまりルーティングでrootに設定されているのはindexページです。

indexには何を表示するのかというと、それはコントローラのindexアクションに記されているもの。今回は投稿された記事の一覧です。

それらはデータベースのテーブルから取ってきます。

実際それをディスプレイに表示させるのはビューファイルの役割です。今回はindexページですので、それ専用に作ったindex.html.erbにコントローラのindexアクションから情報を渡され、それを表示します。ビューファイルはhtmlですので、中身はページを構成するマークアップ言語が書かれています。(拡張子のerbはrubyの文を書けるものです。またCSSやレイアウトファイルも必要ですが、ここではこれらの細かい説明は割愛します)。

 

今回は、ページに情報を表示するという部分をまとめました。

次回は、入力された情報を受け取るという部分をまとめたいと思います。