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

生徒

「先生、Blazorって何ですか？Webアプリを作るって聞いたんですけど…」

先生

「Blazorは、C#というプログラミング言語だけでWebアプリを作れる新しい仕組みです。通常、WebアプリはHTML、CSS、JavaScriptを使いますが、BlazorならC#でフロントエンドも作れます。」

生徒

「C#だけで動くんですか？JavaScriptは必要ないんですか？」

先生

「はい、基本的にはJavaScriptを覚えなくても大丈夫です。Blazorはサーバー側で動く『Blazor Server』と、ブラウザで直接動く『Blazor WebAssembly』の2種類があります。」

1. Blazorとは？C#で作るWebアプリ開発の新時代

BlazorはMicrosoftが開発した、ASP.NET Core上で動く最新のWebフレームワークです。C#でフロントエンドの操作や画面表示、ユーザーとのやり取りを実装できます。通常Webアプリは、画面を作るHTML、見た目を整えるCSS、動きを作るJavaScriptの3つを組み合わせますが、BlazorならC#だけで済むので、既にC#を使った経験がある人にはとても便利です。

「Webアプリ」とは、ブラウザで動くアプリのことで、例えばオンラインのカレンダーやToDo管理アプリなどをイメージするとわかりやすいです。

2. Blazorの種類と特徴

Blazorには大きく2つの種類があります。

Blazor Server：アプリの処理をサーバーで行い、ブラウザと通信して画面を更新する方式。動作が軽く、古いブラウザでも使いやすい。
Blazor WebAssembly：アプリの処理をブラウザで直接行う方式。JavaScriptを使わず、C#だけで高速に動作します。

それぞれ用途によって使い分けが可能で、学習者にとってはまずBlazor Serverから始めるのがおすすめです。

3. 簡単なC#コードで動くBlazorアプリ

まずは、ボタンを押すとメッセージが変わる簡単なサンプルです。C#で直接画面操作ができます。


<button @onclick="ChangeMessage">クリックしてね</button>
<p>@message</p>

@code {
    string message = "こんにちは、Blazor！";

    void ChangeMessage()
    {
        message = "ボタンが押されました！";
    }
}

この例では、@onclickというイベントでボタンが押されたときにC#のメソッドを呼び出しています。これだけで、JavaScriptなしで画面を更新できます。

4. 開発環境の準備（Visual Studioと.NET SDK）

Blazorを使うには、まず開発環境を準備する必要があります。Windowsなら「Visual Studio 2022」以上と「.NET SDK」が必要です。

Visual StudioはMicrosoft公式サイトから無料でダウンロードできます。
.NET SDKは、C#でアプリを作るための基本的なツールです。こちらもMicrosoft公式サイトから入手可能です。

Visual Studioを開くと、「新しいプロジェクトの作成」でBlazorアプリのテンプレートを選べばすぐに開発を始められます。

5. Blazorでデータを表示する基本

次に、リストのデータを画面に表示する例です。



@foreach (var item in items)
{
    @item
}


@code {
    List<string> items = new List<string> { "リンゴ", "バナナ", "オレンジ" };
}

この例では、C#のリストを使って繰り返し処理で画面にデータを表示しています。HTMLの

タグを使いながらC#の変数を埋め込めるのがBlazorの特徴です。

6. Blazorでフォーム入力を受け取る方法

次は、ユーザーから文字を入力して表示する簡単なフォームの例です。


<input @bind="name" placeholder="名前を入力"/>
<button @onclick="ShowName">表示</button>
<p>@displayName</p>

@code {
    string name = "";
    string displayName = "";

    void ShowName()
    {
        displayName = "入力された名前は: " + name;
    }
}

ここでは@bindでテキストボックスとC#の変数を紐付けています。ユーザーが入力した内容をそのままC#で扱えるのもBlazorの便利な点です。