2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years

FE Yatai Talks vol.2
https://fe-yatai.connpass.com/event/396289/

Transcript

1. 2年かけて Deno に DOMMatrix を実装した話 FE Yatai Talks vol.2 pixiv Inc. 森内建太 @petamoriken 2026.7.24
2. 自己紹介 petamoriken WebDev in Fukuoka 2 • Web エンジニア • Deno / ECMAScript コントリビューター • FEC Fukuoka 2026 ゲストスピーカー
3. https://scrapbox.io/petamoriken/ 3
4. 唯一型チェック機能を持つランタイム Deno • TypeScript (tsc) 同梱 ◦ tsgo (TS v7) をデフォルトにする作業中 ◦ JSX サポート • Linter, Formatter, LSP 内蔵 ◦ deno lint で Oxlint を使う変更が議論中 ▪ Oxlint に Type-Aware Linting が来ましたね 4
6. 今日は Web 標準 API のニッチな話 6
7. DOMMatrix • 4x4 の行列で回転、平行移動などの線形変換を扱う ◦ 2D の場合は 2x3 のアフィン行列として扱われる const matrix = new DOMMatrix() .rotateSelf(0, 0, 90) .translateSelf(20, 30); console.log(matrix.toString()); // "matrix(0, 1, -1, 0, -30, 20)" 7
8. 何故 Deno に DOMMatrix を入れるのか • SSR で CSS Transforms 生成に使える（かも） • WebGPU で GPU に変換行列を送るのに使える • OffscreenCanvas で Canvas 2D を実装したい ◦ Canvas 2D 実装には DOMMatrix が必要 ◦ コンテンツに合わせて OGP の画像生成が出来る ◦ deno desktop の Raw モードでゲームを作りたい 8
9. コンテンツに合わせて OGP 画像生成 • Cloud Functions で node-canvas を使ったことがある ◦ 導入や設定が大変 ◦ 読み込みでよくタイムアウトしてしまっていた • 今なら Satori や skia-canvas を採用するのがよさそう ◦ 絵文字対応とか大変そう • Deno でネイティブサポートしてもろもろ解決！ 9
10. deno desktop • Deno 2.9 で入ったデスクトップアプリを作る機能 • Next.js などのフレームワークからアプリが作れる • 色々なモードがある ◦ WebView モード: OS のブラウザ使用（Tauri 相当） ◦ CFE モード: Chromium 埋め込み（Electron 相当） ◦ Raw モード: ブラウザなし（現状 WebGPU のみ） 10
11. DOMMatrix（再掲） • 4x4 の行列で回転、平行移動などの線形変換を扱う ◦ 2D の場合は 2x3 のアフィン行列として扱われる const matrix = new DOMMatrix() .rotateSelf(0, 0, 90) .translateSelf(20, 30); console.log(matrix.toString()); // "matrix(0, 1, -1, 0, -30, 20)" 11
12. DOMMatrix は CSS Transforms をパースする • CSS Transfroms には関数が 20 個定義されている • パーサーを実装するのに CSS 仕様を読み必要がある const matrix = new DOMMatrix( "rotate(90deg) translate(20px, 30px)" ); console.log(matrix.toString()); // "matrix(0, 1, -1, 0, -30, 20)" 12
13. CSS Transforms は Values and Units に依存 • 引数内で CSS Values and Units の関数が使える ◦ Values and Units には関数が 21 個定義されている ◦ 四則演算が使える • 全部頑張って実装する const matrix = new DOMMatrix( "translateX(calc(1px + 2px)) rotate(atan2(3, 2))" ); 13
15. CSS 4 から異なる次元の掛け算・割り算可能に • 四則演算の途中では物理量が基本次元でなくてもよい • が、頑張る…… 15
17. なんやかんや実装し、マージされた • 詳細は Zenn の記事へ！ 17
18. まとめ • Deno は便利なのでみんな使ってね ◦ TypeScript を同梱している ◦ Deno 2.9 で入った deno desktop が面白そう • Web 標準 API に行列を扱う DOMMatrix がある ◦ 2年かけて Deno に実装した ◦ CSS Functions のパーサーを作るのは結構大変 18
19. Deno に Canvas 2D 実装中 • vello + wgpu と vello_cpu を使っている 19