---
title: wasm完全に理解した（い）
tags: 
author: [ふみふみ](https://www.docswell.com/user/2323code)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YJ6YG2LP7V.jpg?width=480
description: 「エンジニア達の「完全に理解した」Talk　#56」さんにて発表させていただいた際の資料です！  https://easy2.connpass.com/event/326820/  YouTube https://www.youtube.com/live/IWG4yq46VCc?si=Q34I-ILWolt-FF6b
published: August 27, 24
canonical: https://www.docswell.com/s/2323code/K3G82E-2024-08-27-215653
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YJ6YG2LP7V.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GJ5GV21PJ4.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LE3RDK1675.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/8EDYP3XMEG.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/V7P6N4PQJ8.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/2JV3KX2PEQ.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/5EG3QVRQ7L.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4JQ5K6VW7P.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/K749P4M1E1.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LJ1K94857G.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GJWDQXZW72.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4EZGW612J3.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/Y76YG2W6EV.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/G75GV2M574.jpg)

コード
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}"
}
}
}


# Page. 15

![Page Image](https://bcdn.docswell.com/page/9J2Y349GJR.jpg)

解説します


# Page. 16

![Page Image](https://bcdn.docswell.com/page/DEYG1M4GEM.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/VJNG2WY878.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/YE9W1XPXE3.jpg)

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}"
}
}


# Page. 19

![Page Image](https://bcdn.docswell.com/page/GE8N42D97D.jpg)

結果


# Page. 20

![Page Image](https://bcdn.docswell.com/page/LELP62MM7R.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/4JM458Y67W.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/PJRW359N79.jpg)

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