wasm完全に理解した（い）

wasm 完全に理解した（い） エンジニア達の「完全に理解した」 2024/08/23 #完全に理解した Talk ふみふみ X: @2323_code GitHub: 2323-code Talk #56

対象者 Rust 読めない Wasm 知らない、使ったことない

目的 Wasm は便利 Java Script と他の言語を組み合わせて使える と認識して帰ってもらうこと

自己紹介：ふみふみ、と申します。 Web エンジニアしながら、 RustLadies」という女性 Rustacean コミュニティを運営しています。 普段は 「

wasm とは なんか Rust で使える技術らしい。 文献をあさってみる

WebAssembly.org https://webassembly.org/ WebAssembly (略称 Wasm ) は、スタックベースの仮想マシン用のバイナリ命令形 式です。Wasm は、プログラミング言語のポータブルなコンパイル ターゲットと して設計されており、クライアントおよびサーバー アプリケーションを Web 上で 展開できるようにします。

• https://webassembly.org/

MDN WebAssembly の概要 - WebAssembly | MDN WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォー マンス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、 C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象となるように 設計されています。 ウェブ上で動作するクライアントアプリで従来は実現できなかった、ネイティブ 水準の速度で複数の言語で記述されたコードをウェブ上で動作させる方法を提供 します。

• https://developer.mozilla.org/ja/docs/WebAssembly/Concepts

つまり Wasm とは WebAssembly（略称：Wasm） とは、C、C++、Rust などを Web ブラウザ上で実 行できるコードのこと。 WebAssembly モジュールをウェブアプリに組み込んで、JavaScript 経由で他の場 所から利用できる ...らしい。

何が嬉しいのか 参考： WebAssembly の概要 - WebAssembly | MDN 高速、効率的、ポータブル 異なるプラットフォーム間で使える 機械語並の速さで実行可能 可読性もある 人が読めるテキスト形式がある ＝デバッグできる など （ Wasm は絶賛仕様策定中）

• https://developer.mozilla.org/ja/docs/WebAssembly/Concepts

機械語？ネイティブ？ - IT 用語辞典 e-Words ネイティブコード（native code）とは、コンピュータの CPU（MPU/マイクロプロ ネイティブコードとは 意味をわかりやすく セッサ）が理解できる形式で記述されたコンピュータプログラム。プロセッサに 対する命令の仕様を定義した機械語（マシン語）で書かれており、人間が直接読 み書きすることは困難である。

• https://e-words.jp/w/ネイティブコード.html

つまり何が嬉しいの？ 機械語並みの速さを実現できる でも人間もちゃんと読める

何ができるのか Rust から WebAssembly にコンパイル - WebAssembly | MDN アプリケーション全体の構築 ウェブアプリ全体を ベースで構築する Rust ex; Dioxus | An elegant GUI library for Rust アプリケーションの一部の構築 既存の フロントエンドの内部で JavaScript Rust を使用する TypeScript によく似た AssemblyScript を用いて、 WebAssembly バイナリーに 出力もできる

• https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_Wasm
• https://dioxuslabs.com/
• https://www.assemblyscript.org/

実際にやってみる Rust Dioxus Rust のライブラリ React コンポーネントのような物を Rust でかける

コード
use dioxus::prelude::*;
fn main() {
launch(App);
}
pub fn App() -> Element {
rsx! { StoryListing {} }
}
fn StoryListing() -> Element {
let title = "タイトル";
let by = "ぴよぴよ";
let score = 0;
let time = chrono::Utc::now();
let comments = "comments";
rsx! {
div { padding: " 1.5rem ", position: " relative ",
"{title} by {by} ({score}) {time} {comments}"
}
}
}

解説します

main() use はライブラリの読み込み App コンポーネントを main() 関数で呼び出し use dioxus::prelude::*; fn main() { launch(App); }

App() App コンポーネント StoryListing というコンポーネントを返すだけ pub fn App() -> Element { rsx! { StoryListing {} } }

StoryListing()
コンポーネントの本体
スタイリングされた div タグを返すだけ
div タグの中身は変数で定義した内容
fn StoryListing() -> Element {
let title = "タイトル";
let by = "ぴよぴよ";
let score = 0;
let time = chrono::Utc::now();
let comments = "comments";

}

rsx! {
div { padding: " 1.5rem ", position: " relative ",
"{title} by {by} ({score}) {time} {comments}"
}
}

結果

まとめ wasm は Web Assembly の略 機械語並みの速さで実行できる Web アプリケーションを作れる

参考文献 - ネイティブコードとは 意味をわかりやすく WebAssembly WebAssembly の概要 - WebAssembly | MDN Wasm と Docker の比較 | Docker - IT 用語辞典 e-Words

• https://e-words.jp/w/ネイティブコード.html
• https://webassembly.org/
• https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
• https://www.docker.com/ja-jp/blog/wasm-vs-docker/

Wasm 何もわからない ご清聴ありがとうございました！