Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie WebAssemblyの紹介
Ähnlich wie WebAssemblyの紹介 (20)
WebAssemblyの紹介
- 3. 今日話すこと 3
- 5. 目次 1. 何故WebAssemblyが必要とされるのか 2. WebAssemblyとは何か 3. Rust+WebAssemblyの始め方 5
- 18. なるほど 18
- 19. 皆さんはこう思っているはず 19
- 21. とりあえず触ってみたい 21
- 22. でも触り方が分からない… 22
- 25. WebAssembly 開発環境構築の本 Rust を用いたWebAssembly の開発環境を構築す る手法を紹介する電子書籍 ハマりポイントの紹介 モジュールバンドラとの連携 関連ツールの紹介 私が書きました JSer.info でも紹介された 今日は書籍の内容を掻い摘んでに紹介 25
- 27. Rustのセットアップ rustupをインストールするとコンパイラなどのツ ール一式が揃う ## Rust をインストール $ curl https://sh.rustup.rs -sSf | sh $ export PATH="$HOME/.cargo/bin:$PATH" ## WebAssembly へのコンパイル機能をインストール $ rustup target add wasm32-unknown-unknown 27
- 28. プロジェクトを作成 cargo new --lib でRust のライブラリ用のプロジェ クトテンプレートを作成 Cargo.toml : プロジェクトの設定ファイル src/lib.rs : エントリポイント $ cargo new --lib hello-wasm $ tree hello-wasm hello-wasm ├── Cargo.toml └── src └── lib.rs 28
- 29. WebAssembly向けの設定を追加する 生成されるバイナリにはメタデータが含まれる 他のRustプログラムから利用される時に利用さ れる 今回はwasmバイナリはJSからのみ利用されるので, メタデータを付けないよう cdylib を設定 [package] name = "hello-wasm" version = "0.1.0" authors = ["mizdra <pp.mizdra@gmail.com>"] [lib] crate-type = ["cdylib"] 29
- 30. Rustを書く 2 つの符号付き32bit 整数を引数として受け取り, その和を返す関数 pub キーワードで外部に関数を公開 /src/lib.rs #[no_mangle] pub fn add(a: i32, b: i32) -> i32 { a + b } 30
- 31. #[no_mangle] について アトリビュート ブロックやメソッドなどを修飾する構文 「Rustコンパイラに次の関数の名前をマングリン グせずにコンパイルせよ」と指示 JavaScript から add という名前で関数にアクセス できるようになる 31
- 32. コンパイルする cargo build コマンドを使う --target で生成するバイナリの種類をwasmに指定 release は最適化オプション $ cargo build --target=wasm32-unknown-unknown --release $ /target/wasm32-unknown-unknown/release/hello_wasm.wasm 32
- 33. JavaScriptからwasmを利用する /index.html <!DOCTYPE html> <title>Hello, WebAssembly!</title> <script> const wasm = `./target/wasm32-unknown-unknown/release /wasm_dev_book_hello_wasm.wasm` fetch(wasm) .then(response => response.arrayBuffer()) .then(bytes => WebAssembly.instantiate(bytes, {})) .then(results => console.log(results.instance.exports.add(1, 2)) ) </script> 33
- 34. 34
- 35. 35
- 36. 36
- 37. 37
- 38. 38
- 42. 実行 HTTPサーバを立てて index.html にアクセス $ npx http-server . $ open http://127.0.0.1:8080 42
- 43. 43
- 44. 動いた 44
- 45. 実際どれくらい速いの? 45
- 47. まとめ 47