こんにちは、サイオステクノロジー 技術2部 水倉です。
Microsoft Build 2019 2日目のセッション「Full stack web development with ASP.NET Core 3.0 and Blazor」をレポートします。
.NET Core 3.0 によるフルスタック Web 開発
.NET Core 3.0 Preview 5 で C# と Blazor を用いてフルスタックな Web 開発がサポートされました。本セッションでは、クライアントサイド、フロントエンド (※1) 、バックエンド全てを .NET Core 3.0 で実装する場合の構成、実装手順について、デモを中心に紹介されました。
(※1) ここではサーバーサイドにおけるフロントエンドの意味で使われてました。
興味のある方は実装の流れはセッション動画のデモをチェックしてみてください。このブログ記事では、Blazor を取り上げます。
(※) 本記事で引用されている画像は全てセッション動画内のキャプチャです。
Blazor とは？
C# と Razor でクライアントサイドを実装できる技術です。ブラウザ上でどうやって C# を実行するのかというと、ブラウザ上でバイナリ実行を可能とする WebAssembly の技術を利用します。C# を WebAssembly へコンパイルできるようにすることで、ブラウザへの追加プラグイン不要で WebAssembly としてブラウザ上で実行されます。
Mozilla が Python を WebAssembly としてブラウザ実行させる「Pyodide」を開発中というニュースも記憶に新しいところです。OS 環境と ブラウザ環境の違いを埋めようと、WebAssembly にシステムリースへアクセスするための標準 API 仕様「WASI（WebAssembly System Interface）」を策定する動きもあり、注目ですね。
何が嬉しいのか？
さて、Blazor は何が嬉しいのでしょうか。
- クライントサイド、サーバーサイドでコードをシェアできる。
- ASP.NET エンジニアにとって使い慣れたサーバーサイド技術（C# と Razor）でクライアントサイドを実装できる。
- 必要に応じて JavaScript ライブラリ やブラウザ API を呼び出すこともできる。
クライアントサイド技術はサーバーサイドよりも使いこなすツールが多く、サーバーサイドと合わせてカバーしていくのはエンジニアにとって学習コストが大きいので、やはり同じ技術を使って実装できるメリットは大きいですね。
本セッションのデモアプリの構成は下記のようなものでした。
サーバーサイド Blazor ？
Blazor は「C# でクライアントサイドも実装できる」という文脈で利用されることが多いですが、サーバーサイドでの実行モデルもサポートしています。ブラウザとの通信は SignalR を使用します。
これを見た時、何が嬉しいのか、今ひとつピンと来なかったので、公式ドキュメントを確認してみました。
メリット
- クライアントサイドへダウンロードされるコード量が大幅に減るため、ページロードが非常に早くなる
- .NET Core 互換 API の使用を含むサーバー機能を活用できる
- サーバーの .NET Core 上で実行されるため、デバッガなど .NET ツールが使用できる。
- WebAssembly をサポートしていないブラウザでも動作できる
デメリット
- レイテンシーの増加。ユーザー操作の度にネットワークホップを伴う。
- オフラインでは動作しない。クライアントとの接続に失敗すると機能しない。
- スケーラビリティの低下。サーバーは複数のクライアントを管理し、クライアントの状態を処理する必要がある。
- アプリを提供するには ASP.NET Core サーバーが必要。CDN からなど、サーバーなしでは展開できない。
結構無視できないデメリットもあるので、メリットとなる部分が必須要件となる局面で採用を検討する感じでしょうか。正直、使い所が見えてないので、もう少し勉強してみたいと思います。
最後に
まずはクライアントサイドを C#/Razor で実装してみると、Blazor の強力さがわかると思います。結構「おーっ」ってなると思いますので、まだ試していない方は触ってみると新鮮な驚きがあると思います。セッション中のデモアプリのソースはチュートリアル形式でこちらにアップされていますのでお試しあれ。
.NET Core 3.0 の新機能についてはこちら（英文）が詳しいです。まだ「Preview 5」の記事が見当たらなかったので、「Preview 4」のものですが、ご参考までに。
STI 水倉
