先生と生徒の会話形式で理解しよう

生徒

「ホームページやWebアプリケーションを作ってみたいのですが、C#という言葉をよく耳にします。C#でWebアプリを作るにはどうすればいいのですか？」

先生

「C#を使ってWebアプリを作る場合、ASP.NET Coreという仕組みの中にあるMVCパターンという設計図を使うのが一般的です。これを使うと、役割ごとにプログラムを綺麗に分けて開発することができます。」

生徒

「MVCパターンですか？難しそうな名前ですね。パソコンをあまり触ったことがない私でも理解できるでしょうか？」

先生

「大丈夫ですよ。身近なお店の仕組みに例えながら、基本的な仕組みから画面が表示される流れまで、一つずつ丁寧に解説していきますね。」

1. C#によるWebアプリ開発とASP.NET Coreとは？

日常的にスマートフォンのアプリやパソコンのブラウザで見ているホームページは、世界中にあるサーバーという大きなコンピューターから送られてくるデータによって表示されています。プログラミング言語のC#（シーシャープ）を使うと、このようなWebアプリケーションの裏側で動く仕組みを強力かつ安全に作ることができます。

しかし、C#だけで一からすべての仕組みを構築するのは、家を柱の一本から手作りするようなもので非常に大変です。そこで登場するのがASP.NET Core（エーエスピードットネットコア）という仕組みです。これは、マイクロソフトという会社が提供している、Webアプリ開発に必要な共通の部品や土台をまとめた便利な道具箱のようなものです。この道具箱があるおかげで、世界中のエンジニアが効率よく安全なシステムを構築できるようになっています。

2. MVCパターンの基本概念とそれぞれの役割

Webアプリ開発を進める上で、プログラムが複雑になって迷子にならないようにするための素晴らしい設計図があります。それがMVC（エムブイシー）パターンです。MVCとは、プログラムの役割を「M」「V」「C」という3つの文字の頭文字に分けて整理する考え方です。パソコンの操作に慣れていない方でもイメージしやすいように、この3つの役割を「大人気のレストラン」に例えて解説します。

レストランには、料理を注文するお客さん、注文を受け付ける接客係、厨房で料理を作る料理人、そして盛り付けられた料理が載っているお皿があります。プログラミングの世界でも、これらと同じような役割分担を行うことで、効率よく綺麗なシステムを作ることができます。まずはそれぞれの単語の意味を詳しく見ていきましょう。

M：モデル（Model）

データの管理や計算を行う、アプリの心臓部です。レストランでいう「見えない厨房の料理人」の役割を果たします。

V：ビュー（View）

画面の見た目やデザインを担当します。レストランでいう「綺麗に盛り付けられた料理とお皿」です。

C：コントローラー（Controller）

全体の案内役です。お客さんからの要求を受け取り、モデルやビューに指示を出す「接客係の店員さん」です。

3. 司令塔となるコントローラーの具体的な働き

まずは、全体の橋渡し役であるコントローラー（Controller）から詳しく解説します。ユーザーがブラウザで特定のボタンをクリックしたり、文字を入力して検索をしたりすると、その要求は最初にコントローラーへ届きます。

コントローラーの役割は、ユーザーが何をしたいのかを判断することです。「画面を表示してほしい」と言われたら画面の部品を準備し、「データを保存してほしい」と言われたら計算担当のモデルに処理を依頼します。自分自身では難しい計算をせず、あくまで適切な担当者に仕事を振り分ける案内役、あるいは指揮者のような存在です。これにより、プログラムの全体の流れがすっきりと整理されます。

それでは、C#で書かれた最もシンプルなコントローラーのプログラムを見てみましょう。このコードは、挨拶の画面を表示するための準備を行う案内役の処理です。


using Microsoft.AspNetCore.Mvc;

public class HomeController : Controller
{
    public IActionResult Index()
    {
        ViewBag.Message = "ようこそ、初めてのWebアプリへ！";
        return View();
    }
}

このプログラムの中にあるHomeControllerというのが、案内役の名前です。Indexという部屋にユーザーがアクセスしてきたときに、歓迎のメッセージを用意して、画面を表示する準備をしています。プログラムの実行結果として、この案内役が正常に動作すると、次のような画面表示の命令が内部で組み立てられます。


ステータス：200 OK（正常に案内が完了しました）
転送先：Index画面の表示処理へ進みます

4. データの処理と計算を担うモデルの仕組み

次に、アプリの知能となるモデル（Model）について説明します。モデルは、画面の見た目やボタンの配置といったデザインのことは一切気にしません。ひたすら「データの計算」「情報の管理」「データベースへの保存」といった、裏方の重要業務に集中します。

例えば、お買い物サイトで商品の金額を計算したり、消費税を計算したり、会員登録された名前やパスワードが正しいかをチェックしたりするのはすべてモデルの仕事です。デザインと計算を切り離して、モデルとして独立させることで、もし画面のデザインが大幅に変更されても、大切な計算ロジックが壊れる心配がなくなります。

ここでは、商品の情報を表現するシンプルなモデルのプログラムを作成してみましょう。商品名と価格、そして税込みの金額を計算する仕組みを持っています。


public class ProductModel
{
    public string Name { get; set; }
    public int Price { get; set; }

    public int GetTaxPrice()
    {
        double taxRate = 1.10;
        return (int)(Price * taxRate);
    }
}

このコードでは、商品の名前を保持するNameと、価格を保持するPriceという箱を用意しています。さらに、GetTaxPriceという仕組みを呼び出すことで、価格に10パーセントの消費税を加えた金額を自動的に計算して戻してくれます。このモデルをコントローラーが呼び出して利用します。例えば、価格を1000円に設定した場合のモデルの内部計算結果は以下のようになります。


設定された商品価格：1000円
消費税込みの計算結果：1100円

5. 画面の見た目を作るビューとHTMLの基礎

3つ目の要素であるビュー（View）は、ユーザーが実際に目にする画面そのものです。コントローラーが用意したデータを受け取り、それをブラウザが解釈できる言葉であるHTMLの形式に組み立てて出力します。

ASP.NET Coreでは、通常のHTMLのなかに、C#のプログラムの変数を埋め込むことができるRazor（レイザー）という拡張機能が使われます。これにより、ユーザーの名前によって「こんにちは、〇〇さん！」と画面の文字を動的に書き換えることが可能になります。デザイン部分をビューとして完全に独立させることで、Webデザイナーが画面を綺麗に装飾する作業と、エンジニアがプログラムを書く作業を同時に進めることができるという大きなメリットがあります。

それでは、ビューの具体的な記述例を見てみましょう。コントローラーから受け取ったデータや、先ほどのモデルの情報を画面に表示するHTMLのプログラムです。


<div class="p-4 bg-light rounded shadow-sm">
    <h2 class="text-primary">商品情報のご案内</h2>
    <p class="fs-5">おすすめの商品：<strong>@Model.Name</strong></p>
    <p class="fs-6">お値段：@Model.Price 円（税込：@Model.GetTaxPrice() 円）</p>
</div>

コードの中にある@Model.Nameや@Model.GetTaxPrice()という部分が、C#のプログラムと連携している場所です。文字の前にアットマークを付けることで、ビューの画面の中にモデルの計算結果を直接はめ込むことができます。ブラウザによってこのファイルが読み込まれると、最終的にユーザーの画面には以下のような文字とデザインが綺麗に表示されることになります。


商品情報のご案内
おすすめの商品：高級リンゴ
お値段：1000 円（税込：1100 円）

6. リクエストとレスポンスによる画面表示の流れ

Webアプリが動くとき、インターネットの裏側ではリクエスト（要求）とレスポンス（応答）という情報のキャッチボールが常に行われています。ユーザーがブラウザでURLを入力したりリンクをクリックしたりすることがリクエストであり、サーバーが画面のデータを送り返すことがレスポンスです。

ASP.NET Core MVCのアプリでは、このキャッチボールが以下のような決まった順番で行われます。この一連の流れを理解することが、Webアプリ開発の全体像を掴むための最大の近道です。

ユーザーがブラウザでページを閲覧する操作を行う（リクエスト送信）
コントローラー（C）がその要求を真っ先に受け取り、内容を分析する
コントローラーが必要に応じてモデル（M）を呼び出し、データの計算や取得を行う
モデルが計算した結果を、コントローラーが引き取る
コントローラーがそのデータをビュー（V）に渡し、画面の組み立てを指示する
ビューが完成した綺麗なHTML画面をブラウザに送り返す（レスポンス返却）

この一連のチームワークにより、私たちが普段何気なく見ている動的なWebページが瞬時に作られています。誰か一人が欠けてもWebアプリは正しく動きません。それぞれのパーツが自分の持ち場に集中するからこそ、高速で安全な処理が実現できるのです。

7. ルーティングの仕組みとURLの決定方法

インターネットでページを移動するときに、ブラウザの上部に表示される「https://example.com/Home/Index」といった文字をURLと呼びます。Webアプリでは、このURLを見て「どのコントローラーの、どの処理を呼び出すか」を決める仕組みが必要になります。この案内図の仕組みをルーティングと呼びます。

ASP.NET Core MVCでは、標準のルールとして「コントローラーの名前 / メソッドの名前」という形式でURLが自動的に割り当てられる設定になっています。例えば、ProductControllerというコントローラーの中に、Detailという処理が書かれていれば、ユーザーが「/Product/Detail」というURLにアクセスしたときに、その処理が自動的に実行されます。このルールのおかげで、開発者は迷うことなくURLとプログラムを関連付けることができます。

それでは、実際のルーティングのイメージをより深めるために、ユーザーが特定の商品IDを指定してアクセスしてきた場合の、簡単なコントローラーのコードを見てみましょう。


using Microsoft.AspNetCore.Mvc;

public class ShopController : Controller
{
    public IActionResult Item(int id)
    {
        ViewBag.ItemId = id;
        return View();
    }
}

このプログラムは、URLが「/Shop/Item/5」のようにアクセスされたときに動き出します。最後の「5」という数字が、プログラムのint idという部分に自動的に放り込まれます。これによって、何番の商品が求められているかをプログラムが正確に判別できるようになります。この処理が実行されたときの、内部でのURL解析結果は以下のようになります。


解析されたコントローラー：ShopController
呼び出されたアクション：Item
受け取った識別番号（id）：5

8. MVCパターンを使って開発する圧倒的なメリット

なぜ世界中の多くのWebシステムで、このMVCパターンという少し面倒に思える仕組みが導入されているのでしょうか。それは、大規模な開発になればなるほど、プログラムを役割ごとに分離しておく恩恵が莫大になるからです。もし、1つのファイルの中にデザインのコード、計算のコード、データベースのコードがすべて混ざって書かれていたら、一部分を修正しただけで全く関係のない場所が動かなくなってしまうといった不具合が発生します。

MVCパターンを徹底していれば、画面のボタンの色を赤色から青色に変えたいときは、ビューのファイルだけを直せば安全に変更できます。また、消費税の計算方法が変わったときは、モデルのファイルだけを修正すればよく、画面のデザインを傷つけることはありません。このように、プログラムの変更や修正が圧倒的に楽になり、複数人のチームで手分けして同時に開発が進められるようになることが、MVCパターンを採用する最大の理由です。