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

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

© 2024 RightTouch Inc.　|　Confidential 3 会社紹介 
 

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

© 2024 RightTouch Inc.　|　Confidential Wasmを用いて TypeScriptから使う 
 プログラム
 
 Wasm
 
 TypeScript
 (JavaScript)
 
 5 

© 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/
 
 

© 2024 RightTouch Inc.　|　Confidential Wasm Component Model
 ● Wasm Component Modelでは、.wasmファイルにインターフェース定義を埋め込むことで、 
 .wasmファイルを通じてインターフェース定義を共有できる 
 ● そのインターフェースを記述するのに用いられるのが、 WIT (Wasm Interface Types) と
 呼ばれるインターフェース記述言語 
 
 ● Wasm Component Model 登場以前は、.wasmファイルを通じて、
 提供側と利用側でインターフェースをほとんど共有できていなかった 
 ● バイト列でやりとりされ、そのエンコード・デコードは 
 それぞれのコードを書く人が気にする必要があった 
 7 

© 2024 RightTouch Inc.　|　Confidential jco
 ● Wasmコンポーネントから、 TypeScript用のコードを生成するツール 
 ○ https://github.com/bytecodealliance/jco
 ○ 主な生成物
 ■ 型定義ファイル (.d.ts)
 ■ Wasm呼び出し用のグルーコード (.js) 
 
 
 
 
 
 8 Wasm
 
 TypeScript
 (JavaScript)
 
 jco
 
 

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

© 2024 RightTouch Inc.　|　Confidential 実際にやってみよう 
 ● .wit ファイルにインターフェース定義を書く 
 10 

© 2024 RightTouch Inc.　|　Confidential 実際にやってみよう 
 ● rustで関数を実装する
 ● wit-bindgen を利用 (https://github.com/bytecodealliance/wit-bindgen) 
 ● wit-bindgen の generate! マクロで生成されるtrait (今回はGuest) を実装すればOK
 ● cargo でコンパイル
 .wasmファイルがつくられる 
 11 

© 2024 RightTouch Inc.　|　Confidential 実際にやってみよう 
 ● jcoでコード生成
 
 
 
 
 
 ● .js と .d.ts が生成されている
 12 

© 2024 RightTouch Inc.　|　Confidential 実際にやってみよう 
 ● あとはTypeScriptからインポートして使うだけ 
 13 

© 2024 RightTouch Inc.　|　Confidential まとめ
 ● Wasmコンポーネントからjcoでコード生成して、TypeScriptから利用する流れを紹介 
 ● ライブラリ制作者がWITも書いて、Wasmコンポーネントを提供する未来も 
 ○ Wasmコンポーネントのレジストリもある (https://github.com/bytecodealliance/registry)
 ● ただ、現状だとWasmにコンパイルができない（しづらい）言語やコードも多い 
 ● Wasm用に最適化されていなくて、パフォーマンス等で見劣りする場合もある 
 
 14