概要
従来のJavaScriptの代わりに、高級言語で書かれたコードをコンパイルしたバイナリーを実行できるWebAssemblyと、C#でプログラム記述できるBlazorフレームワークを用いてWeb開発する方法を説明します。
WebAssemblyとは
WebAssembly (ウェブアセンブリ、略称: Wasm) とは、Webブブラウザ上で高速に動作するバイナリ形式のコードです。
C、C++、C#、Rustなどの言語で書かれたコードをコンパイルしてWebAssemblyに変換することで、ブラウザ上でネイティブに近い速度で実行できるようになります。
JavaScriptの弱点を補完し、Webアプリケーションのパフォーマンスを向上させることを目的としています。
WebAssemblyの特徴
高速性:
JavaScriptよりも低レベルなバイナリ形式で動作するため、計算処理の多い処理を高速に実行できます。
言語非依存性:
C、C++、C#、Rustなど、様々な言語で記述されたコードをコンパイルしてWebAssemblyとして実行できます。
クロスプラットフォーム性:
WebAssemblyは特定のOSやブラウザに依存しないため、様々な環境で動作します。
セキュリティ:
ブラウザのサンドボックス内で実行されるため、セキュリティ面でも安全性が高いです。
JavaScriptとの連携:
WebAssemblyはJavaScriptを完全に置き換えるものではなく、JavaScriptと連携して動作します。
Blazorとは
Blazor（ブレイザー）とは、C#を使ってWebアプリケーションのフロントエンドを開発するためのフレームワークです。
JavaScriptの代わりにC#を使用し、WebAssemblyまたはサーバーサイドで動作するインタラクティブなWeb UIを構築できます。
Blazor の特徴
C# でのフロントエンド開発:
C# を使用して、JavaScript の代わりにWebアプリケーションのクライアント側を開発できます。
WebAssembly またはサーバーサイド:
Blazor WebAssembly では、.NETコードをWebAssemblyにコンパイルしてブラウザで直接実行できます。
また、Blazor Serverでは、サーバー上で実行されたUIをSignalRでブラウザに送信します。
Razor構文:
HTMLとC#コードを組み合わせたRazor構文で、コンポーネントを記述します。
サーバーサイドとクライアントサイドのコード共有:
サーバーサイドとクライアントサイドでコードを共有できるため、開発効率が向上します。
.NETエコシステム:
.NETの豊富なライブラリやツールを活用できます。
Blazorのホスティングモデル
Blazor には、主に3つの開発形式（ホスティングモデル）があります。
Blazor WebAssembly:
クライアントサイドで実行される形式です。
C#コードがWebAssemblyとしてブラウザ上で実行されます。
サーバーへの依存度が低く、オフラインでも動作可能です。
ブラウザの機能にアクセスできますが、サーバー側のリソースには直接アクセスできません。
Blazor Server:
サーバーサイドで実行される形式です。
ユーザーインターフェースの更新は、SignalR接続を介してサーバーとクライアント間でやり取りされます。
サーバーの処理能力に依存するため、クライアントのスペックは比較的低くても動作します。
サーバー側のリソースに直接アクセスできますが、オフラインでは動作しません。
Blazor United:
1つのアプリケーション内で、Blazor WebAssemblyとBlazor Serverの両方のレンダリングモードを組み合わせて使用できる形式です。
静的コンテンツはサーバー側でレンダリングし、インタラクティブな部分はクライアント側で処理するなど、柔軟な開発が可能です。
Blazor WebAssemblyによる開発
Blazor WebAssembly:はBlazorのホスティングモデルの一つで、クライアントサイドで実行される形式です。
このモデルはBlazorフレームワークでビルドされた成果物( HTMLやCSSやdllファイルなど)をWebサーバーに配置して、ブラウザーで HTML を開くと必要なファイルがサーバーより読み込まれクライアントサイドのWebAssembly上でアプリケーションが動作します。
Webサーバーはファイルを配置するためだけに使用され、サーバー側でプログラムが動くことはありません。従ってWebサーバーにOSやWebサーバーソフトの制限はなく、一般的なレンタルサーバーでも問題なく動かすことができます。
次の章では、BlazorフレームワークのWebAssemblyを用いたクライアントサイドで実行されるHello Worldアプリを開発する方法を説明します。