RailsのMVCの役割を紹介！処理の流れからわかりやすく解説！Model,Controller,Viewの役割を理解しましょう！

Railsの学習をする上でまず最初に出てくるキーワードとしてMVCがあります。プログラミング初学者の方にとってMVCの説明は難しく、理解に落とし込むことができない方が多くいらっしゃいます。この記事ではMVCの概念の説明というよりは、実際にRailsの処理の流れからModel、Controller、Viewの役割を解説していきます。

まずは以下の画像を見てください。

Railsの処理はrouteから開始され、viewによって完了します。この処理の流れをまずは理解していきましょう

全体の流れを説明するための例

全体の処理の流れを説明していく上で、今回はブログの詳細ページを表示しようとしているというイメージで説明を読んでください。

①routeがURLをもとにcontrollerを呼び出す

まず、今回開きたいブログの詳細ページのURLは以下だとします。

https://sample.com/articles/1

routeはこのURLをもとにして、controllerを呼び出します。routeという名前通り、道を指し示す役割だと考えるとわかりやすいと思います。このrouteに以下のような記述を書いたとします。

  get 'articles/:id', to: 'articles#show'

getからto:までの間がURLを意味します。to:以降はコントローラー名#アクション名を意味しているので、この記述によって、https://sample.com/articles/1というURLはarticlesコントローラーのshowアクションを呼び出します。

②controllerがmodelを操作してデータを取得し、viewを呼び出す

①で呼び出されたarticles_controllerはshowアクションの中で以下のような処理を行います。

class ArticlesController < ApplicationController
    
   def show
       @article = Article.find_by(params[:id])
   end

end

ここでは以下のことをしています。

Articleモデルを操作して、指定されたIDのデータを取得している
views/articles/show.html.erbを呼び出している

実はこの1行で2つのことを行っているのですが、これだけだと理解が難しいので以下で詳しく説明していきます。

modelを操作する

以下の処理で混乱するポイントとしては@articleとparams[:id]が何を指しているのかという点だと思います。

@article = Article.find_by(params[:id])

@articleはデータが格納されている箱を用意していると思って下さい。いわゆる変数というものです。ここではまず、取得したデータを格納しているという理解だけで問題ありません。

params[:id]はrouteに書いた記述にarticles/:idというものがあったことを思い出してください。このparamsという中にidという名前のデータが格納されており、このデータの中身としてURLに記述されているhttps://sample.com/articles/1の1の部分が取得することができます。

この2つの処理により、記事ID=1のデータを@articleという変数に格納できた状態になります。

Viewを呼び出す

先述の通り、今回の例ではviews/articles/show.html.erbを呼び出しているのですが、この記述がありません。これはRailsが自動で行っている処理なので、自分で記述をしなくても自動的にviewを呼び出します。自動で呼び出すviewのルールとしては以下のようになります。

views/コントローラー名/アクション名.html.erb

③④Modelがdatabaseに実際にアクセスする

②でcontrollerが @article = Article.find_by(params[:id])という処理を行っていますが、このArticleがモデルとなり、find_byという処理で実際にdatabaseへアクセスを行っています。

⑤ViewがHTMLを構築する

②でviews/articles/show.html.erbというViewファイルが呼び出されているので、このファイルにHTMLを構築する処理を記述していきます。例えば以下のような記述をしてみます。

<div>
  <div class="title-area">
    <%= @article.title  %>
  </div>
  <div class="body-area">
    <%= @article.body  %>
  </div>
</div>

viewはerbという形式(※)で記載してHTMLを構築します。ここで注目すべきは②で取得した@articleという変数を使用できるという点です。この例ではtitle,bodyという名前のデータをdatabaseに実際に持っている前提があるのですが、お伝えしたいこととしては、@articleという変数を使用することによって、実際のデータを使ってHTMLを構築することができるという点です。

※もしくはhaml,slimという選択肢もありますが、便宜上erbで説明しています

⑥css、javascriptがHTML構築をサポートする

⑤の状態では画面にただ文字が表示されているだけなので、装飾や動きを付けていく必要があります。例えば以下のようにCSSの記述あったとします。

.title-area{
  font-size: 18px;
  color: red;
}

cssに上記のように記述することで⑤で構築されたHTMLをもとにCSSが装飾を行い、HTMLの構築をサポートすることができます。（※ここではtitle-areaというclassを目印にして文字の大きさと文字の色を変更しています）

最後に

全体の理解はできましたでしょうか？一度理解してしまえば、後は各論を詳しくなっていけばあっという間に自分で開発を行っていけるようになると思います！

ogaaryo's ReadMe

作業効率化、開発、マネジメント、ツールなどの情報を発信中