TypeScriptでWebAssemblyに入門しよう

Transcript

1. TypeScriptで WebAssemblyに入門しよう AssemblyScriptでwasmを生成してWebAssemblyに触れる 2024/02/21 kansai.ts#5
2. いづりょー #EngineeringManager #SoftwareEngineer #React #TypeScript #Rust入門中 #Sprocket #Web接客 X → @is_ryo bsky → @is-ryo.bsky.social
3. WebAssembly？ WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパ フォーマンス向上を提供する新しい種類のコードです。基本的に直接記述では なく、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象とな るように設計されています。 https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
4. JavaScriptでは処理速度が遅くてUXを大きく損なうような計算処理などを高 速化したいといった動機から生まれたもののようです。 https://developer.mozilla.org/ja/docs/WebAssembly/Concepts#we bassembly_%E3%81%AE%E7%9B%AE%E6%A8%99 WebAssembly？
5. 主要ブラウザーはWebAssemblyをサポートしていますので、このブラウザー だと動かないんじゃない？みたいな心配をしなくても大丈夫です。 https://caniuse.com/?search=wasm ブラウザごとのWebAssembly対応状況
6. WebAssemblyの目標 • 高速で、高効率であり、ポータブルであること • 可読性をもちデバッグ可能であること • 安全であること • ウェブを破壊しないこと https://developer.mozilla.org/ja/docs/WebAssembly/Concepts#we bassembly_%E3%81%AE%E7%9B%AE%E6%A8%99
7. • フロント側で重たい処理を実行したいとき • フロント側で並列実行をしたい処理があるとき • わざわざサーバーを介さずにフロントエンドで複雑な処理 をしたいとき • サーバ側の処理をそのままフロント側に移植したいとき WebAssemblyの使いどころ
8. • Webアプリへ組み込む • wasm runnerで様々な環境でWebAssemblyを実行す る ◦ 最近Rust製のwasm runnerが増えているらしい WebAssemblyの将来性
9. WebAssemblyがブラウザで動く仕組み 1. WebサーバーからHTMLなどと一緒にWebAssembly実行ファイルがダ ウンロードする 2. WebAssemblyJavaScriptAPIを使って、WebAssembly実行ファイルを 読み込み、WebAssembly仮想マシンの上でWebAssemblyインスタン スを生成する 3. WebAssemblyインスタンスに生えている関数をブラウザ上で実行する
10. WebAssemblyがブラウザで動く仕組み
11. グルーコード wasmをインポートして利用するためのコードを グルーコード と呼びま す。
12. WebAssemblyに入門するには？ MDNにも「C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対 象となるように設計されています。」と書かれているように、WebAssemblyを 入門しようと書籍を買ってみてると、大体CかC++のコードで入門をしていくとい うことが多いんだよな… と思っていたときに見つけたのが AssemblyScript でした！
13. AssemblyScript 🚀 TypeScriptを一定書くことができる人ならサクッと使い始めることができて、 WebAssemblyについても入門し始めることができるという代物です。 https://www.assemblyscript.org/
14. AssemblyScript 🚀 C や Rust の詳細を学ぶ必要なく、 TypeScript のような慣れ親しんだ言語 の快適さの中で WebAssembly を試したいウェブ開発者にとって、 AssemblyScript は最良の選択肢になるでしょう。 AssemblyScript は TypeScript の厳密なバージョンを WebAssembly にコンパイルし、ウェブ開 発者は Prettier、ESLint、VS Code IntelliSense など、使い慣れた TypeScript 互換のツールを引き続き使用することができます。 https://developer.mozilla.org/ja/docs/WebAssembly/Concepts#as semblyscript_%E3%81%AE%E4%BD%BF%E7%94%A8
15. AssemblyScript 🚀 要するに、 CとかC++とかRustとか知らなくても WebAssemblyを生成して動かすことができる ぞ！！！！ ということです。
16. AssemblyScript 🚀 フロントエンドエンジニアにとって嬉しいことがいくつかありま すので、そういう嬉しいポイントも含めて紹介していきます。
17. AssemblyScript サンプルコード
18. AssemblyScriptでコンパイルしたwasmの使い 方 ビルドしたものは build 以下に生成され、その中の release.js をインポートし て利用します。release.jsはグルーコードとしてwasmをインポートしていま す。また型情報も提供してくれます。
19. TypeScriptとの違い • 扱える型が違う ◦ https://www.assemblyscript.org/types.html • 基本的にanyやundefinedはない • 引数の型にObjectが使えない • などなど
20. まとめ • WebAssemblyはもうほとんどのブラウザ環境で使うことができる • 最近Rust製のwasm runnerが出てきているので、いろんなところで wasmを使うことができる未来が来るかも • 個人的にはDockerの代わりになる可能性もあると感じている • TypeScriptを知っていれば、AssemblyScriptでWebAssemblyに入門 することもできる • wasmは早い、安全、楽しい
21. Thanks!!!