Help us understand the problem. What is going on with this article?

MVCモデルについての私の解釈

More than 1 year has passed since last update.

はじめに

年末年始にiOSアプリ開発の勉強をしていて,
MVCモデルについて自分なりの理解ができたので,まとめてみました.

MVCモデルとは

よく見る定義

アプリケーション作成時に用いる設計パターンの1種で,
ソースコードをModel, View, Controllerの3つの役割に分割して開発する手法.

  • Model : システムの中でビジネスロジックを担当する
  • View : 表示や入出力といった処理をする
  • Controller : ユーザーの入力に基づき,ModelとViewを制御する

Viewがアプリの見た目の部分を制御するってのはわかる.
ControllerとModelってなんかわかりにくい.
ビジネスロジックってなんですか...というのが僕の初見の感想です.

勉強してみてしっくりきた例え

難しい概念も,身近なものにうまく例えることで理解できることありますよね.
MVCモデルの理解をするにあたり,しっくりきた例えはレストランです.

MVCモデルの相互作用はレストランでの流れに似ています.

  1. まず客はウェイターに対して料理を注文します.
  2. ウェイターは注文があったことをキッチンに伝えます.
  3. キッチンではシェフが冷蔵庫などから素材を取り出し,
  4. 注文通りの料理を作ります.
  5. 完成した料理をウェイターがテーブルに運びます.
  6. 料理が客の元へと届けられます.

この時,それぞれをこう置き換えてみます.

  • レストラン : アプリケーション
  • 客 : ユーザー
  • テーブル : View
  • ウェイター : Controller
  • キッチン : Model
  1. まずUser(客)はController(ウェイター)に対してイベント通知(料理を注文)します.
  2. Controller(ウェイター)は注文があったことをModel(キッチン)に伝えます.
  3. Model(キッチン)ではシェフがDataBase(冷蔵庫など)から素材(data)を取り出し,
  4. モデルで定義されている形に整形します(注文通りの料理を作ります).
  5. 完成した料理をController(ウェイター)がView(テーブル)に運びます.
  6. 料理が客の元へと届けられます.

スクリーンショット 2019-01-11 17.58.43.png

僕の中でかなりしっくりきました.
この例えから
・Viewはユーザに対する表示や入出力部分を扱う役割.
・ModelはDataBaseからデータを取ってきて定義されている形(モデル)に変える役割.
・ControllerはModelとViewの仲介であり,Modelから受け取ったデータをViewに表示させたり,Viewから受け取った入力をModelに伝える役割.

という風に解釈できました.

MVCモデルに基づいたアプリ制作

制作したもの

Swiftを用いたQuizアプリケーション.

スクリーンショット 2019-01-11 17.02.46.png

プロジェクトの構造

スクリーンショット 2019-01-11 17.40.43.png

View

swiftを使ったiOSアプリなのでViewはstoryboardを使って作成.

スクリーンショット 2019-01-11 17.56.44.png

Model

本アプリケーションで使用する問題を格納するクラス.

Question.swift
import Foundation

class Question {
    let questionText: String
    let answer: Bool

    init(text: String, correctAnswer: Bool) {
        questionText = text
        answer = correctAnswer
    }
}

また,今回はデータベースとのリモートにやりとりすることはせず,
Question.classのリストを持つQuestionBankを作成.

QuestionBank.swift
import Foundation

class QuestionBank {

    var list = [Question]()

    init() {
        let newQuestion = Question(text: "日本の首都は東京である.", correctAnswer: true)
        list.append(newQuestion)

        list.append(Question(text: "A slug\'s blood is green.", correctAnswer: true))
    }
}

Controller

ここでは,Modelで作られたデータをViewに反映させたり,
Buttonが押されるなどのアクションを検知して処理をするという部分を実装している.

ViewController.swift
import UIKit

class ViewController: UIViewController {

    //Place your instance variables here
    let allQuestion = QuestionBank()
    var pickedAnswer: Bool = false
    var nowQuestionIndex: Int = 0
    var score:Int = 0

    @IBOutlet weak var questionLabel: UILabel!
    @IBOutlet weak var scoreLabel: UILabel!
    @IBOutlet var progressBar: UIView!
    @IBOutlet weak var progressLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        nextQuestion()
    }


    @IBAction func answerPressed(_ sender: AnyObject) {
        if sender.tag == 1 {
            pickedAnswer = true
        }
        else if sender.tag == 2 {
            pickedAnswer = false
        }

        checkAnswer()

        nowQuestionIndex += 1

        nextQuestion()
    }


    func updateUI() {
        scoreLabel.text = "score: \(score)"
        progressLabel.text = "\(nowQuestionIndex + 1) / 14"
        progressBar.frame.size.width = (view.frame.size.width / 14) * CGFloat(nowQuestionIndex + 1)
    }


    func nextQuestion() {

        if nowQuestionIndex <= 13 {
            questionLabel.text = allQuestion.list[nowQuestionIndex].questionText

            updateUI()
        }
        else {
            let alert = UIAlertController(title: "Awesome", message: "You've finished all the question, do you want to restart question?", preferredStyle: .alert)

            let restartAction = UIAlertAction(title: "Restart", style: .default) { (UIAlertAction) in
                self.startOver()
            }
            alert.addAction(restartAction)

            self.present(alert, animated: true, completion: nil)
        }

    }


    func checkAnswer() {
        let correctAnser = allQuestion.list[nowQuestionIndex].answer

        if correctAnser == pickedAnswer {
            ProgressHUD.showSuccess("Corredt!")
            score += 1
        }else {
            ProgressHUD.showError("Wrong")
        }
    }


    func startOver() {
        nowQuestionIndex = 0
        score = 0
        nextQuestion()
    }



}

まとめ

今回伝えたかったことは,

MVCはレストランに例えるとわかりやすいんじゃないかなーということ

簡単なクイズアプリでMVCモデル開発を感じれましたーということ

最後に調べてて感じたことは,
MVCモデルにこれが絶対という正解はないんじゃねってことでした.

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした