関連するソリューション
アプリケーション開発
マネージドサービス（運用・保守）
セキュリティ製品
業務改革
先端技術部
エバンジェリスト ベロフ・ドミトリー (ディーマ)
飲み終わった抹茶ラテの紙コップをテーブルに置いたまま、画面を眺めています。
そこに写っているのは、未だ完全に慣れていない
Visual Studio
の
Mac
版で開いたファイルの、幼馴染みみたいに昔から知っている
C#
のコード。ビルドして実行します。
ブラウザーのウィンドウで
PWA
アプリが走ります。
ASP.NET
なら
PWA
アプリは前から出来ていたけれど、今のアプリはちょっと違います。
そこに実行しているのは
JavaScript
ではなく.
NET
のバイトコードで、そこに呼び出されているのは
JavaScript
のモジュールではなく.
NET
のアセンブリです。
そこには
WebAssembly
の力を借りて
Blazor
が実行しています・・・
と言う訳でこの暑い日に、誰かの気まぐれか悪戯かによってこのコラムに参加する事になった私、ディーマが
Blazor
やそれを可能にした
WebAssembly
を紹介してみようと思います。
おっと、初めましてですね。失礼しました^^;
私はベロフ・ドミトリーです。でも普段はディーマと呼ばれています。
私は先端技術部に所属しているロシア人ですが、
実は心の中には技術が大好きな魔法少女です!
宜しくお願いします。
・WebAssembly
先ずは
WebAssembly
とは何かについてですね。
WebAssembly
はブラウザー上で実行可能なバイナリフォーマットである
(WASM
とも称されていますので、こう呼びます
)
。
別の言い方をするとブラウザーのアセンブリ言語に等しい物です。
ブラウザーの言語と言えば
JavaScript
が頭に浮かびますね。なんで新しい言語が必要になったのでしょうか
?
理由は簡単です。
JavaScriptより速くて、理想的にネイティブコードに近い、ブラウザー上のコードの実行速度を達成する為
です。
そこで、何故
JavaScript
では必要な速度を達成するのが非常に難しいのかを分かる為に、スクリプトのダウンロードから実行までの過程を見てみましょう。
１．
JavaScriptはサーバー等からダウンロードされます
２．
JavaScriptのソースコードからパーサーによりAST (Abstract Syntax Tree)が作成されます。
３．
ASTからインタプリターによりバイトコードが作成されます。
４．
バイトコードが機械語に変換して実行されます。
a.
頻繁に呼び出されているJS関数はコンパイラーにより最適化されます。
JavaScript
エンジンは膨大な進化してきて今でも進化し続きますが、仕組み的に限界があります。上記の各ステップを最適化しても、ステップ自体が必要だという事実から逃げられないのです。
さて、 WASM により上記の 4 つのステップがどう変わるか見てみましょう。
2.
3.
4.
・WebAssemblyモジュールの作成
WASM
にはテキストフォーマットがあります。下記のように一つの関数をエクスポートするモジュールを作成できます。
少し難しそうに見えますが、幸いな事に
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
アプリはサーバー側において
ASP.NET Core
上で走っていて、クライアントのブラウザーには
UI
だけがダウンロードされます。
クライアントとサーバーの間に
SignalR
ライブラリーを使ってコネクションが成立されます。
そのコネクションで、マウスクリック等のクライアントに発生したイベントがサーバーに送られ、サーバーでの処理によって更新する必要がある
UI
の部分がクライアントに戻されます。
・
Blazor WebAssembly
アプリは完全にクライアントにダウンロードされ、ブラウザーの中に
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は名前です)
3.
プロジェクトのフォルダーに移動します
4.
アプリを起動します
5.
ブラウザーでアプリに移動します
アプリを初めて閲覧する前に開発者ツールでネットワークのログの取得を有効にしたら、下記のスクリンショットのように.NETのアセンブリがブラウザーにダウンロードする事を確認できます。
ダウンロードする必要なファイルのサイズは大きい方ですけど、上記のスクリンショットの通り簡単なアプリのリリース版では
4.7MB
が必要で、全ファイルは毎回ダウンロードするわけではないです。
一回ダウンロードしたらキャッシュして、次回からは
.NET
アセンブリはキャッシュから取得されます。
----------------------------------------------------------------------------------------------------
ご存知の人がいると思いますが、むか〜しむかし
Silverlight
という
Microsoft
のフレームワークがあって、それは丁度
.NET
をブラウザーに入れる技術でした。
本当に残念な事にそれは失敗で、今は
Silverlight
という言葉が分かる人は少ないと思います。
でも今回は違うと思います。
.NET Core
自体はクロスプラットフォームとオープンソースであって、元になってる
WASM
は正式な
WEB
標準である為、
Blazor
は全部の主要ブラウザーで動けます。
悲しい事に
XAML
が
Blazor
にはないですので、ちゃんと
C#
と
XAML
の組み合わせでクロスプラットフォームのアプリの開発には
.NET MAUI
を待たなければなりません
T_T
----------------------------------------------------------------------------------------------------
・・・
改めて空っぽの紙コップに視線を向けます。抹茶は健康に良い物ですが飲み過ぎるとお腹が痛くなる可能性は低くはないですね。
もう一杯飲みたい衝動に駆られて、そうしないよう自分に納得させようとします。
でもまた失敗です。
ですので、ウェブとか
IT
とかの話はまた今度ね
^_^;
当サイトの内容、テキスト、画像等の転載・転記・使用する場合は問い合わせよりご連絡下さい。
エバンジェリストによるコラムやセミナー情報、
IDグループからのお知らせなどをメルマガでお届けしています。
