Cross-Platform Developers Communityでお話した資料になります https://elv.connpass.com/event/150777/

1. WebブラウザでC#実行
WebAssemblyの技術

2. 2
Name：
岡田 将
Work：
Programmer
Blog：
http://sonic.blue/it/
主にMicrosoft系（ASP.NET／C#／VB.NET）やPHPなど
Twitter：
蒼いねずみ @Sonic16bit
自己紹介

3. Part 01
Webのクロスプラットフォーム
CONTENTS
WebブラウザでC#実行 WebAssemblyの技術
Part 02
WebAssemblyの技術
Part 03
ASP.NET Core Blazor WebAssemblyとは
Part 04
まとめ

4. 注意
あくまで個人的見解となります。
実際と異なる内容も含まれている
かもしれませんので、ご了承くだ
さい。

5. Part.01
Webのクロスプラットフォーム

6. 01
クラサバからの脱却
Webのクロスプラットフォーム
02
ブラウザの独自実装
03
Flash／Silverlightの躍進と苦難
04
W3CによるHTML5の超進化

7. 01
クラサバからの脱却
Webのクロスプラットフォーム（のつらみ）
02
ブラウザの独自実装
03
Flash／Silverlightの躍進と苦難
04
W3CによるHTML5の超進化
← 端末依存とライセンスからの脱却

8. 01
クラサバからの脱却
Webのクロスプラットフォーム（のつらみ）
02
ブラウザの独自実装
03
Flash／Silverlightの躍進と苦難
04
W3CによるHTML5の超進化
← スタイルシートなどデザインや、
独自JavaScript実装による対応限界

9. 01
クラサバからの脱却
02
ブラウザの独自実装
03
Flash／Silverlightの躍進と苦難
04
W3CによるHTML5の超進化
← ブラウザアドインにより共通化できたが、
某モバイルにより将来性が閉ざされる
Webのクロスプラットフォーム（のつらみ）

10. 01
クラサバからの脱却
02
ブラウザの独自実装
03
Flash／Silverlightの躍進と苦難
04
W3CによるHTML5の超進化 ← シェアのある古代ブラウザの対応と
数か月周期で進化していく新機能と
の乖離が進む
Webのクロスプラットフォーム（のつらみ）

11. Part.02
WebAssemblyの技術

12. JavaScriptから脱却するために期待される技術
WebAssemblyの技術
Javascriptにはインタプリタ型の利点もありますが、コンパイラ型と比べると実行速度は
遅いです。
また、クライアントのブラウザバージョンに依存する関数などもあり、プログラムとして
は不安定になります。
そこでWebAssemblyでは、C／C++のコンパイル済みのバイナリ（WASM）ファイルを読
み込み、ブラウザ側から実行することで、高速化およびJavascriptに依存しないプログラ
ミングが可能となる技術となっています
事前に独立したバイナリファイルがあるため、完全にサーバーとの通信を発生させないこ
とも可能となっています。

13. バイナリなのにどうやって各種CPUへ対応できるのか
WebAssemblyの技術
実はWebAssembly は 本来の意味でのアセンブリ言語ではなく、あくまでサーバー側がブ
ラウザ側に対応したバイナリファイルを出力しています。
（x86、x64、ARMなどのコンパイルターゲットが不明なため）
実際にどのマシンで実行されるかわからないため、ブラウザが WebAssemblyのバイナリ
コードをダウンロードした時点で、実行可能なアセンブリに変換がなされます。
そのため、CPUの種類に影響されない実行が可能となっています。

14. WebAssemblyの期待される活用範囲
WebAssemblyの技術
配布されるのがアセンブリのため、コードのセキュリティ性が高いうえ、従来のJavascriptでの
実行では遅かったり、難しい部分に対して置き換えて実行させることで速度の向上が期待でき
ます。
実行速度はC／C++のソフトウェア速度には劣りますが、２０％程度の負荷程度となっていま
す。
また、OSとは切り離されたブラウザ上での実行となるため、安全な実行となります。
（クラッシュしても実行クライアントに大きな影響を与えない）
そのため、今までサーバー側で処理していた演算をクライアント側に分散させたり、一時的な
オフライン処理はもちろん、独立したクライアントアプリとしても実行可能となります。
（クライアントへ依存した分、WASMファイルは大きくなり、ロード時間もかかります）
例）ゲーム / 動画編集 / 3D レンダリング / 音楽編集など
既にAutoCADやDoom3のデモが移植されています（ダウンロードに時間がかかる）
https://wasm.continuation-labs.com/d3demo/

15. WebAssemblyの制限
WebAssemblyの技術
便利なWebAssemblyですが、やはりそれなりの制限はかかります。
WebAssemblyからは、ブラウザ側のDOM / WebGL / WebAudio などには直接アクセスはでき
ません、Javascript経由で実行する必要があります。
WebAssembly対応ブラウザのシェアは徐々に増えてはいますが、実行前にチェック処理などが
必要となります。
現時点で、WebAssembly を完全にサポートしている言語は C / C++ / Rustしかありません。
Kotlin / .NETは現在開発中
→ ASP.NET Core Blazor Serverがリリース！（Blazor Client（WebAssembly）は来年予定）

16. Part.03
ASP.NET Core Blazor WebAssemblyとは

17. ASP(Active Server Pages)
ASP.NET WebForm
ASP.NET MVC ASP.NET Core Blazor Server
ASP.NET Core MVC ASP.NET Core Blazor
WebAssembly
1996 2002 2009 2016 2019 2020
ASP.NETの歴史
VBScript,JavaScript
ASP.NET 3.5SP1-4.6
MVC1-MVC5
.NET Core 3.0
ASP.NET 1.0-3.5,Ajax
VB.NET,C#
.NET Core
1.0,MVC5,SPA .NET Core 3.1

18. ASP.NET Core Blazor WebAssembly
ASP.NET Core Blazor WebAssemblyとは
RazorファイルにBlazor構文で、HTMLと混在して記述する。
内部の@code内にC#が記述できます。
C#の依存関係、.NET ランタイムがWASMファイルでダウンロードされ、WebAssemblyに
よりクライアント側で実行されます。
完全にWeb分離した場合は初回のダウンロードだけで、
すべて完結することが可能。
（現時点ではURL Rewriteなどインストールが必要）

19. ASP.NET Core Blazor Server
随時WebAssemblyでのクライアント動作も使いつつ、サーバー処理はSPA（SignalR）で
通信してサーバー処理を実行する。
ASP.NET Core Blazor WebAssemblyとは

20. ASP.NET Core Blazor WebAssembly
メリット
・.NETサーバー側に依存せずに単体の動作が可能。
・クライアントにダウンロードされた後は、切断されてもページが完全に機能する。
・クライアントのリソースと機能を完全に活用が可能。（Javascript制御）
・アプリ配布した後の動作にASP.NET CoreのWeb サーバーは必要ない。
デメリット
・WebAssemblyに対応したブラウザバージョンが必要。
・使える機能はクライアントのブラウザーが持っている機能までに制限される。
・依存関係を使いすぎると、ダウンロードサイズが大きくなり、初回の読込みに時間がかかる。
・.NETランタイムとツールのサポートやデバッグ機能に制限がある。
ASP.NET Core Blazor WebAssemblyとは

21. ASP.NET Core Blazor WebAssembly
メリット
・.NETサーバー側に依存せずに単体の動作が可能。
・クライアントにダウンロードされた後は、切断されてもページが完全に機能する。
・クライアントのリソースと機能を完全に活用が可能。（Javascript制御）
・アプリ配布した後の動作にASP.NET CoreのWeb サーバーは必要ない。
デメリット
・WebAssemblyに対応したブラウザバージョンが必要。
・使える機能はクライアントのブラウザーが持っている機能までに制限される。
・依存関係を使いすぎると、ダウンロードサイズが大きくなり、初回の読込みに時間がかかる。
・.NETランタイムとツールのサポートやデバッグ機能に制限がある。
→ 結局はWebAssemblyなので、ほぼ同じメリット・デメリットとなるが、
C#と.NET FrameWorkを使って開発ができるが一番のメリット！
ASP.NET Core Blazor WebAssemblyとは

22. 01
Javascriptをなるべく記述はしなくてもよくなるが、連携は必要なので、それなり
にJavascriptの理解はまだ必要
まとめというか所感
02 .NET FrameWorkは強いが、依存関係を増やしすぎると起動が重くなるので注意
03 独立したクライアントとして利用するには、配布方法や動作機能がまだ未成熟？
なので、正式リリースするまではBlazor Clientのみの開発は控えるべき
（PWAとの連携などがうまく出来上がれば流行るかも）
04 C#とBlazor構文のみで、少なくともTypeScriptはもう書かなくてよくなる未来は
すでに来ているはず

23. 参考資料
WebAssembly: 「なぜ」と「どうやって」 [翻訳記事]
https://dev.to/nabbisen/webassembly--3385
Doom3のデモ
https://wasm.continuation-labs.com/d3demo/

24. Thank you for your kind attention
ご清聴ありがとうございました！