今まで公開してきた Deno Third Party Modules -- Deno での WebAssembly の利用の話 --
0 likes•834 views
Deno での WebAssembly の利用 deno.land/x での公開について
今まで公開してきた Deno Third Party Modules -- Deno での WebAssembly の利用の話 --
- 1. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. toranoana.deno #0 虎の穴ラボ 奥谷 一陽 今まで公開してきた Deno Third Party Modules -- Deno での WebAssembly の利用の話 --
- 2. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. 自己紹介 奥谷 一陽 所属：虎の穴ラボ株式会社 担当：とらコインSHOPなど新規事業系の開発 おすすめコンテンツ： 『お耳に合いましたら』 『機界戦隊ゼンカイジャー』 Twitter：@okutann88
- 3. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. 今までに公開した Deno Third Party Modules
- 4. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. 今までに公開した Deno Third Party Modules asset_builder base64 エンコードしたファイルを埋め込んだ、 JavaScript ファイルを作るツール deno-csrf - Rust のrust-csrf クレートを WebAssembly を介して Denoから使用できるようにしたモジュール js_with_embedded_wasm - wasm-bindgen で作られた WebAssembly を埋め込んだ JavaScript ファイルを作るツール 今日の主な話
- 5. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. WebAssembly はモダンなウェブブラウザーで実行できる新しいタイプのコードで す。ネイティブに近いパフォーマンスで動作するコンパクトなバイナリー形式の低 レベルなアセンブリ風言語です。さらに、 C/C++ や Rust のような言語のコンパイ ル対象となって、それらの言語をウェブ上で実行することができます。 WebAssembly は JavaScript と並行して動作するように設計されているため、両方 を連携させることができます。 (MDNより引用) WebAssembly とは？ 要するに、 JavaScript と連携してバイナリ形式のプログラムをブラウザで使える 何がいいのか？ C、C++ 、Rustなどのライブラリ資産をブラウザで動作させられる
- 6. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. deno-csrf で使った WebAssembly の作り方 Rust で、WebAssembly を作成するに当たり、 読み込むためのJavaScript やTypeScript 型定義 なども作成してくれる。 Deno 向けのオプションもある。 ＝＞GOOD！ wasm-bindgenを使う
- 7. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. しかし！ 生成されたJavaScriptは.... Deno.readFileSync を使っており、ネットワークから読み込むことを前提にして いない！ deno.land/x で公開上の障害に! でも、deno.land/x で公開したい！
- 8. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. Deno 公式のスタンスは？ 3種類の方法を案内 1. Webassembly をUint8Array に変換して、ソースコードに載せる https://deno.land/manual/getting_started/webassembly より引用 2. Deno.readFile を使う(wasm-bindgen で採用されている方針) 3. WebAssembly.instantiateStreaming を使う ホストするサーバが MIME type application/wasm に対応が必須！
- 9. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. Deno 公式のスタンスは？ 3種類の方法を案内 1. Webassembly をUint8Array に変換して、ソースコードに載せる https://deno.land/manual/getting_started/webassembly より引用 2. Deno.readFile を使う(wasm-bindgen で採用されている方針) 3. WebAssembly.instantiateStreaming を使う ホストするサーバが MIME type application/wasm に対応が必須！ deno-csrf で採用した方法
- 10. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. Webassembly を Uint8Array に変換して、ソースコードに載せる 方針は立ったが、探してはみたものの作成するツールは無い！? なので作りました！
- 11. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. js_with_embedded_wasm を作りました wasm-bindgen で作られた WebAssembly を埋め込んだ JavaScript ファイルを作るツール https://deno.land/x/[email protected]
- 12. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. js_with_embedded_wasm を作りました 変換 ＝＞ WebAssembly を import で扱える JavaScript として配布できる！ wasm-bindgen で生成されたコード js_with_embedded_wasm で変換したコード
- 13. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. まとめ ・Deno で WebAssembly を使う(呼び出す)事自体は、かなり簡単 ・WebAssembly を作成する環境もかなり整っていると思う ・しかし、deno.land/x で配布するには超える壁がある ・ツールを作ったので、ぜひWebAssemblyで、Denoを拡張してください
- 14. Copyright (C) 2021 Toranoana Inc. All Rights Reserved. ありがとうございました！