Railsの大まかな流れ（３）
2019-4-27
ページに情報を表示する
今回から情報のやりとりについてまとめます。
先日ブログアプリを作成しましたので、そちらを例に、記事を投稿する、投稿された記事を表示するという流れを書きます。
今回は、ページに投稿された記事を表示させるという流れから見ていきます。
本来は処理自体はルーティング→コントローラ→ビューという流れですが、表示されている情報はどこから来たのかという視点でビューからまとめてみたいと思います。
後半は、ルーティングからの流れもまとめます。
まず、画面に表示するされるのはビューファイルの内容です。
ビューファイル
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アクションは下記の通りです。
長いですが、要はユーザーが投稿した記事を１ページ５記事ずつ新しい順に上から表示するという内容です。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
indexは上記で説明した通りトップページです。投稿した記事の一覧はトップページで見れるようにしています。rootというのは最初に訪れる、また他ページからのリダイレクト先にあたります。getはHTTPメソッドの一つで、リクエストしたらレスポンスを返す（ページを表示する）を表します。getの文は説明の為に書きましたがindexはrootに設定しているので省略可能です。
以上は、ユーザーが実際に目にするページであるビューから遡って見てきました。
しかし本来はアクセスしてリクエストを送り、 レスポンスとして帰ってきたもの（ビュー）を見るという流れですので、ルーティングからざっと流れをまとめます。
まず、ユーザーはWEBページにアクセスします。
↓
最初に表示される、つまりルーティングでrootに設定されているのはindexページです。
↓
indexには何を表示するのかというと、それはコントローラのindexアクションに記されているもの。今回は投稿された記事の一覧です。
それらはデータベースのテーブルから取ってきます。
↓
実際それをディスプレイに表示させるのはビューファイルの役割です。今回はindexページですので、それ専用に作ったindex.html.erbにコントローラのindexアクションから情報を渡され、それを表示します。ビューファイルはhtmlですので、中身はページを構成するマークアップ言語が書かれています。（拡張子のerbはrubyの文を書けるものです。またCSSやレイアウトファイルも必要ですが、ここではこれらの細かい説明は割愛します）。
今回は、ページに情報を表示するという部分をまとめました。
次回は、入力された情報を受け取るという部分をまとめたいと思います。
