KNOWLEDGE - COLUMN ナレッジ - コラム

【エバンジェリスト・ボイス】Webの 未来? WebAssemblyとBlazor

先端技術部
エバンジェリスト ベロフ・ドミトリー (ディーマ)

飲み終わった抹茶ラテの紙コップをテーブルに置いたまま、画面を眺めています。
そこに写っているのは、未だ完全に慣れていない Visual Studio Mac 版で開いたファイルの、幼馴染みみたいに昔から知っている C# のコード。ビルドして実行します。

ブラウザーのウィンドウで PWA アプリが走ります。
ASP.NET なら PWA アプリは前から出来ていたけれど、今のアプリはちょっと違います。
そこに実行しているのは JavaScript ではなく. NET のバイトコードで、そこに呼び出されているのは JavaScript のモジュールではなく. NET のアセンブリです。
そこには WebAssembly の力を借りて Blazor が実行しています・・・ 
と言う訳でこの暑い日に、誰かの気まぐれか悪戯かによってこのコラムに参加する事になった私、ディーマが Blazor やそれを可能にした WebAssembly を紹介してみようと思います。

おっと、初めましてですね。失礼しました^^;
私はベロフ・ドミトリーです。でも普段はディーマと呼ばれています。
私は先端技術部に所属しているロシア人ですが、
実は心の中には技術が大好きな魔法少女です!
宜しくお願いします。

・WebAssembly

先ずは WebAssembly とは何かについてですね。 WebAssembly はブラウザー上で実行可能なバイナリフォーマットである (WASM とも称されていますので、こう呼びます )
別の言い方をするとブラウザーのアセンブリ言語に等しい物です。
ブラウザーの言語と言えば JavaScript が頭に浮かびますね。なんで新しい言語が必要になったのでしょうか ?   理由は簡単です。
JavaScriptより速くて、理想的にネイティブコードに近い、ブラウザー上のコードの実行速度を達成する為 です。

そこで、何故 JavaScript では必要な速度を達成するのが非常に難しいのかを分かる為に、スクリプトのダウンロードから実行までの過程を見てみましょう。
2_814x1162 1. JavaScriptはサーバー等からダウンロードされます
2. JavaScriptのソースコードからパーサーによりAST (Abstract Syntax Tree)が作成されます。
3. ASTからインタプリターによりバイトコードが作成されます。
4. バイトコードが機械語に変換して実行されます。
   a. 頻繁に呼び出されているJS関数はコンパイラーにより最適化されます。

JavaScript エンジンは膨大な進化してきて今でも進化し続きますが、仕組み的に限界があります。上記の各ステップを最適化しても、ステップ自体が必要だという事実から逃げられないのです。

さて、 WASM により上記の 4 つのステップがどう変わるか見てみましょう。

3_856x562

1.
2. 
3.
4. 


・WebAssemblyモジュールの作成

WASM にはテキストフォーマットがあります。下記のように一つの関数をエクスポートするモジュールを作成できます。

4_900x330

少し難しそうに見えますが、幸いな事に WASM を直接作成する必要はありません。
WASM は他プログラミング言語のコンパイルの対象プラットフォームとして開発されたからです。
つまり、実行速度が重要で難しい計算する関数を C++ Rust で書いて WASM のバイトコードにコンパイルします。後で JavaScript から呼び出しても良いです。

現在には既に色んなプログラミング言語から WASM のバイトコードにコンパイル出来るようになっています。その中には C++ Rust の他、 C# Swift Kotlin 等があります。
人気なゲームエンジン Unity3D もまた WebGL のゲームを WASM で実行します。

静的な高水準言語で JavaScript から呼び出せる WASM モジュールを開発するのは良いものの、 JavaScript を使わずにアプリを完全にその言語で開発する方が絶対にカッコいいだと思います。
C# で開発されたゲームを WASM で実行する Unity3D は勿論ですが、もう一つ C# がメイン言語であるフレームワークがあります・・・

Blazor

Blazor C# HTML/CSS によって Web アプリを開発する為のフレームワークです。
厳密に言うと、現在 Blazor は二つの種類があります。

Blazor Server
5_1024x431

アプリはサーバー側において ASP.NET Core 上で走っていて、クライアントのブラウザーには UI だけがダウンロードされます。
クライアントとサーバーの間に SignalR ライブラリーを使ってコネクションが成立されます。
そのコネクションで、マウスクリック等のクライアントに発生したイベントがサーバーに送られ、サーバーでの処理によって更新する必要がある UI の部分がクライアントに戻されます。

Blazor WebAssembly
6_456x429

アプリは完全にクライアントにダウンロードされ、ブラウザーの中に WASM 上で走ります。
DB にアクセスなどの為のサーバー側が必要となれば、サーバーのどんな技術を使っても良いです。
必ずしも ASP.NET Core を使う必要はありません。

これからは Blazor WebAssembly の話になりますが、殆どは Blazor Server でも当てはまります。
また、 Blazor WebAssembly は長くて書くのは面倒臭いので Blazor と書きます ^^;

下記は Blazor の利点として挙げられます :
・サーバー側とクライアント側とは、ソースコードやライブラリーを共通出来ます 。サーバー側でも .NET が使われている場合ですね。
・既存の .NET のライブラリーも使えます。勿論、アプリはブラウザーの中に走っていますからサポートされていない物もあります。
Web アプリは JavaScript 無しで開発が出来ます。
JavaScript も使えます。上記のポイントに反対するように見えますが、要は既存の JavaScript のソースコードやライブラリーを捨てる必要がないです。
直ぐに C# に切り替えられない JavaScript での機能があれば、当面の間そのまま使っても良いし、 Blazor 用のラッパーを作って C# から JavaScript での機能を呼び出しても良いです。
Visual Studio Code Blazor での開発がサポートします。

ここで皆さんに Blazor の正式なデモアプリを作成して、試してみるのを推奨します。凄く簡単なので是非 ^_^

1.  下記のサイトから.NET Coreの最新版をダウンロードし、インストールします

※外部サイト:.NET Core最新版ダウンロード

2.  ターミラル・コマンドプロンプトで新しいBlazorのプロジェクトを作成します (HelloBlazorは名前です)

7_780x50
3.  プロジェクトのフォルダーに移動します

8_784x50
4.  アプリを起動します

9_783x50
5.  ブラウザーでアプリに移動します

アプリを初めて閲覧する前に開発者ツールでネットワークのログの取得を有効にしたら、下記のスクリンショットのように.NETのアセンブリがブラウザーにダウンロードする事を確認できます。

10_1379x929 ダウンロードする必要なファイルのサイズは大きい方ですけど、上記のスクリンショットの通り簡単なアプリのリリース版では 4.7MB が必要で、全ファイルは毎回ダウンロードするわけではないです。
一回ダウンロードしたらキャッシュして、次回からは .NET アセンブリはキャッシュから取得されます。
----------------------------------------------------------------------------------------------------
ご存知の人がいると思いますが、むか〜しむかし Silverlight という Microsoft のフレームワークがあって、それは丁度 .NET をブラウザーに入れる技術でした。
本当に残念な事にそれは失敗で、今は Silverlight
という言葉が分かる人は少ないと思います。
でも今回は違うと思います。 .NET Core
自体はクロスプラットフォームとオープンソースであって、元になってる WASM は正式な WEB 標準である為、 Blazor は全部の主要ブラウザーで動けます。
悲しい事に XAML
Blazor にはないですので、ちゃんと C# XAML の組み合わせでクロスプラットフォームのアプリの開発には .NET MAUI を待たなければなりません T_T
----------------------------------------------------------------------------------------------------
 
・・・

改めて空っぽの紙コップに視線を向けます。抹茶は健康に良い物ですが飲み過ぎるとお腹が痛くなる可能性は低くはないですね。
もう一杯飲みたい衝動に駆られて、そうしないよう自分に納得させようとします。
でもまた失敗です。
ですので、ウェブとか IT とかの話はまた今度ね ^_^;

当サイトの内容、テキスト、画像等の転載・転記・使用する場合は問い合わせよりご連絡下さい。

エバンジェリストによるコラムやセミナー情報、
IDグループからのお知らせなどをメルマガでお届けしています。

メルマガ登録ボタン

ベロフ ドミトリー

株式会社インフォメーション・ディベロプメント 先端技術部 エバンジェリスト

この執筆者の記事一覧

関連するナレッジ・コラム

どのインスタンスを選べばいいの?EC2性能比較!

AIがプログラミングする時代の到来!?

残された攻撃の痕跡を追え! ~スレットハンティングのススメ~