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

生徒

「先生、ASP.NET MVCで画面を作るとき、ビューってよく出てきますけど、具体的には何をするものなんですか？」

先生

「ビューは、利用者に見せる画面部分を担当する役割です。HTMLをベースにして、Razorという仕組みを使って動的にデータを表示できます。」

生徒

「Razorって難しそうですね…。初心者でも理解できるんでしょうか？」

先生

「安心してください。Razorはシンプルな書き方で、C#のコードをHTMLの中に埋め込める仕組みです。順を追って解説すれば誰でも使えるようになりますよ。」

生徒

「それなら安心です！ぜひ基本の使い方を教えてください！」

先生

「それでは、ASP.NET MVCでビュー（Razor）を使った画面表示の基本を学んでいきましょう。」

1. ビュー（Razor）とは？

ビューは、ASP.NET MVCにおいて利用者に見せる画面部分です。通常のHTMLだけでは静的なページしか作れませんが、Razor構文を使うことで、コントローラーから受け取ったデータを埋め込み、動的に画面を生成できます。

例えば、学校の掲示板に「試験結果」が貼られるイメージです。単なる紙（HTML）では固定ですが、先生が新しい結果（コントローラーから渡されたデータ）を毎回書き込むことで、最新の情報を表示できるのです。

2. Razor構文の基本

Razor構文では、C#コードをHTMLの中に埋め込むときに@を使います。とても直感的でシンプルなので、初心者でも扱いやすい仕組みです。


<h2>Razorの基本例</h2>
@{
    var message = "こんにちは、ASP.NET MVCの世界へようこそ！";
}
<p>@message</p>

この例では、C#の変数messageを定義し、それをHTMLの中に埋め込んで表示しています。実際の出力結果は次のようになります。


こんにちは、ASP.NET MVCの世界へようこそ！

3. コントローラーからデータを渡してビューで表示する

Razorの強みは、コントローラーから渡されたデータを画面に表示できることです。まずコントローラーでデータを準備します。


using System.Web.Mvc;

namespace MvcSample.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "これはコントローラーから渡されたメッセージです。";
            return View();
        }
    }
}

次にビュー側で受け取ったデータを表示します。


<h2>コントローラーからのデータ表示</h2>
<p>@ViewBag.Message</p>

実行すると、次のように表示されます。


これはコントローラーから渡されたメッセージです。

4. 繰り返し処理を使ったリスト表示

Razorでは@foreachを使って繰り返し処理もできます。例えば、コントローラーから複数の名前を渡して、ビューで一覧表示できます。


public ActionResult StudentList()
{
    var students = new List<string> { "太郎", "花子", "次郎" };
    ViewBag.Students = students;
    return View();
}


<h2>生徒一覧</h2>
<ul>
@foreach (var name in ViewBag.Students)
{
    <li>@name</li>
}
</ul>

出力結果は次のようになります。


太郎
花子
次郎

5. 条件分岐を使った表示

Razorでは@ifを使って条件分岐も可能です。例えば点数によって合否を表示する例を見てみましょう。


@{
    int score = 85;
}
<p>点数：@score</p>
@if (score >= 80)
{
    <p>合格です！</p>
}
else
{
    <p>残念、不合格です。</p>
}

このように、C#の条件分岐をそのままHTMLに埋め込めるのがRazorの特徴です。

6. 初心者が理解しておくべきポイント

初心者の方がつまずきやすいのは「HTMLとC#コードが同じファイルに混在すること」です。しかし、Razor構文では@を目印にすることで簡単に区別できます。これに慣れれば、データを画面に反映する仕組みがぐっと理解しやすくなります。

また、Razorを使うときは「データの準備はコントローラー」「表示はビュー」という役割分担を意識すると混乱しにくくなります。学校で先生が答案を採点して（コントローラー）、掲示板に結果を貼る（ビュー）イメージで考えると理解しやすいでしょう。

まとめ

ASP.NET MVCでビュー（Razor）を使った画面表示の仕組みは、初心者にとって最初は少し複雑に見える部分ですが、実際には非常に直感的で扱いやすい構造になっています。とくにRazor構文は、HTMLの中にC#コードをシンプルに埋め込めるため、動的な画面生成を理解するうえで欠かせない技術です。ビューは利用者に見える最終的な画面を担当しており、コントローラーから受け取ったデータを柔軟に表示できる点が大きな特徴です。これはWebアプリケーション開発において重要な役割であり、Razorを理解することはASP.NET MVC全体の理解につながる非常に大切なステップとなります。また、Razor構文を使うことで、条件分岐や繰り返し処理などの基本的なC#の仕組みをビュー内で自然に活用できます。たとえばリストデータを一覧表示するコードや、点数によって合否を変える条件分岐などは、実際のWeb画面でも頻繁に利用されるパターンです。こうした基本的な処理をスムーズに書けるようになると、画面の動きやユーザーへの表示内容を柔軟にコントロールできるようになり、開発の幅が大きく広がっていきます。Razorの書き方に慣れてくると、HTMLとC#コードが同じファイルにあっても混乱せずに読み書きできるようになります。さらに、ASP.NET MVCではコントローラーとビューの役割が明確に分かれているため、「データの準備はコントローラー」「表示はビュー」という流れを理解することで、アプリケーション全体の構造がつかみやすくなります。これは大規模なシステムでも小さな個人のアプリでも同じ考え方で応用できるため、一度身につけてしまうと長く役立つ知識になります。Razorを使ったビュー作成の基礎が身につけば、次の段階としてレイアウトページの利用や部分ビューの活用など、より高度な画面設計へとスムーズに進むことができます。以下のサンプルコードは、記事で解説したRazorの仕組みを応用しながら、条件分岐とメッセージ表示の流れを確認できる簡単な例です。実際にVisual Studioで試して動作を確認することで、理解がより深まり、画面表示の仕組みが自然と身につくようになります。

サンプルプログラム


@{
    int number = 3;
    string result = number % 2 == 0 ? "偶数です。" : "奇数です。";
}
<h3>数値判定サンプル</h3>
<p>入力された値：@number</p>
<p>判定結果：@result</p>

このようにRazorでは、HTML画面の中で柔軟にC#コードを扱えるため、データに応じた動的な表示が簡単に実現できます。動きのあるWebページや、ユーザー入力をもとに結果を変える画面設計など、より実践的な開発にもつながる内容です。ビューとコントローラーの役割を意識しながらRazorを理解すれば、さまざまなASP.NET MVCアプリケーションで応用できる基礎力をしっかりと身につけられます。初めて学ぶときは戸惑うポイントもありますが、操作を重ねることで自然と慣れていき、動的な画面表示の仕組みを楽しみながら理解できるようになります。また、繰り返し処理や条件分岐など、C#で覚えた基本構文をそのまま画面表示に活かせるため、プログラム全体の動きを把握しやすくなります。ビューでの表現力が高まると、ユーザーに伝えたい情報を見やすく整理して表示できるようになり、より完成度の高いWebアプリケーションの構築につながります。ASP.NET MVCでビューを扱う力は、今後の開発工程や機能拡張においても非常に重要な能力です。

先生と生徒の振り返り会話

生徒

「ビューとRazorの仕組みがよくわかりました！HTMLにC#コードを混ぜても意外と読みやすくて驚きました。」

先生

「そうですね。慣れるとRazorの書き方はとても扱いやすく、動的な画面作成には欠かせない技術なんですよ。」

生徒

「コントローラーでデータを準備して、ビューで表示する流れも理解できました。繰り返し処理や条件分岐も使えるんですね。」

先生

「そのとおりです。Razorの基本がわかれば、一覧画面や詳細画面など、実用的なページがたくさん作れるようになりますよ。」

生徒

「次はレイアウトページや部分ビューなども学んでみたいです。Razorが使えると画面作成がもっと楽しくなりますね！」