VMCって何のこと？

ナ：円先生、おはようございます！

　　今日は何について教えてくれるんですか？

円：今日は、Webページを作る上に大切な「VMC」について学んでいくよ！

　　「VMC」が理解できれば、ナオキくんもWebページがどうやって動いているかが理解できるようになるんだ！

ナ：楽しみだなあ！円先生よろしくお願いします！

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

【人物紹介】

ナオキくん

エンジニアを目指して、プログラミングを勉強しているフリーター。

仕事辞めてるから、こう見えても熱意はあるよ！

円　字似亜（えん　じにあ）先生

ナオキくんにプログラミングの知識を教えてあげている優しい先生

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

円：早速だけどナオキくん、Twitterっていうアプリがどうやって動いているか知ってる？

ナ：えーっと、僕がツイートしたらアプリを管理しているどっかのサーバーみたいなところに情報が飛んで、そのサーバーが色々やってくれて、タイムライン上に表示される感じですか、、？

円：うん！大枠はあっているね！

　　ナオキくんがツイートをすると、その情報が世界中のどこかにあるTwitterのサーバーに送信される。

　　そして、そのサーバーが情報を処理して、ナオキくんの見ているスマホに結果を返してくれているんだ。

　　今日学ぶ「VMC」とは、そのTwitterのサーバ上での処理の流れのことなんだ！

ナ：「VBCはサーバー側の処理の流れ」ですね！

　　ちなみにそのVMCって、何かの略称なんですか？

円：うん！VBCとは

　　V ＝　ビュー

　　M ＝　モデル

   　C ＝コントローラー

　　の略称なんだ。これからそれぞれの役割について学んでいこう！

コントローラー

円：まずはコントローラーから理解していこう！

　　順番が変わっちゃうけど、サーバー側の処理の中では最初に始まるから、ここから抑えていこう！

　　例えばナオキくんからツイートの情報が送られてきた時に、サーバー側では最初にどんな処理が行われると思う？

ナ：えっと、、まずは送られてきた情報がどんなものなのかを整理することですかね？

　　それがわからないと、どんな処理をサーバーですればいいか分からないし、、

円：素晴らしい！

　　今ナオキくんが言ってくれたのは「ルーティング」という工程だね！

　　ナオキくんから送られてきた情報に対して、サーバー内のどの場所を使って、どんな返答をするのか、またその返答にはどんなデータが必要なのかを決めてあげるのがルーティングなんだ！

　　コントローラーは、このルーティングからの指示を受け取って、サーバー内で処理をしてナオキくんに結果を返すところまでをやってくれる役割のことなんだ！

ナ：「サーバー内での処理の手順を決める」のがルーティングで、「手順に沿って処理を進め、ユーザーに結果を返す」のがコントローラーの役割なんですね！なるほど！

モデル

円：続いて「モデル」！これはユーザーへの返信に必要なデータをコントローラーに渡す役割を持つものなんだ！

ナ：必要なデータですか、、？

円：そう！

　　例えば、Twitterで他の人のアカウントを見たい時に、その人のアカウント情報が必要になるよね？

　　その時にこのモデルが、アカウント情報を取り出してコントローラーに渡して僕たちに情報を返してくれるんだ！

ナ：ユーザーが要求しているデータを管理して、コントローラーに渡してくれるのがモデルの役割なんだね！

ビュー

円：最後に「ビュー」！

　　これは「ユーザーに返す見た目を整える」役割を持つんだ！

　　ナオキくんがよく見ているTwitterの画面も、このビューが僕たちに見やすいような表示に変えてくれているから、とても使いやすくなっているんだね！

ナ：僕たちがよく見ている画面ってビューが作ってくれているものなんだ！

　　ビュー、いつもありがとう！

まとめ

・VMCは、アプリのサーバー側の処理の流れのこと。「View（ビュー）」「Model（モデル）」「Controller（コントローラー）」の略称

・コントローラーは、ユーザーから送られてきた情報を、決められた手順に沿って処理した結果を返す役割。

・モデルは、アプリ上のデータを管理する役割

・ビューは、ユーザーが見るページの見た目を作る役割

円：以上が今日のまとめだよ！

　　VMCをマスターして、アプリの動く仕組みを正しく理解していこう！

ナ：円先生、ありがとうございました！