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

2020年9月16日水曜日

Blazor C#

t f B! P L

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

これまで、フロントエンドの処理は「JavaScirpt」を用いて実装するのが常識で、実際問題それしか方法がありませんでした。

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

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

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

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

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#ユーザーには、あまり刺さらないフレームワークかもしれません。

スポンサーリンク

QooQ