TypeScriptエンジニアのためのWASMランタイム入門：AssemblyScriptから理解するメモリの実態（ayano）

TSKaigi2026のDay1 / 17:20 ~ 17:50 （Leveragesトラック）の発表資料です。

https://2026.tskaigi.org/talks/28

https://zenn.dev/yuki_ayano/articles/tech-ts-wasm-runtime-intro

--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

TypeScriptは高水準言語であり、その実行時のメモリ構造はJavaScriptエンジンに依存しています。そのため、通常はオブジェクトや配列がどのようにメモリ上に配置されているかを意識する機会はほとんどありません。本トークでは、TypeScriptに近い構文からWebAssemblyを生成するAssemblyScriptを題材に、「高水準なコードが低レイヤーの線形メモリにどのように配置されるか」を具体的に解説します。

特に以下にフォーカスします：

- WASMの線形メモリモデルの基本
- AssemblyScriptにおけるオブジェクトレイアウトの実態
- classインスタンスがどのようにメモリ上に配置されるか
- 配列（ArrayBuffer / TypedArray含む）の内部構造

Transcript

1. TypeScriptエンジニアのための WASMランタイム入門 ayano
2. TypeScriptではメモリを⾒ない TypeScriptでは p.x と書くだけで済むが、WASMでは「どのアドレスの何バイト ⽬を読むか」という話になる TypeScriptの場合 ➔ JavaScriptエンジン が よしなにする WASMの場合 ➔ 線形メモリ上のバイト列 として扱われる TSKaigi 2026@Day1 / 17:20 ~ 17:50 class Point { constructor( public x: number, public y: number, ) {} } const p = new Point(10, 20); 2
3. WASMの線形メモリモデルについて 「プログラムが利⽤する連続したフラットなバイト列のメモリ領域」で、オブ ジェクトも配列もこのバイト列のどこかに置かれ、読み書きされる 例）i32.load ;; あるアドレスから4バイト読んで i32 として扱う   i32.store ;; あるアドレスに i32 を4バイト書き込む TSKaigi 2026@Day1 / 17:20 ~ 17:50 const memory = instance.exports.memory as WebAssembly.Memory; const bytes = new Uint8Array(memory.buffer); 3
4. AssemblyScriptとは TypeScriptに近い構⽂でWASMを⽣成できる⾔語で、⾒た⽬はTypeScriptの 親戚ぽいが、実体としてはWASMのメモリモデルにかなり近い • TypeScriptよりも低レイヤーの型を明⽰的に扱う • オブジェクトや配列の実体が異なる TSKaigi 2026@Day1 / 17:20 ~ 17:50 export function add(a: i32, b: i32): i32 { return a + b; } 4
5. AssemblyScripとは TSKaigi 2026@Day1 / 17:20 ~ 17:50 class User { id: i32; score: f64; } TypeScriptに近い構⽂でWASMを⽣成できる⾔語で、⾒た⽬はTypeScriptの 親戚ぽいが、実体としてはWASMのメモリモデルにかなり近い • TypeScriptよりも低レイヤーの型を明⽰的に扱う • オブジェクトや配列の実体が異なる ◦ TypeScript ：JavaScriptエンジンのオブジェクトとして存在する ◦ AssemblyScript：AssemblyScriptのランタイムが管理する 5
6. オブジェクトは「ヘッダ + payload」 TypeScriptでは⾒えないが、AssemblyScriptではオブジェクトの前にランタイム 管理⽤の情報が存在する • AssemblyScriptの管理対象オブジェクトにはランタイム⽤ヘッダがある • GC情報、型ID、サイズなどがpayloadの前に置かれる • オブジェクト参照はヘッダではなくpayload先頭を指す TSKaigi 2026@Day1 / 17:20 ~ 17:50 +-----------+----------+-----------+--------+---------+------------------+ | mmInfo | gcInfo | gcInfo2 | rtId | rtSize | payload ... | +-----------+----------+-----------+--------+---------+------------------+ -20 -16 -12 -8 -4 0 6
7. classインスタンスのフィールド配置 vec.x は、低レイヤーでは i32.load(ptr + 0) のような読み取りとして理解できる TSKaigi 2026@Day1 / 17:20 ~ 17:50 7 class Vec2 { x: i32; y: i32; constructor(x: i32, y: i32) { this.x = x; this.y = y; } } export function makeVec2Ptr(x: i32, y: i32): usize { return changetype<usize>(new Vec2(x, y)); }
8. classインスタンスのフィールド配置 vec.x は、低レイヤーでは i32.load(ptr + 0) のような読み取りとして理解できる • classのフィールドはpayload内にオフセット付きで並ぶ • x: i32, y: i32 なら ptr + 0, ptr + 4 • フィールドアクセスは「参照 + オフセット + load」 TSKaigi 2026@Day1 / 17:20 ~ 17:50 8 +--------------------+---------------------+ | 0x11223344 | 0x55667788 | +--------------------+---------------------+ +0 +4 vec.x => i32.load(ptr + 0) vec.y => i32.load(ptr + 4)
9. パディング：ソースコード通りには詰まらない ⾼⽔準コードでは⾒えないが、低レイヤーではフィールド順や型サイズが実際の メモリ使⽤量に影響する TSKaigi 2026@Day1 / 17:20 ~ 17:50 9 class PadDemo { tag: u8; value: i32; constructor(tag: u8, value: i32) { this.tag = tag; this.value = value; }
10. パディング：ソースコード通りには詰まらない ⾼⽔準コードでは⾒えないが、低レイヤーではフィールド順や型サイズが実際の メモリ使⽤量に影響する • 低レイヤーのメモリレイアウトでは、型ごとに⾃然な境界に揃えるためのア ラインメントがあるから • ⾼⽔準なclassも、メモリ上では型サイズ‧オフセット‧paddingを持つ具体 的なレイアウトになる TSKaigi 2026@Day1 / 17:20 ~ 17:50 10 +-----------+--------------------+----------------+ | tag: u8 | padding | value: i32 | +-----------+--------------------+----------------+ +0 +1..+3 +4
11. ArrayBuffer / TypedArray / Array<T> の違い AssemblyScriptには、いくつか配列っぽいものがあり、バッファ参照や⻑さなど のメタデータが異なる TSKaigi 2026@Day1 / 17:20 ~ 17:50 11 種類 説明 ArrayBuffer 生のバイト列 TypedArray ArrayBufferへの型付きビュー Array<T> buffer, dataStart, byteLength, lengthを持つリッチな配列
12. ArrayBuffer / TypedArray / Array<T> の違い AssemblyScriptには、いくつか配列っぽいものがあり、バッファ参照や⻑さなど のメタデータが異なる TSKaigi 2026@Day1 / 17:20 ~ 17:50 12 ArrayBuffer +--------+--------+--------+--------+ | byte | byte | byte | byte | +--------+--------+--------+--------+ ArrayBuffer ➔ ペイロードはそのまま未型付けのデータ領域
13. ArrayBuffer / TypedArray / Array<T> の違い AssemblyScriptには、いくつか配列っぽいものがあり、バッファ参照や⻑さなど のメタデータが異なる TSKaigi 2026@Day1 / 17:20 ~ 17:50 13 TypedArray object +----------------+----------------+---------------------+ | buffer ref | dataStart | byteLength | +----------------+----------------+---------------------+ TypedArray ➔ ArrayBuffer を特定の型の連続データとして⾒れるもの
14. ArrayBuffer / TypedArray / Array<T> の違い AssemblyScriptには、いくつか配列っぽいものがあり、バッファ参照や⻑さなど のメタデータが異なる TSKaigi 2026@Day1 / 17:20 ~ 17:50 14 Array<T> object +----------------+------------+-----------------+----------+ | buffer ref | dataStart | byteLength | length | +--------------+--------------+-----------------+----------+ Array<T> ➔ TypedArray に近い情報に加えて、さらに length を持つ
15. まとめ：TypeScriptの抽象をバイト列として⾒る TypeScript⾵の⾼⽔準なコードも、WASMの視点では具体的なメモリアクセスと して⾒える • WASMのメモリは連続したバイト列 • AssemblyScriptの管理対象オブジェクトは、ランタイム⽤ヘッダ + payload を持つ • classのフィールドは、 payload内にオフセット付きで配置される • ArrayBuffer / TypedArray / Array<T> は、それぞれメモリ上での役割が違う TSKaigi 2026@Day1 / 17:20 ~ 17:50 15
16. 実験の内容をまとめた記事 実験で使⽤したプログラム