【Rails】MVCについて
本日はMVCについて解説していきたいと思います。
元は個人アプリ制作のコンテンツの一つとして制作したもので、ほとんどそのまま流用しています。
いつもと見た目が異なりますが、ご容赦下さい。
- 1.MVCモデルとは
- 2.MVCの関連性
- 3.ビューの処理
- (ステップアップ)form_forについて
- 4.メッセージを受け取って保存を許可
- 5.メッセージを保存して表示する
- 6.MVCの大きな流れ
- 7.ちょっと詳しいMVCの流れ
今回はMVCモデルについて解説していきたいと思います。
このカリキュラムでは、個々の処理を理解することよりも、処理と処理の関連性やデータの流れを理解することに重点を置いています。
それは本編をどうぞ！
1.MVCモデルとは
アプリケーションをモデル、ビュー、コントローラの３つの役割に分けて作っていきましょうという考え方です。それぞれの役割は簡単に言うと以下のようになります。
具体例を上げます。
2.MVCの関連性
Twitterのようなメッセージ投稿アプリを例に、MVCの各役割を解説します。
入力画面からメッセージを入力して送信すると、その結果が一覧画面の表示される思い浮かべて下さい。
イメージは以下のとおり。
ビュー
ユーザから見える画面の部分がビューになります。
コントローラへメッセージを送るための入力機能、メッセージを表示する機能を持ちます。
コントローラ
ビューから送られてきたメッセージを処理するのがコントローラです。
モデルを呼び出したり、ビューに表示させたりする処理が行われます。処理のことをアクションと呼び、普通コントローラは複数のアクションを持ちます。
モデル
データベースにメッセージを保存する機能を持ちます。
それでは具体的なコードを例に、ビューから解説していきます。
3.ビューの処理
今回は入力フォーム（テキストボックスとボタン）があるビューです。
メッセージを入力/送信する部分は、例えば以下のようなコードになります（Ruby on Rails）
- <%= form_for(@message) do |f| %>
- <%= f.text_field :content %>
- <%= f.submit %>
- <% end %>
大まかな処理について解説します。
form_forというヘルパーメソッドを使うことで、formタグが作られ、メッセージの送信ができます。引数で@messageを指定していますが、これがモデルを表します。
引数(モデル)から値を渡すコントローラとアクション（今回で言えばメッセージを保存する処理）を決定しています。
:contentは、モデルと紐付くテーブルのカラム名を指定します。contentカラムに入力したメッセージを保存することになります。
今回はメッセージモデルに紐付くのがメッセージ(messages)テーブルで、コンテント(content)というカラムを持つものとします。
イメージは以下のとおり
(ステップアップ)form_forについて
MVCモデルの説明からは脱線しますが、form_forについて、少し踏み込んで解説します。
form_forの引数
モデルを指定すると説明しましたが、正確には「モデルのインスタンス」を指定しています。
また、インスタンスの状態で呼び出すアクションが変わります。
呼び出すアクションの違い
情報を持っていない・・・メッセージを保存するアクション
情報を持っている・・・メッセージを更新するアクション
form_forのメリット
今回のform_forでは以下のようなhtmlが生成されます（一部省略）
- <form 〜 action="/users" 〜 ">
- <input 〜 name="authenticity_token" value="〜" />
- <input type="text" name="messeage[cotent]" 〜 />
- <input type="submit" 〜 />
- </form>
2行目に生成されているトークンによりcsrf対策が可能となります。また、form_forヘルパーメソッドを使用することでシンプルに記述できるので可読性も向上します。
続いて、ビューから送られてきたメッセージを保存後、再表示するアクションについて解説します。
アクションは、コントローラに定義されていて「メッセージを受け取って、保存を許可する」部分と「保存して、表示する」部分の２つに分けます。
4.メッセージを受け取って保存を許可
まず、メッセージを受け取って、保存できるようにする部分は、例えば以下のようなコードになります（Ruby on Rails）
- def message_params
- params.require(:message).permit(:content)
- end
大まかな処理について解説します。
requireで先ほどform_forで引数に指定した:message(モデル)を指定します。
次にpermitでカラム名である:contentを指定します。
これはストロングパラメータと呼ばれるもので、このように指定することで、messagesテーブルのcontentカラムに値を保存できるようになります。
ストロングパラメータのポイント
require、permitを設定する
設定することでコントローラが受け取った値を保存できる
5.メッセージを保存して表示する
次にメッセージを保存して、表示する部分です。コード例は以下のとおり。
- def create
- @message = Message.new(message_params)
- @message.save
- redirect_to action: 'index'
- end
まずストロングパラメータを呼び出して、保存する準備をします。この時、Message.new()と記述していますが、ここがモデルを利用している部分です。
saveでテーブルに保存します。newとsaveの2行で保存できるのはモデルのおかげというわけです。
redirect_toでメッセージ一覧画面を表示させます。表示させるアクションとして、indexを指定。
イメージは以下のとおり
それではここまで解説してきた「メッセージ入力」〜「保存」〜「表示」までの流れを振り返ります。
6.MVCの大きな流れ
ざっと書くと
1.ビューから入力して
2.それがコントローラに送られて
3.モデルを通してデータベースに保存されて
4.ビューに一覧が表示される
という流れになります。
イメージは以下のとおり
7.ちょっと詳しいMVCの流れ
もう少し詳しく書くと
1.入力フォームのテキストボックスに値を入力して、送信ボタンを押下
2.form_forで指定したモデル、カラム名に従って、コントローラにメッセージが送信される
3.ストロングパラメータで保存できるようにしておいて
4.モデルのnewとsaveを使って保存
5.redirect_toでメッセージ一覧画面を表示
イメージは以下のとおり
