![](https://blog.erkennt.co.jp/wp-content/themes/cocoon-master/images/ojisan.png)
最近は色々なアーキテクチャがあるよね。
今日は初心に戻って「MVC」を生成AIに聞いてみようかな。
ということで、今回はChatGPTに「MVC」を教えてもらおう
![](https://blog.erkennt.co.jp/wp-content/themes/cocoon-master/images/ojisan.png)
ChatGPTに、次のプロンプトを投げてみよう。
#役割
あなたはプロのシステムエンジニアです。
#タスク
以下の制約条件からMVCについて説明してください。
#制約条件
– プログラミング初心者にも分かりやすい内容にする
![ChatGPT](http://blog.erkennt.co.jp/wp-content/uploads/2024/05/chatgpt.png)
MVCとは?
MVCは、ソフトウェアの設計パターンの一つで、「Model-View-Controller」の略です。このパターンは、アプリケーションを以下の3つの部分に分けることで、コードの整理や保守をしやすくします。
- Model(モデル)
- View(ビュー)
- Controller(コントローラー)
1. Model(モデル)
Modelは、アプリケーションのデータやビジネスロジックを管理する部分です。例えば、ユーザー情報や商品のデータなどを扱います。
- 役割: データの保存、取得、更新を行う
- 例: データベースの情報を扱うクラス
2. View(ビュー)
Viewは、ユーザーに表示される画面やインターフェース部分です。ユーザーが見て触れる部分です。
- 役割: データを見やすく表示する
- 例: Webページ、アプリの画面、ボタンやフォーム
3. Controller(コントローラー)
Controllerは、ユーザーからの入力を受け取り、適切なモデルやビューに指示を出す部分です。ビューとモデルの仲介役を担います。
- 役割: ユーザーの入力を処理し、モデルとビューを連携させる
- 例: ユーザーがボタンをクリックした時の動作を決めるクラス
![](https://blog.erkennt.co.jp/wp-content/themes/cocoon-master/images/ojisan.png)
コードを役割ごとに分けることができるから、開発や保守がしやすくなるし、ビューやデータの部分を独立して変更できることがメリットなのかな。
それぞれの役割はわかったけど、どういうフローで呼び分けられるのかな。
![ChatGPT](http://blog.erkennt.co.jp/wp-content/uploads/2024/05/chatgpt.png)
MVCの流れ
- ユーザーが操作: ユーザーがボタンをクリックするなどの操作を行います。
- Controllerが受け取る: その操作がControllerに伝わります。
- ControllerがModelを操作: Controllerは必要なデータをModelから取得します。
- Modelがデータを提供: Modelはデータベースから必要なデータを取り出します。
- ControllerがViewにデータを渡す: Controllerは取得したデータをViewに渡します。
- Viewがユーザーに表示: Viewはそのデータをユーザーに見やすく表示します。
![](https://blog.erkennt.co.jp/wp-content/themes/cocoon-master/images/ojisan.png)
なるほど。
ユーザの操作が、ビューからコントローラーに伝わり、コントローラーがモデルに指示を出して、最終的にビューがユーザーに結果を表示するんだね。
大枠のフローはわかったけど、もっとイメージできるように具体例を示してもらえるかな。
![ChatGPT](http://blog.erkennt.co.jp/wp-content/uploads/2024/05/chatgpt.png)
具体例
たとえば、ブログのアプリを考えてみましょう。
- ユーザーが新しい記事を投稿したい(入力)
- ユーザーが「投稿」ボタンをクリック(View)
- Controllerがその操作を受け取り、記事の内容をModelに渡して保存を指示(Controller)
- Modelがデータベースに記事を保存(Model)
- Controllerが保存後の状態をViewに伝える(Controller)
- Viewが「投稿が完了しました」と表示(View)
![](https://blog.erkennt.co.jp/wp-content/themes/cocoon-master/images/ojisan.png)
ありがとう。
具体例があると、理解も進むね。
![](https://blog.erkennt.co.jp/wp-content/themes/cocoon-master/images/ojisan.png)
気をつけないといけないのは、MVCの役割を無視してしまった時、色々な問題を生んでしまうことかな。
例えば、モデルの役割を無視してデータ処理をビューに書いてしまうと、単純なデザイン変更ができなくなっちゃうよね。デザイナーがビューを変更したいのに、ロジックを考慮しなければならないから。
それぞれの役割を意識して、実装すべきところに実装することを心がけよう。
コメント