Blazorの解説！C#だけでフロント・バックエンドが作れる凄いやつ!

Blazorは、簡単に言えばサーバーサイド言語の「C#」だけで、フロントエンドからバックエンドまでの処理が書けるWebフレームワークです。

これまで、フロントエンドの処理は「JavaScirpt」を用いて実装するのが常識で、他に選択肢などほありませんでした。

Blazorを利用することで、多くのバックエンドエンジニアに親しまれている「C#」を使って、フロントエンドの処理が記述できるようになりました。

スポンサーリンク

なぜフロントエンドでC#が使える？

何故、C#がブラウザ上で動くのか疑問に思った方もいるでしょう。

まず、Blazorには「Blazorサーバー」を使う方法と、「WebAssembly」を使う２つの方法が用意されている。

Blazorサーバーを使うと、SignalR通信（WEBソケットまたはAjaxなど）を通じて、HTMLタグなどのDOMをサーバーサイドでレンダリングしてブラウザで描画する。

WebAssemblyを使う場合だと、C#で作成した処理を「dll」にしてブラウザ上で、HTMLタグなどのDOMをレンダリングする。

2020年9月時点では、WebAssemblyは、iOSなどではまだ一部対応していないなど、まだまだ発展途上といった感じなので、Blazorサーバーを使う方が無難といった感じであろうか。

ブラウザがChromeに限定されている場合や、iOSで非サポートになっている機能を使わない場合は、通信が発生せず、圧倒的に速度が早いWebAssemblyを選ぶべきだろう。

スポンサーリンク

Razor構文

BlazorアプリのUI部分は、ASP.NET MVCでおなじみの「Razor構文」を使用して記述していきます。

C# や VB.NET を用いてフロントエンドのHTML部分を作るのが「Razor」です。HTMLを動的に生成したい部分に、@をつけることで、プロパティやメソッドの値を出力することができます。
また、@で動的に出力する内容は、自動的にHTMLエスケープ されるため、クロスサイトスクリプティング（XSS）対策なども容易です。

余談ですが、厳密には「VB.NET」でもBlazorは使用できますが、マイクロソフトが「VB.NET」の言語アップデートを止めて「C#」に注力したため、今後のバージョンアップ次第では「VB.NET」はサポートされれなくなる恐れがあります。

Blazorを使うと何が作れるの？

いわゆる、SPA(Single Page Application)などが簡単に作れます。

SPAというと、Vue React Angularで作るといったイメージがありますが、Blazorを使うと同等かそれ以上に簡単にSAPアプリが作成できる感じです。

次のコードは、ボタンを押すとC#のSay（）メソッドが呼び出され、画面に「Hello Blazor!!」とメッセージを表示する簡単なアプリです。

@page "/"
<button @onclick="Say">Say</button>
<p>@message</p>

@code {
    private string message;
    private void Say() {
        message = "Hello Blazor!!";
    }
}

このように、JavaScirptのように気軽にC#が使えるのがBlazorの特徴である。

さらに、サーバーサイドレンダリングを行うBlazorサーバーでは、上のSay（）メソッドは、サーバー上で実行されるため、わざわざデータ取得用のAPIを用意せずとも、ここでデータベース等にアクセスするといった芸当も可能だ。

async、awaitで非同期処理も超簡単！

C#でフロントエンド側の処理を書けるため、非同期処理でおなじみのasync/awaitパターンが使えます。

例えば、次のサンプルコードのように、DELETEボタンが押されたら、非同期でデータベースからレコードを削除するような処理でも、かなりスッキリとコードが書けます。

<button @onclick="@(async () => await Delete(person.Id))">DELETE</button>

@code {
    
    private async Task Delete(int id) {
        await this.PersonRepository.Delete(personId);
    }
}

Blazorの開発環境

C#、ASP.NETなので、やっぱり開発環境はVisual Studioがベスト！！

それ以外にも、コマンドでビルド＆実行する方法もある。エディタにはVisual Studio Codeを使えば、結構便利な開発環境になる。

スポンサーリンク

まとめ

Blazorの概要について解説してきました。すべてがC#で書けてしまうBlazorは、C#ユーザーにとって待望のフレームワークと言えるでしょう。
逆に、Ruby、Java、Pythonユーザーなどの非C#ユーザーには、あまり刺さらないフレームワークかもしれません。