MVCモデルに関して簡単にまとめてみた

マッチングサイトの開発にMVCモデルを適用していたため、
自分の後学のためにMVCモデルに関して自分なりに調べてまとめてみました。
開発の際に自分なりに解釈した部分も含まれるため、間違っている点あると思います。ご容赦ください。

MVCモデルとは？

MVCモデルとはプログラムの処理を役割ごとに分けて開発を行う考え方です。Webシステムの開発によく用いられるそうです。

例えばあなた（ユーザー）がもう一人のユーザーとメッセージでやり取りを行うとします。
メッセージ画面には入力フォームが用意されています。

あなたはその入力フォームよりメッセージを入力し、送信ボタンを押下します。

すると、コンピュータは入力されたメッセージのデータを受け取り、問題なければDBへ登録し、あなたが送信したメッセージが表示されたメッセージ画面をあなたへ返します。

この流れを一連で記載すると以下のようになります。

1.ユーザーより、メッセージを入力

2.入力された値(メッセージ)を受け取り、不正な値でないかなどを確認

3.入力された値(メッセージ)をDBへ登録

4.ユーザーの画面上に入力したメッセージを表示

MVCそれぞれの役割

MVCはModel View Controllerの頭文字を指しており、それぞれ役割が決まっています。

それぞれの役割を以下に記載します。

Model

データの処理や、データをDBから取得またはDBへ格納する役割を果たしています。

View

ユーザーに対して画面の表示を行います。ユーザーが実際に目にする部分です。

また、Controllerから受け取ったデータ（レスポンス）を画面へ表示、ユーザーからのリクエストをControllerへ送る役割も果たしています。

Controller

Viewからリクエストを受け取り、Modelに処理の命令を渡す役割や、Modelから処理結果を受け取り、レスポンスとしてViewへ渡す役割を果たしています。
いわば、ViewとModelの中継役です。

MVCの処理の流れをコードを通して紹介

実際にMVCの処理の流れを、メッセージのやり取りを例にコードを通して紹介します。

1.ユーザーからのリクエストをControllerへ送る(View)
入力フォームよりメッセージのを入力し、送信ボタンを押下

2.Viewからリクエストを受け取り、Modelに処理の命令を渡す(Controller)

package com.example.matching.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import com.example.matching.entity.CHATHISTORY;
import org.springframework.ui.Model;

@Controller
public class MessageController {
    /* View(HTML)からリクエストを受け取る */
    @PostMapping("/message")
        public void saveChatHistroy(@ModelAttribute CHATHISTORY chatHistory, Model model) {
            int loginUserId = loginProcessing(model);

            /* service(Model)へ入力されたメッセージをDBへ格納する処理を命令 */
            messageService.addChatData(chatHistory, loginUserId);
        }
}

3.データ(メッセージ)をMapperを経由し、DBへ格納(Service)

package com.example.matching.service;

import org.springframework.beans.factory.annotation.Autowired;
import com.example.matching.entity.CHATHISTORY;
import com.example.matching.mapper.ChatMapper;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Autowired
ChatMapper chatMapper;
@Service
@Transactional
public class MessageService {
    public void addChatData(CHATHISTORY enChatHis) {

            /* Mapper(XML)にてデータ(メッセージ)を、DBに格納 */
            chatMapper.insertMessageHistory(enChatHis);
    }
}

4.データ(メッセージ)をMapperを経由し、DBから取得(Service)

package com.example.matching.service;

import java.util.ArrayList;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import com.example.matching.entity.CHATHISTORY;
import com.example.matching.mapper.ChatMapper;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Autowired
ChatMapper chatMapper;
@Service
@Transactional
public class MessageService {
    public List<CHATHISTORY> getNewMessage(int roomId, int loginUserId) {
        /* メッセージ履歴格納用 */
        List<CHATHISTORY> messageLogList = new ArrayList<>();
        // 未読メッセージ取得
        messageLogList = chatMapper.getNewChat(roomId, loginUserId);

        return messageLogList;
    }
}

5.Service(Model)から処理結果(メッセージ)を受け取り、レスポンスとしてView(HTML)へ渡す

package com.example.matching.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import com.example.matching.entity.CHATROOM;
import org.springframework.ui.Model;

@Controller
public class MessageController {
    @PostMapping("/message_room_select")
    public String postRoomSelect(@ModelAttribute CHATROOM chatRoom, Model model) {
            /* Service(Model)から処理結果(メッセージ)を受け取り、View(HTML)にmessageLogListという変数で渡す（レスポンス）*/
        model.addAttribute("messageLogList", messageService.getMessageLog(chatRoom.getROOM_ID()));
    /* 上記の処理をメッセージ画面に渡す */
    return "message";
    }
}

6.Controllerから受け取ったデータ（レスポンス）を画面へ表示(View)

まとめ

MVCモデルとは「プログラムの中身をModelとViewとControllerに分けて作る」考え方のことです。

MVCモデルは多くのフレームワーク（Javaの「SpringBoot」や、PHPの「Laravel」）が採用しているので、フレームワークを使用したWebシステムの開発を行う際にMVCモデルの考え方を取り入れるのをオススメします。

参考文献