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

生徒

「C#を使ってホームページやWebアプリを作ってみたいのですが、画面を簡単に作る仕組みはありますか？」

先生

「それなら、ASP.NET Coreという技術に含まれている『Razorページ（レイザーページ）』という仕組みがぴったりですよ。」

生徒

「レイザーページですか？パソコンをあまり触ったことがない私でも、画面の文字を変えたり、プログラムの計算結果を表示したりできますか？」

先生

「もちろんです。HTMLという画面の見た目を作る言葉の中に、C#のプログラムを少し混ぜるだけで、驚くほど簡単に動くWebページが作れます。それでは、基本的な使い方を順番に見ていきましょう！」

1. Razorページとは？Webアプリの画面を作る仕組み

C#のRazorページ（レイザーページ）とは、マイクロソフト社が提供している、Webアプリケーションの画面を作るための非常に便利な仕組みです。一般的に、インターネットで見ているホームページやWebサイトは、HTML（エイチティーエムエル）という特別な文字の羅列で構成されています。しかし、HTMLだけでは、いつでも誰が見ても同じ静的な画面しか表示できません。

そこで登場するのがRazorページです。最大の特徴は、HTMLのコードの中に、C#というプログラミング言語を直接書き込める点にあります。これにより、アクセスした時刻によって挨拶を変えたり、買い物かごの合計金額を計算して表示したりする、動的なWebアプリケーションを簡単に開発できるようになります。初心者にとっても、画面のデザインとプログラムの関係性が分かりやすいため、最初に学ぶWeb開発の仕組みとして強くおすすめされています。

2. Razor構文の基本と特別な記号の使い方

Razorページの中でC#のプログラムを書くときには、コンピュータに「ここからはC#のプログラムですよ」と教えてあげる必要があります。その合図として使用するのが、半角の「アットマーク（@）」記号です。このルールをRazor構文（レイザーコウブン）と呼びます。

HTMLの文章の中に「@」を書き、その直後にC#の変数名や命令を書くだけで、プログラムの実行結果がそのまま画面のその場所に表示されます。難しい設定をすることなく、文字や数字を画面にはめ込むことができるため、Webアプリ開発のハードルが大きく下がります。プログラミング未経験の方でも、このアットマークの規則さえ覚えれば、すぐにオリジナルの画面を作り始めることができます。

3. 画面に文字や現在時刻を表示する最もシンプルなプログラム

まずは、一番基本となる文字の表示と、現在の時間を画面に出すプログラムを見てみましょう。Razorページでは、ファイルの拡張子が「.cshtml」という形式になります。これは「C#が混ざったHTMLファイル」という意味です。

以下のコードでは、C#が最初から持っている機能を使って、今この瞬間の日付と時刻をWebページ上に表示させています。ファイルの中にこのように記述します。


<div>
    <p>Webアプリの世界へようこそ！</p>
    <p>現在の時刻は @DateTime.Now です。</p>
</div>

このプログラムを実行すると、コンピュータが内部で「@DateTime.Now」の部分を現在の正しい時刻に自動的に書き換えてから、画面を表示してくれます。実際の実行結果は以下のようになります。


Webアプリの世界へようこそ！
現在の時刻は 2026/05/27 23:45:08 です。

このように、ページを開くたびに表示される内容が変わる仕組みを、Web開発では「動的なページの生成」と呼びます。アットマークを一つ付けるだけで、このような高度な仕組みが実現できます。

4. C#の変数を使って計算結果を画面に表示する方法

次に、プログラムの中でデータを一時的に保存しておく箱である「変数（へんすう）」を使った方法を学びましょう。Razorページの中で、複数行のC#プログラムをまとめて書きたいときは、「@」の後に波括弧を付けて「@{ }」というブロックを作ります。この中に入れたプログラムは、画面には直接表示されず、計算や準備のためだけに実行されます。

ここでは、商品の価格と消費税を計算して、その結果を画面のHTMLの中に埋め込むプログラムを作成してみます。


@{
    int price = 1000;
    double taxRate = 0.1;
    double tax = price * taxRate;
    double total = price + tax;
}

<div class="border p-3 m-2">
    <p>商品の価格は @price 円です。</p>
    <p>消費税は @tax 円です。</p>
    <p>合計金額は @total 円になります！</p>
</div>

コード内の「int」は整数を入れる箱の種類、「double」は小数をいれる箱の種類を表す言葉です。これらを箱の型（かた）と呼びます。この計算結果は、以下のように綺麗に整えられて画面に表示されます。


商品の価格は 1000 円です。
消費税は 100 円です。
合計金額は 1100 円になります！

@{ } の中で計算した結果が、下のHTMLの「@price」や「@total」の部分に吸い上げられて表示されているのが分かりますね。これがWebアプリの基本的なデータの扱い方です。

5. 条件によって画面の表示を切り替えるif文の連携

Webアプリを作っていると、「ログインしているときだけログアウトボタンを出す」や「点数によって合格・不合格の文字を切り替える」といった、条件に応じた画面の切り替えが必要になります。これを行うのが条件分岐（じょうけんぶんき）です。C#では「if（イフ）文」を使います。

Razorページの中では、HTMLのタグの目の前に「@if」と書くことで、条件に一致したときだけそのHTMLの部品を画面に出現させることができます。今回は、テストの点数によってお祝いのメッセージを変えるプログラムを見てみましょう。


@{
    int score = 85;
}

<div>
    <p>あなたのテストの結果発表です。</p>
    @if (score >= 80)
    {
        <p class="text-success fw-bold">素晴らしい！合格です！</p>
    }
    else
    {
        <p class="text-danger">残念、不合格です。次は頑張りましょう。</p>
    }
</div>

このプログラムでは、変数「score」の中身が85になっています。「>= 80」というのは「80以上」という意味なので、条件が満たされます。その結果、画面には合格の文字だけが表示され、不合格の文字は跡形もなく消え去ります。


あなたのテストの結果発表です。
素晴らしい！合格です！

もし点数の数値を50に変えて保存し直すと、今度は自動的に「残念、不合格です」という文字に切り替わります。このように状況に合わせて画面変化を作ることができます。

6. 繰り返し処理を使ってリストや表を一気に作る方法

インターネットのショッピングサイトなどで、商品の一覧がずらりと並んでいるのを見たことがあると思います。あれを一つずつ手作業でHTMLで書くのは大変です。プログラムには、同じ作業を自動で繰り返す繰り返し処理（ループ処理）という大得意な機能があります。C#では「foreach（フォーイーチ）文」をよく使います。

Razorページの中で「@foreach」を使うと、データの数だけHTMLの箇条書きや表の行を自動で複製して出力してくれます。今回は、3つの果物の名前が入ったリストを用意し、それを画面に箇条書きで表示させてみます。


@{
    var fruitsList = new List<string> { "りんご", "みかん", "ぶどう" };
}

<div>
    <p>本日の特売フルーツ一覧：</p>
    <ul>
        @foreach (var fruit in fruitsList)
        {
            <li>@fruit</li>
        }
    </ul>
</div>

「List」というのは、文字を複数まとめて入れておくことができる便利な配列のような仕組みです。foreach文が、その中から果物を一つずつ取り出して「fruit」という変数に入れ、中身がなくなるまで「<li>」という箇条書きのHTMLタグを繰り返し作ってくれます。実行結果は以下のようになります。


本日の特売フルーツ一覧：
・りんご
・みかん
・ぶどう

データが100個に増えても、プログラムのコードはこの数行のままで良いため、大量のデータを扱うWebアプリでは欠かせない非常に強力な仕組みです。

7. ページモデルと役割分担を理解する初歩

少しだけ本格的なWebアプリの構造についてお話しします。Razorページでは、画面の見た目を作る「.cshtml」ファイルと対になる、プログラムの裏方の処理を専門に書く「.cshtml.cs」というファイルが存在します。この裏方のファイルをページモデル（PageModel）と呼びます。

なぜファイルを分けるのでしょうか。パソコンで作業をするとき、デザインをする人と、裏で難しい計算やデータの管理をする人で分担した方が、作業がスムーズに進みますよね。それと同じです。画面側にはHTMLと簡単な表示用のC#だけを書き、難しい処理やデータベースとのやり取りはページモデルという裏方担当に任せることで、プログラムがすっきりと整理され、エラーが起きたときも見つけやすくなります。この役割分担を意識することが、C#によるASP.NET CoreのWebアプリ開発をマスターするための大きな第一歩となります。