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

生徒

「ASP.NET Blazorって聞いたんですが、コンポーネントって何ですか？」

先生

「Blazorでは、画面の部品をコンポーネントとして作ります。その正体がRazor Componentです。」

生徒

「画面の部品って、ボタンとか文字のことですか？」

先生

「その通りです。ページを小さなパーツに分けて作る考え方ですね。順番に見ていきましょう。」

1. ASP.NET Blazorとは何か

ASP.NET Blazorは、C#だけでWeb画面を作れるASP.NET Coreの技術です。これまでのWeb開発では、画面はHTMLやJavaScript、処理はC#というように言語が分かれていました。Blazorでは、画面と処理をまとめてC#で書くことができます。

パソコンに例えると、キーボードと画面が別々だったものを、一つの機械として操作できるようになったイメージです。初心者でも「今どこで何が起きているか」を理解しやすくなります。

2. コンポーネントという考え方

コンポーネントとは、画面を構成する部品のことです。Webページを一枚の紙として作るのではなく、見出し、ボタン、入力欄などをそれぞれ部品として作ります。

料理に例えると、カレーを作るときに、じゃがいも、にんじん、ルーを分けて準備するのと同じです。部品に分けることで、使い回しや修正が簡単になります。

Razor Componentとは、.razorという拡張子を持つファイルで作られるBlazor専用のコンポーネントです。HTMLのような見た目の中に、C#の処理を書けるのが特徴です。

Razorという名前は、HTMLの中にC#を差し込むための仕組みを指します。紙にメモを書き足すような感覚で、画面と処理を一緒に記述できます。

まずは、画面に文字を表示するだけのRazor Componentを見てみましょう。初心者は「表示できた」という体験がとても大切です。


<h3>こんにちは Blazor</h3>

@code {
}

上のコードでは、HTMLの見出しを表示しています。@codeの中はC#を書く場所ですが、今回はまだ何も書いていません。


こんにちは Blazor

次に、C#の変数を使って画面に値を表示してみましょう。変数とは、数字や文字を一時的に入れておく箱のようなものです。


<p>今日のメッセージ：@message</p>

@code {
    string message = "はじめてのBlazor";
}

@messageと書くことで、C#の変数の中身を画面に表示できます。


今日のメッセージ：はじめてのBlazor

Razor Componentでは、ボタンのクリックなどの操作もC#で書けます。これをイベント処理と呼びます。


<p>カウント：@count</p>
<button @onclick="CountUp">増やす</button>

@code {
    int count = 0;

    void CountUp()
    {
        count++;
    }
}

ボタンを押すたびに数字が増えます。JavaScriptを書かずに動くのがBlazorの大きな特徴です。


カウント：1

Razor Componentは、他の画面から呼び出して使い回せます。何度も同じHTMLを書く必要がなくなり、修正も一か所で済みます。

これは、同じ形のクッキー型を何度も使うようなものです。一つ直せば、全部に反映されます。

初心者が混乱しやすいのは、「HTMLなのかC#なのか分からなくなる」点です。Razorでは、@が付いている部分がC#、それ以外はHTMLと覚えると整理しやすくなります。

最初は完全に理解しなくても大丈夫です。「画面と処理を一緒に書ける部品」として使いながら慣れていきましょう。