Blazorとは ― JavaScriptなしでWebを作る

導入

Webページの動きは長らくJavaScriptが担ってきました。「C#は得意だけどJavaScriptは苦手」という人は多いはず。Blazorは、そのWebのUIをC#だけで書けるようにする.NETのフレームワークです。これまで学んだクラス・メソッド・イベント・非同期が、そのままWeb画面づくりに活きます。

説明

Blazorでは、画面をコンポーネント（.razorファイル）という再利用可能な部品として組み立てます。1つのコンポーネントの中に、HTML（見た目）とC#（ロジック）が同居します。

Blazorには「どこでC#を動かすか」で主に3つのホスティングモデルがあります。

flowchart TB
    subgraph WASM["Blazor WebAssembly"]
        A1["C#がブラウザ内で直接動く<br/>（WebAssembly）"]
    end
    subgraph SERVER["Blazor Server"]
        A2["C#はサーバーで動き<br/>画面差分をSignalRで送る"]
    end
    subgraph AUTO["Blazor Web App（.NET 8〜）"]
        A3["サーバー描画＋必要な所だけ<br/>対話可能に（Auto）"]
    end

• Blazor WebAssembly（WASM）: C#（.NETランタイム）がブラウザの中で直接動く。サーバー不要で配れる。
• Blazor Server: C#はサーバーで動き、画面の変化だけを常時接続（SignalR）で送る。初期表示が軽い。
• Blazor Web App（.NET 8以降）: サーバーでまず描画（SSR）し、対話が必要な所だけ後から有効化する。今の既定。

実はこの学習サイトのC#実行エンジン自体がBlazor WebAssemblyで動いています。ブラウザの中でC#が動いている証拠です。

どのモデルでも、書くコンポーネント（.razor）は同じ。まずはコンポーネントの書き方に集中しましょう。

まとめ

• BlazorはC#だけでWeb UIを作れる（JavaScript不要）
• UIは.razorコンポーネント（HTML＋C#の同居）で組み立てる
• ホスティングモデルは WebAssembly / Server / Web App(Auto) の3系統。書くコンポーネントは共通

次回: 実際に最初のコンポーネントを書いて、C#の値を画面に埋め込みます。