🏁 はじめに
前回（第1章：MVCの仕組みをざっくり理解する）では、
ASP.NET Core MVCの構造や、Controller・View・Modelの役割を学びました。
今回はいよいよ、実際にプロジェクトを作って動かすところまでやります。
最初に「Hello, ASP.NET!」が表示された瞬間、ちょっと感動しますよ😆
💻 開発環境
- Visual Studio 2022
- .NET 8
- テンプレート：ASP.NET Core Web App（Model-View-Controller）
- OS：Windows 10 / 11
💡 Macの方は Visual Studio for Mac や RiderでもOKですが、画面は少し異なります。
🧩 Step 1：プロジェクトを作成
- Visual Studio を起動
- 「新しいプロジェクトの作成」 → 「ASP.NET Core Web App (Model-View-Controller)」を選択
- 名前を入力（例：
MyFirstAspNetApp） - .NETバージョンを
.NET 8.0に設定 - 「認証」は「なし」でOK
- 「作成」をクリック！
📁 プロジェクト構成が自動生成される
作成するとこんなフォルダ構成になります👇
MyFirstAspNetApp/
├── Controllers/
│ └── HomeController.cs
├── Models/
├── Views/
│ ├── Home/
│ │ └── Index.cshtml
│ └── Shared/
│ └── _Layout.cshtml
├── wwwroot/
├── appsettings.json
└── Program.cs
💡 この構成こそが MVCモデルの実装形 です。
Controller が処理を行い、View がHTMLを描画します。
⚙️ Step 2：HomeControllerのコードを見てみる
Controllers/HomeController.cs を開くと、最初からこうなっています👇
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
つまり：
/Home/Index にアクセスされたら、
Views/Home/Index.cshtml を返す、という仕組み。
🧾 Step 3：View（Index.cshtml）を確認
Views/Home/Index.cshtml には、最初からHTMLテンプレートが入っています👇
@{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about building Web apps with ASP.NET Core.</p>
</div>
これがブラウザで表示される内容です。
▶ Step 4：実行してみる！
Visual Studio上部の「▶（実行）」ボタンを押します。
しばらくするとブラウザが開いて、
次のような画面が表示されるはず👇
Welcome
Learn about building Web apps with ASP.NET Core.
🎉 これでWebサーバーが動きました！
🌐 Step 5：URLとControllerの関係を確認
アドレスバーを見てみましょう👇
https://localhost:7203/Home/Index
このURLは
「HomeControllerのIndex()メソッドを呼び出す」
という意味です。
| URLパーツ | 対応先 | 備考 |
|---|---|---|
/Home |
HomeController |
Controller名（末尾の“Controller”は省略） |
/Index |
Index() |
メソッド名（＝Action） |
もし /Home/About にアクセスすれば、
HomeController.About() が呼ばれます。
💬 Step 6：自分でメッセージを変えてみる
Index() の中に一行追加してみます👇
public IActionResult Index()
{
ViewData["Message"] = "こんにちは、ASP.NET！";
return View();
}
そして Views/Home/Index.cshtml に追記：
<h2>@ViewData["Message"]</h2>
もう一度実行！
こんにちは、ASP.NET！
が表示されれば成功です🎉
🧠 補足：なぜViewDataが使えるのか？
ViewData は ControllerとViewの間で
データを受け渡すための 辞書（Dictionary） です。
ViewData["Message"] = "Hello";
とControllerで設定すると、
@ViewData["Message"] でHTML側に表示できます。
⚙️ Step 7：ルート設定の確認
ルーティング（URL → Controller の対応）は
Program.cs のこの部分で決まっています👇
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
つまり：
- URLが空なら →
HomeController.Index()が呼ばれる -
/Hoge/Huga/5→HogeController.Huga(id=5)を呼び出す
🔍 Step 8：HTMLの生成を確認してみる
ブラウザで「右クリック → ページのソースを表示」を開くと、
HTMLがこうなっています👇
<h2>こんにちは、ASP.NET！</h2>
ここにC#のコードは残っていません。
つまり、サーバー側でC#が実行され、HTMLだけが返されている ということ。
💡 ASP.NET MVCは、C#を使って動的にHTMLを生成する仕組みです。
🧩 Step 9：_Layout.cshtml の存在を知る
全ページ共通のHTML構造（ヘッダー、フッターなど）は
Views/Shared/_Layout.cshtml に書かれています。
<body>
<header> ... </header>
<main role="main" class="pb-3">
@RenderBody() <!-- 各ページの中身がここに入る -->
</main>
<footer> ... </footer>
</body>
つまり、Index.cshtml はこの中の一部（RenderBody部分）に差し込まれて表示されています。
✅ ここまでで学べたこと
| 学び | 内容 |
|---|---|
| プロジェクト作成 | MVCテンプレートで自動生成される構造を理解 |
| Controller | URLの呼び出し口（処理を実行） |
| View | HTMLを生成するテンプレート |
| ViewData | Controller → View のデータ受け渡し |
| Routing |
/Controller/Action/{id?} の仕組み |
| Layout | 共通デザイン（ヘッダー・フッター）を定義するファイル |
💬 学んでみた感想
- WPFと違って「URLアクセスがイベントトリガ」になるのが新鮮だった
- 最初からMVC構成ができてるので、どこを触るか分かりやすい
- ViewDataの仕組みでC#とHTMLが自然に繋がるのが面白い
「Hello, ASP.NET!」が出た瞬間に、Webアプリの裏側の仕組みが一気にイメージできました。