TSKaigi2025_Wasmを用いて他言語資産をTypeScriptで活用する.pdf

Transcript

1. Wasmを用いて他言語資産を TypeScriptで活用する
 TSKaigi 2025
 2025/5/23 
 
 株式会社RightTouch
 赤木 勇統

2. © 2024 RightTouch Inc.　|　Confidential 自己紹介 
 https://2025.tskaigi.org/talks/yutoak
 
 2
3. © 2024 RightTouch Inc.　|　Confidential 3 会社紹介 

4. © 2024 RightTouch Inc.　|　Confidential TypeScript以外の言語で書いたプログラムを TypeScriptで使いたい
 4 モチベーション 

5. © 2024 RightTouch Inc.　|　Confidential Wasmを用いて TypeScriptから使う 
 プログラム
 
 Wasm
 
 TypeScript
 (JavaScript)
 
 5
6. © 2024 RightTouch Inc.　|　Confidential Wasm
 WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマンス向上を提供する新しい種 類のコードです。基本的に直接記述ではなく、 C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象と なるように設計されています。 
 
 
 
 
 6 WebAssembly の概要
 https://developer.mozilla.org/ja/docs/WebAssembly/Guides/Concepts
 
 WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.
 
 
 
 
 
 
 WebAssembly
 https://webassembly.org/
 

7. © 2024 RightTouch Inc.　|　Confidential Wasm Component Model
 • Wasm Component Modelでは、.wasmファイルにインターフェース定義を埋め込むことで、 
 .wasmファイルを通じてインターフェース定義を共有できる 
 • そのインターフェースを記述するのに用いられるのが、 WIT (Wasm Interface Types) と
 呼ばれるインターフェース記述言語 
 
 • Wasm Component Model 登場以前は、.wasmファイルを通じて、
 提供側と利用側でインターフェースをほとんど共有できていなかった 
 • バイト列でやりとりされ、そのエンコード・デコードは 
 それぞれのコードを書く人が気にする必要があった 
 7
8. © 2024 RightTouch Inc.　|　Confidential jco
 • Wasmコンポーネントから、 TypeScript用のコードを生成するツール 
 ◦ https://github.com/bytecodealliance/jco
 ◦ 主な生成物
 ▪ 型定義ファイル (.d.ts)
 ▪ Wasm呼び出し用のグルーコード (.js) 
 
 
 
 
 
 8 Wasm
 
 TypeScript
 (JavaScript)
 
 jco
 

9. © 2024 RightTouch Inc.　|　Confidential 実際にやってみよう 
 • ここでは、文字列を受け取って加工し、新しい文字列を返す hello という関数を考える
 fn hello(name: String) -> String
 • WIT定義 → Rustで関数実装 → (cargo) → Wasmコンポーネント → (jco) → TS (JS)
 9 プログラム
 
 Wasm
 
 TypeScript
 (JavaScript)
 

10. © 2024 RightTouch Inc.　|　Confidential 実際にやってみよう 
 • .wit ファイルにインターフェース定義を書く 
 10
11. © 2024 RightTouch Inc.　|　Confidential 実際にやってみよう 
 • rustで関数を実装する
 • wit-bindgen を利用 (https://github.com/bytecodealliance/wit-bindgen) 
 • wit-bindgen の generate! マクロで生成されるtrait (今回はGuest) を実装すればOK
 • cargo でコンパイル
 .wasmファイルがつくられる 
 11
12. © 2024 RightTouch Inc.　|　Confidential 実際にやってみよう 
 • jcoでコード生成
 
 
 
 
 
 • .js と .d.ts が生成されている
 12
13. © 2024 RightTouch Inc.　|　Confidential 実際にやってみよう 
 • あとはTypeScriptからインポートして使うだけ 
 13
14. © 2024 RightTouch Inc.　|　Confidential まとめ
 • Wasmコンポーネントからjcoでコード生成して、TypeScriptから利用する流れを紹介 
 • ライブラリ制作者がWITも書いて、Wasmコンポーネントを提供する未来も 
 ◦ Wasmコンポーネントのレジストリもある (https://github.com/bytecodealliance/registry)
 • ただ、現状だとWasmにコンパイルができない（しづらい）言語やコードも多い 
 • Wasm用に最適化されていなくて、パフォーマンス等で見劣りする場合もある 
 
 14