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

生徒

「C#を使ってWebサイトやWebアプリを作りたいのですが、Blazorという言葉を聞きました。これは一体何ですか？」

先生

「Blazorは、C#というプログラミング言語を使ってWebアプリ開発ができる画期的な仕組みです。これまではJavaScriptという別の言語が必要だった画面の動きも、すべてC#で書けるのが大きな特徴です。」

生徒

「それは便利ですね！でも、調べるとクライアントとかサーバーとか難しい言葉が出てきて混乱しています。」

先生

「パソコンの操作が初めての方でも絶対に理解できるように、それぞれの違いや仕組みを基本から丁寧にお話ししていきますね。」

1. Blazorとは何かを学ぼう

Blazor（ブレイザー）とは、マイクロソフト社が開発した、C#というプログラミング言語を使ってWebアプリを作るための最新の仕組みです。Webアプリ開発の世界では、これまで「画面の見た目や動き」を作るためにJavaScript（ジャバスクリプト）というプログラミング言語を覚える必要がありました。しかし、Blazorの登場によって、画面の見た目から裏側の仕組みまですべてをC#だけで統一して開発できるようになりました。

Webアプリとは、インターネットエクスプローラーやグーグルクロームなどのブラウザという閲覧ソフトを使って動かすシステムのことです。身近な例でいうと、インターネット通販サイトや、SNS、オンライン銀行の画面などがWebアプリに該当します。C#という一つの言語を覚えるだけで、このような高機能なWebアプリが作れるようになるため、現在非常に注目を集めています。初心者の方にとっても、複数のプログラミング言語を同時に勉強する負担が減るため、とてもおすすめの仕組みです。

2. Webアプリの基本であるクライアントとサーバーとは？

Webアプリの仕組みを理解するために、まずは「クライアント」と「サーバー」という二つの重要な役割について知る必要があります。パソコンを触ったことがない方でもイメージしやすいように、一般的な「レストラン」に例えて説明します。

クライアントとは、サービスを利用する側のことです。私たちが普段使っているスマートフォンやパソコン、そして画面を表示しているブラウザがこれに当たります。レストランでいうと「注文をするお客さん」の役割です。画面のボタンを押したり、文字を入力したりする操作はすべてクライアントで行われます。

一方で、サーバーとは、サービスを提供する側のコンピューターのことです。インターネットの向こう側にあり、大量のデータを保存したり、複雑な計算をしたりする役割を持っています。レストランでいうと「厨房にいる料理人」です。お客さんからの注文を受け取って、料理を作り、それをお客さんの元へ届けます。

私たちがウェブサイトを見るときは、常にこの「クライアントがサーバーにお願いをして、サーバーが結果を返す」というキャッチボールが行われています。Blazorを学ぶ上では、この二つの役割がどこでどのように動くのかを知ることがとても大切になります。

3. 画面が動く仕組みとプログラムの配置

Webアプリでは、ボタンを押したときに文字が変わったり、数字がカウントされたりする動きが必要です。この動きのプログラムを「クライアント（手元のパソコン）」で動かすのか、それとも「サーバー（遠くのコンピューター）」で動かすのかによって、Webアプリの性質が大きく変わります。

パソコンの初心者の方にとって、遠くにあるサーバーと手元のパソコンが通信しているという感覚は掴みにくいかもしれません。例えば、手元の電卓で計算をする場合はボタンを押した瞬間に結果が出ます。これがクライアント側でプログラムが動いている状態です。一方で、銀行の窓口で残高を確認してもらう場合は、窓口の人が奥の金庫やコンピューターに確認を取りに行きます。これがサーバー側でプログラムが動いている状態です。

Blazorでは、このプログラムを動かす場所を自由に選ぶことができるようになっています。これが次に説明する二つの仕組みに繋がっていきます。

4. サーバー側で動くBlazorサーバーの仕組み

Blazorには大きく分けて二つの動かし方があります。一つ目がBlazor Server（ブレイザー・サーバー）と呼ばれる仕組みです。これは、すべてのプログラムの計算や処理をインターネットの向こう側にある「サーバー」で行う方法です。

手元のパソコンで行われたボタンのクリックなどの操作は、一瞬でサーバーに送られます。サーバーはその操作を受け取って「画面をこのように書き換えてください」という命令を手元のパソコンに送り返します。この通信には、ウェブソケットと呼ばれる常に繋がった状態の高速な通信路が使われます。

この方法の最大のメリットは、手元のパソコンに負担がかからないことです。古いパソコンや性能の低いスマートフォンでも、重い計算をサーバーが代わりにやってくれるため、快適に動作します。ただし、常にインターネットに繋がっていなければならず、電波が悪い場所では動きが遅くなってしまうという特徴もあります。

5. クライアント側で動くBlazorウェブアセンブリの仕組み

二つ目の動かし方が、Blazor WebAssembly（ブレイザー・ウェブアセンブリ）と呼ばれる仕組みです。これは、プログラム一式をはじめに手元のパソコンに丸ごとダウンロードしてしまい、すべての計算や処理を「クライアント（ブラウザ）」側で行う方法です。

ウェブアセンブリという言葉は難しく聞こえますが、これは「ブラウザの中でC#のプログラムを直接動かすための技術」だと考えてください。最初にウェブサイトを開いたときに少しだけダウンロードの時間がかかりますが、一度読み込んでしまえば、その後の動きは非常に高速になります。なぜなら、インターネットの向こう側にあるサーバーといちいち通信をしなくても、手元のパソコンの中だけで処理が完結するからです。

この方法は、一度画面を開けば電波が届かない場所でも一部の機能を動かすことができるという強みがあります。手元の電卓と同じように、サクサクとストレスなく動くWebアプリを作りたい場合に適しています。

6. 初心者向けBlazor画面作成の基本コード

ここからは、実際にBlazorで画面を作るプログラムがどのようなものかを見ていきましょう。Blazorでは、HTMLと呼ばれる画面の骨組みを作る言葉と、C#のプログラムを一つのファイルに一緒に書くことができます。これをレイザーコンポーネントと呼びます。

まずは、最もシンプルな画面表示のコードです。画面に挨拶のメッセージを表示するだけのプログラムを見てみましょう。


<h3>挨拶を表示する画面</h3>

<p>こんにちは！Blazorの世界へようこそ。</p>
<p>今日の運勢は、大吉です！</p>

このコードは、特別な計算を行わずに文字を表示するだけのものです。HTMLの知識が少しあれば、文字を書き換えるだけで簡単に画面のデザインを変更することができます。このように、見た目を作る部分を直感的に書けるのがBlazorの魅力です。

7. ボタンを押して文字が変わるプログラム

次に、Webアプリらしい動きを取り入れたプログラムを作成してみましょう。ボタンを押すと、画面に表示されている文字が変化する仕組みです。これを行うために、C#のプログラムを書く場所を用意します。


<h3>ボタン操作の練習</h3>

<p>現在の状態：@message</p>

<button class="btn btn-primary" @onclick="ChangeText">ここをクリック</button>

@code {
    private string message = "まだボタンは押されていません。";

    private void ChangeText()
    {
        message = "ボタンが押されました！おめでとうございます！";
    }
}

このプログラムでは、コードの途中にアットマークがついた文字が登場します。アットマークを使うことで、C#のプログラムで管理しているデータを画面の文字と連動させることができます。ボタンを押したときに、自動的に画面の文字が書き換わる仕組みが、このように短いプログラムで実現できます。

8. 数字を数え上げるカウンタープログラム

さらにプログラミングの感覚を掴むために、ボタンを押すたびに数字が1ずつ増えていくカウンターのプログラムを見てみましょう。足し算の計算をC#で行い、それを画面にリアルタイムで表示します。


<h3>数字を数えるカウンター</h3>

<p>現在の数字は、<strong>@count</strong> 回です。</p>

<button class="btn btn-success" @onclick="IncrementCount">数字を増やす</button>

@code {
    private int count = 0;

    private void IncrementCount()
    {
        count = count + 1;
    }
}

このコードの実行結果は次のようになります。ボタンを押すたびに、数字が内部で計算されて増えていきます。


現在の数字は、1 回です。
（もう一度押すと）
現在の数字は、2 回です。

プログラムの中にある「count = count + 1」というのは、現在の数字に1を足して、新しい数字として保存し直すという意味を持っています。パソコンの中の計算機がしっかりと動いている証拠です。

9. 入力した名前を画面に表示するプログラム

最後に、文字を入力する箱を用意して、そこにキーボードで打ち込んだ名前を画面に表示するプログラムを作ってみましょう。データバインディングと呼ばれる、入力と表示を同時に繋ぐ高度な仕組みですが、Blazorなら簡単に書くことができます。


<h3>お名前入力アプリ</h3>

<div class="mb-3">
    <label class="form-label">あなたのお名前を入力してください：</label>
    <input type="text" class="form-control" @bind="userName" />
</div>

<p>こんにちは、<strong>@userName</strong> さん！今日も頑張りましょう。</p>

@code {
    private string userName = "ゲスト";
}

このプログラムの実行結果は次のようになります。文字を入力する箱の中身を書き換えると、下の文章の「ゲスト」という部分がリアルタイムに変わります。


あなたのお名前を入力してください：[ 太郎 ]
こんにちは、太郎 さん！今日も頑張りましょう。

アットマークバインドという命令を使うことで、入力箱の文字とC#の変数が強力に結びつきます。JavaScriptを使わずに、これほど滑らかな動きの画面が作れるのが、Blazorが初心者からプロの開発者にまで愛されている大きな理由です。クライアントとサーバーの特性を意識しながら、作りたいアプリに合わせて選んでみてください。