おっさんが「MVC」を教えてもらう話

最近は色々なアーキテクチャがあるよね。

今日は初心に戻って「MVC」を生成AIに聞いてみようかな。

ということで、今回はChatGPTに「MVC」を教えてもらおう

ChatGPTに、次のプロンプトを投げてみよう。

 

#役割
あなたはプロのシステムエンジニアです。

#タスク
以下の制約条件からMVCについて説明してください。

#制約条件
– プログラミング初心者にも分かりやすい内容にする

ChatGPT
ChatGPT

MVCとは?

MVCは、ソフトウェアの設計パターンの一つで、「Model-View-Controller」の略です。このパターンは、アプリケーションを以下の3つの部分に分けることで、コードの整理や保守をしやすくします。

  1. Model(モデル)
  2. View(ビュー)
  3. Controller(コントローラー)

1. Model(モデル)

Modelは、アプリケーションのデータやビジネスロジックを管理する部分です。例えば、ユーザー情報や商品のデータなどを扱います。

  • 役割: データの保存、取得、更新を行う
  • : データベースの情報を扱うクラス

2. View(ビュー)

Viewは、ユーザーに表示される画面やインターフェース部分です。ユーザーが見て触れる部分です。

  • 役割: データを見やすく表示する
  • : Webページ、アプリの画面、ボタンやフォーム

3. Controller(コントローラー)

Controllerは、ユーザーからの入力を受け取り、適切なモデルやビューに指示を出す部分です。ビューとモデルの仲介役を担います。

  • 役割: ユーザーの入力を処理し、モデルとビューを連携させる
  • : ユーザーがボタンをクリックした時の動作を決めるクラス

コードを役割ごとに分けることができるから、開発や保守がしやすくなるし、ビューやデータの部分を独立して変更できることがメリットなのかな。

 

それぞれの役割はわかったけど、どういうフローで呼び分けられるのかな。

 

ChatGPT
ChatGPT

MVCの流れ

  1. ユーザーが操作: ユーザーがボタンをクリックするなどの操作を行います。
  2. Controllerが受け取る: その操作がControllerに伝わります。
  3. ControllerがModelを操作: Controllerは必要なデータをModelから取得します。
  4. Modelがデータを提供: Modelはデータベースから必要なデータを取り出します。
  5. ControllerがViewにデータを渡す: Controllerは取得したデータをViewに渡します。
  6. Viewがユーザーに表示: Viewはそのデータをユーザーに見やすく表示します。

なるほど。

ユーザの操作が、ビューからコントローラーに伝わり、コントローラーがモデルに指示を出して、最終的にビューがユーザーに結果を表示するんだね。

 

大枠のフローはわかったけど、もっとイメージできるように具体例を示してもらえるかな。

ChatGPT
ChatGPT

具体例

たとえば、ブログのアプリを考えてみましょう。

  • ユーザーが新しい記事を投稿したい(入力)
    1. ユーザーが「投稿」ボタンをクリック(View)
    2. Controllerがその操作を受け取り、記事の内容をModelに渡して保存を指示(Controller)
    3. Modelがデータベースに記事を保存(Model)
    4. Controllerが保存後の状態をViewに伝える(Controller)
    5. Viewが「投稿が完了しました」と表示(View)

ありがとう。

具体例があると、理解も進むね。

気をつけないといけないのは、MVCの役割を無視してしまった時、色々な問題を生んでしまうことかな。

例えば、モデルの役割を無視してデータ処理をビューに書いてしまうと、単純なデザイン変更ができなくなっちゃうよね。デザイナーがビューを変更したいのに、ロジックを考慮しなければならないから。

それぞれの役割を意識して、実装すべきところに実装することを心がけよう。

 

コメント

タイトルとURLをコピーしました