【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ

04:00 PM - 04:40 PM
Tetsuro Takao
Blazor WebAssemblyと
JavaScriptのインターオペラビリティ

Microsoft Developers Day 2022.02.03
Profile
システム構築のプロセス評価、改
善、策定、開発フレームワークの設
計、実装管理、プリセールスやプロ
ジェクトの立ち上げなど
ブログ : http://blog.processtune.com
プロフィール : Facebook, Twitter or MVP
コミュニティ : .NETラボの運営スタッフ
Microsoft MVP : July 2010 ～ Jun 2022
Current expertise : MVP for Developer Technologies

1
2
3
4
Agenda
Microsoft Developers Day 2022.02.03
04:00 PM - 04:40 PM
WebAssemblyとは
Azure Static Web Apps
エコシステムの作成例
JavaScriptとの相互運用

Microsoft Developers Day 2022.02.03 セクション1
WebAssemblyとは

WebAssemblyが動くしくみ
セクション1 : WebAssemblyとは
X86, 64, Arm,
RISC, …
IDE
Compiler
ActionScript, Ada, C#, Common Lisp,
PicoLisp, Crystal, CUDA, D, Delphi,
Dylan, Forth, Fortran, Graphical G,
Halide, Haskell, Java bytecode, Julia,
Kotlin, Lua, Objective-C, OpenCL,
PostgreSQL's SQL and PLpgSQL, Ruby,
Rust, Scala, Swift, XC, Xojo and Zig.
プログラム
Mono（includes Roslyn）
Mono LLVM, Clang, Gollvm
rustc_codegen_llvm2
rustc_codegen_cranelift
GCC（G++, GCJ, GNAT）
フロントエンド
LLVM※, Cranelift
Singlepass
GCC（ツールの一部分）
バックエンド
Emscripten, Cloud ABI
TynyGo
WASMターゲット
なバックエンド
Node.js 、Wasmtime 、Wasmer
Lucet、WebAssembly Micro Runtime
WAVM、 Wasm3
(Portable WebAssembly system interface)
Runtime on Browser
マルチ・プラットフォーム
WebAssembly JavaScript API
JavaScript
Process
WASM
Browser
(WebAssembly system interface)
(WebAssembly)
※Low-level Virtual Machine
WebAssembly
Language
Go
Compile
Gollvm
Includes
WebAssembly
Runtime
JavaScript
System call
Runtime
C/C++
System call
Language
Go
Compile
Gollvm
Runtime
LLVM
System call
WASM
PWSIX

WebAssemblyの役割
セクション1 : WebAssemblyとは
X86, 64, Arm,
RISC, …
IDE
Compiler
ActionScript, Ada, C#, Common Lisp,
PicoLisp, Crystal, CUDA, D, Delphi,
Dylan, Forth, Fortran, Graphical G,
Halide, Haskell, Java bytecode, Julia,
Kotlin, Lua, Objective-C, OpenCL,
PostgreSQL's SQL and PLpgSQL, Ruby,
Rust, Scala, Swift, XC, Xojo and Zig.
プログラム
Mono（includes Roslyn）
Mono LLVM, Clang, Gollvm
rustc_codegen_llvm2
rustc_codegen_cranelift
GCC（G++, GCJ, GNAT）
フロントエンド
LLVM※, Cranelift
Singlepass
GCC（ツールの一部分）
バックエンド
Emscripten, Cloud ABI
TynyGo
WASMターゲット
なバックエンド
Node.js 、Wasmtime 、Wasmer
Lucet、WebAssembly Micro Runtime
WAVM、 Wasm3
(Portable WebAssembly system interface)
PWSIX
Runtime on Browser
マルチ・プラットフォーム
WASM
WebAssembly JavaScript API
JavaScript
Process
WASM
Browser
(WebAssembly system interface)
(WebAssembly)
※Low-level Virtual Machine
WebAssembly
Language
Go
Compile
Gollvm
Includes
WebAssembly
Runtime
JavaScript
System call
Runtime
C/C++
System call
Language
Go
Compile
Gollvm
Runtime
LLVM
System call
WebAssemblyは
1. 既存機能をWebで再利用
2. さまざまなアーキテクチャで形成される巨大なエコシステムのパズル
本日のお話は、WebAssemblyというアーキテクチャがパズルとしての
役割を果たして、JavaScriptとRust、C#を相互運用した巨大なエコ
システムを形成する例を解説します。

エコシステム
CD/CIレイヤー
エコシステム形成（仮想化）
セクション2 : Azure Static Web Apps
Azure
C# Ecosystem
Container
Rust Ecosystem
On-premise
JavaScript Ecosystem
WebAssembly
WebAssembly
System Interface
WebAssembly
Blazor WebAssembly
MongoDB
Azure
Storage
相互運用アーキテクチャ
Node.js + Express
Web app
development environment
C#
Web mashup
Rust
Stable function & data
storage
外部APIをマッシュアップして
スタティックコンテンツを提供
するAzure Webアプリ
メッシュエンドポイントを形成
安定稼働が検証できているコ
ンポーネント化された既存のプ
ログラム・ナレッジリソース
開発が常に進行している継
続的インテグレーション開発
環境

CD/CIレイヤー
外部APIを利用するAzure Static Web Appを作成する
Azure
C# Ecosystem
Container
Rust Ecosystem
On-premise
WebAssembly
WebAssembly
System Interface
WebAssembly
Blazor WebAssembly
MongoDB
Azure
Storage
Node.js + Express
Web app
C#
Web mashup
Rust
storage
環境
Azure Static Web App

WebAssembly
WebAssemblyのホストとグルーコード
Azure
C# Ecosystem
Blazor WebAssembly
Azure
Storage
HTML、Images、CSS
JavaScript、TypeScript
Geolocation API、MediaDevices、
Storage API…
UIスレッド
.NETランタイム
blazor.webassembly.js
依存
ファイル
HTML、Images、CSS
JavaScript、TypeScript
Geolocation API、MediaDevices、
Storage API…
UIスレッド
Rustランタイム
%appname%_bg.wasm
%appname%_bg.wasm.d.ts
%appname%.d.js
%appname%.js
glue code

テンプレートを使用したBlazor WebAssemblyの作成
← dotnet new --list
↓ dotnet new blazorwasm -h

Visual Studio Codeで作業
フォルダーを開くダイアログボックスで作業ディレクトリを
作成して「Ctrl+@」でターミナルを開き「dotnet new
blazorwasm」でプロジェクトを作成します。
ファイルが自動生成されます

ターミナルから実行
「dotnet run」で実行、ブラウザで確認

FreeのSVGアイコンを収集する

GitHubの準備
https://git-scm.com/downloads https://cli.github.com/

GitHubの準備

GitHubへプッシュ

カスタムドメインの作成

編集とプッシュ

エコシステムの作成例

CD/CIレイヤー
セルフWebホストするRust WebAssemblyを作成する
セクション3 : エコシステムの作成例
Azure
C# Ecosystem
Container
Rust Ecosystem
On-premise
WebAssembly
WebAssembly
System Interface
WebAssembly
Blazor WebAssembly
MongoDB
Azure
Storage
Node.js + Express
Web app
C#
Web mashup
Rust
storage
環境
Rust Web API

Visual Studio Code Extensionsの準備
Rust
Teams Toolkit
Deploy Teams apps
with Microsoft Graph,
and in Azure and M365
Create and manage
Azure Static Web Apps directly
Remote Development
Remote SSH
Remote Containers
Remote WSL
Docker
Containerization tool
Language support
Thunder Client
API Client Extention
MongoDB for VS Code
for working with MongoDB,
whether your own instance or in MongoDB Atlas.
Microsoft.AspNetCore.Ra
zor.VSCode.BlazorWasm
DebuggingExtension

稼働検証が終わっているRustを再利用する
Container
Rust Ecosystem
Rust
storage

コンポーネント化とデバッグモード
Container
Rust Ecosystem
Rust
storage

リリース実行時にWeb出力する
Container
Rust Ecosystem
Rust
storage

RustのWeb AssemblyをAPIでサービスする
Container
Rust Ecosystem
WebAssembly
WebAssembly
MongoDB
Rust
storage
Rustで実装
他Webサービス
!Point
RustはWebサービス構築に向いてない
と言われています。.NETなどに比べ認
証、ルーティング、SDKなどが充実して
いないなど…
マイクロサービスでは各サービスにサイド
カーを用意したりサービスメッシュであれ
ばメッシュエンドポイントに認証やロギン
グロードバランシングなどのデータプレーン
が配置されますので、マイクロサービスに
おけるサーバーレス・ファンクションを提供
するためのWeb API機能であれば
Rustで十分作れます。

RustのWeb AssemblyをAPIでサービスする
Container
Rust Ecosystem
WebAssembly
WebAssembly
MongoDB
Rust
storage

WSLとdocker
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo "deb [arch=arm64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] ¥
https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
$ sudo apt-get install apt-transport-https ca-certificates curl gnupg lsb-release
初めてWSLを使う場合はツール群をインストール
docker ce（community edition）がインストールされていない場合
GNU Privacy Guard (GnuPG, GPG)キーの取得と配置
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io
$ apt-cache madison docker-ce
インストールできるdocker ceの確認
$ sudo apt-get install docker-ce=5:20.10.8~3-0~ubuntu-focal docker-ce-cli=5:20.10.8~3-0~ubuntu-focal containerd.io
docker ceのインストール

Ubuntuでdocker環境を作成する（Armの方向け）
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo "deb [arch=arm64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] ¥
https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
$ sudo apt-get install apt-transport-https ca-certificates curl gnupg lsb-release
初めてWSLを使う場合はツール群をインストール
docker ce（community edition）がインストールされていない場合
GNU Privacy Guard (GnuPG, GPG)キーの取得と配置
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io
$ apt-cache madison docker-ce
インストールできるdocker ceの確認
$ sudo apt-get install docker-ce=5:20.10.8~3-0~ubuntu-focal docker-ce-cli=5:20.10.8~3-0~ubuntu-focal containerd.io
docker ceのインストール

MongoDBオフィシャル・イメージにRust追加
$ sudo docker pull mongo
$ sudo docker run -d -p 7878:7878 -p 27017:27017 --init --name svgqrcodedb mongo:latest
$ sudo docker exec -it svgqrcodedb /bin/bash
# echo "nameserver 8.8.8.8" | tee /etc/resolv.conf > /dev/null
# apt update && apt upgrade -y
# apt install curl
# curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
--インストーラー
>[return] --リターンで既定のインストールを選択
--インストール終了後、Rustランタイム（&パッケージマネージャー）のパスを設定
# source $HOME/.cargo/env
--コンパイラーインストール
# apt install build-essential
>[y] --yでインストールを開始
--コンパイラーインストール終了
# mkdir /home/rust
# mkdir /home/rust/QRCodeCreation
# chmod 777 /home/rust/QRCodeCreation
# cd /home/rust/QRCodeCreation
DockerのMongoDBオフィシャルイメージ
以降は以下の方法でプルグラムを作成できます
1.GitHubでLinux側へ共有
2.Visual Studio Code（要Docker Desktop）で編集
3.ソースをコピペ（Windows Arm向け）
ポート2つ持つコンテナを起動
Bashでコンテナ内を操作
Rustのインストール

Rustの実行とWindows側のプログラムの移植
# mkdir src
# cd src
# touch main.rs
# apt install vim
--インストーラー
>[y] --yでインストールを選択
--インストール終了
# vim main.rs
--vim
~[i] --iで挿入モード編集開始
fn main() {
println!("Hello World!");
}
~[esc][:][w][enter] --[:][w][enter]で保存
~[:][q][enter] --[:][q][enter]で終了
--vim終了後、コンパイルと実行
# rustc main.rs
# ./main
# vim main.rs
…--main.rsとCargo.tomlの中身をvimでコピーする
/home/rust/QRCodeCreation# cargo run

ブラウザでQRコードのWebAssemblyを表示する
$ sudo docker run -d --network host -p 7878:7878 -p 27017:27017 --init --name svgqrcodedb svgqrcodedb:v0.2
$ sudo docker exec -it svgqrcodedb /bin/bash
# apt update && apt upgrade -y
--# apt install pkg-config（入っていなかったら入れる）
# rustup target add aarch64-unknown-linux-gnu
# rustup toolchain install stable-aarch64-unknown-linux-gnu
# cd /home/rust/QRCodeCreation
--以下のどちらかを実行（この段階ではWebAssemblyではない。以下はCD/CIの運用設計によって変わる）
# cargo build --bin create_qrcode_svg --target aarch64-unknown-linux-gnu --release
or
# rustup default stable-aarch64-unknown-linux-gnu
# cargo build --bin create_qrcode_svg --release
--
# cargo run --release

CD/CIレイヤー
JavaScriptとの通信を作成する
セクション4 : JavaScriptとの相互運用
Azure
C# Ecosystem
Container
Rust Ecosystem
On-premise
WebAssembly
WebAssembly
System Interface
WebAssembly
Blazor WebAssembly
MongoDB
Azure
Storage
Node.js + Express
Web app
C#
Web mashup
Rust
storage
環境
既存JavaScriptコード
ライブラリ等

WebAssemblyをJavaScriptから操作する

相互運用

既存のJavaScriptの資産がある場合活用することが可能
DOMの操作（特にShadow DOM）の操作は
JavaScriptに任せるべき
その多くは、業務のステートをコミットするまでの洞察や試行
錯誤、情報収集など、エッジ・サイドでのユーザーステート
（ユーザーエクスペリエンスのためのビューステートを含む）の
ための操作であり、サービスサイドとの通信を必要としない。
高度に計画された運用設計では、ユーザーストーリーごとに
マイクロサービスを計画できるドメイン・ドリブン・デザインなど
の設計手法が多く存在し、ステート管理の設計によって
JavaScriptとWebAssemblyの相互運用が必要となる
シーンも増える

参考リンク
条件付きコンパイル
https://doc.rust-jp.rs/the-rust-programming-language-ja/1.9/book/conditional-compilation.html
The js-sys
https://rustwasm.github.io/wasm-bindgen/contributing/js-sys/index.html
Building a Single-Threaded Web Server：The Rust Programming Language
https://doc.rust-lang.org/book/ch20-01-single-threaded.html
RustからWebAssembly (wasm)を生成してJavaScriptとブリッジ通信してみる
https://dev.classmethod.jp/articles/rust-webassembly-javascript/
rustwasm：crates.io
https://crates.io/teams/github:rustwasm:core
Crate web_sys
https://rustwasm.github.io/wasm-bindgen/api/web_sys/
wabt：GitHub
https://github.com/webassembly/wabt
Platform Support：The rustc book
https://doc.rust-lang.org/rustc/platform-support.html

◼ 本書に記載した情報は、本書各項目に関する発行日現在の Microsoft の見解を表明するものです。Microsoftは絶えず変化する市場に対応しなければならないため、ここに記載した情報に
対していかなる責務を負うものではなく、提示された情報の信憑性については保証できません。
◼ 本書は情報提供のみを目的としています。 Microsoft は、明示的または暗示的を問わず、本書にいかなる保証も与えるものではありません。
◼ すべての当該著作権法を遵守することはお客様の責務です。Microsoftの書面による明確な許可なく、本書の如何なる部分についても、転載や検索システムへの格納または挿入を行うこと
は、どのような形式または手段（電子的、機械的、複写、レコーディング、その他）、および目的であっても禁じられています。これらは著作権保護された権利を制限するものではあり
ません。
◼ Microsoftは、本書の内容を保護する特許、特許出願書、商標、著作権、またはその他の知的財産権を保有する場合があります。Microsoftから書面によるライセンス契約が明確に供給さ
れる場合を除いて、本書の提供はこれらの特許、商標、著作権、またはその他の知的財産へのライセンスを与えるものではありません。
◼ Microsoft, Windows, その他本文中に登場した各製品名は、Microsoft Corporation の米国およびその他の国における登録商標または商標です。
その他、記載されている会社名および製品名は、一般に各社の商標です。

【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ

More Related Content

What's hot (20)

Similar to 【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ (20)

More from 日本マイクロソフト株式会社 (20)

Recently uploaded (7)

【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ