Canvasマスターへの道

APIを暗記する前に、道のり全体を見る

5歳の子どもでも絵を見ることはできます。しかし本番システムは、さらに多くの問いに答えなければなりません。絵の中のものは何という名前か。誰が動かしてよいのか。クラッシュ後に取り戻せるか。Canvasを見られない人も操作できるか。10万個のObjectがあっても、なぜ止まらないのか。3人と1つのAIが同時に変更したら、誰の変更を採用するのか。

このコースは、そうした問いから始まります。各章ではまず、手で触れられるような小さな玩具の世界を示し、次に何が起きるかを先に予測します。それから玩具を正式な用語、TypeScript Interface、Browserの挙動、Test Evidenceへ翻訳します。比喩を事実の代わりにはしません。比喩がどこから通用しなくなるかを、毎章必ず明示します。

最終的に作るもの

学習用プロジェクト Canvas Lab を継続して拡張し、最後には次の機能を備えたVisual Operations Canvasを完成させます。

• 業務固有のShape、Text、Image、Connector、Snapping
• KeyboardとScreen Readerで使える代替Interface
• History、Autosave、Crash Recovery、Version Migration
• 安全なAsset Lifecycleと、PNG、SVG、JSON、高解像度Tiled Export
• 再現可能なGeometry、State Machine、Browser、Visual、Performance Test
• Evidenceがある場合にだけ有効にするWorkerまたはGPU Renderer
• 復旧可能なMultiplayer Sync、Offline Queue、Presence
• 制限されたActionだけを実行でき、Preview、Undo、Auditが可能なAI

この3層は決して混ぜない

描画にも明確な境界があります。DOMはText Editing、Semantics、Accessibilityを保ちます。Canvas 2Dは学習用カーネルの高頻度描画を担当します。GPU Rendererを追加するのは、Benchmarkが効果を証明した場合だけです。Documentは特定のRendererに依存しないため、筆を交換しても台帳を書き直す必要はありません。

毎章で繰り返す学習ループ

1. 玩具で遊ぶ： 具体的な物、動き、結果から、予測できるMental Modelを作ります。
2. 翻訳する： 玩具の各要素をEngineering Conceptへ対応づけ、比喩の境界を示します。
3. 思い込みを壊す： 小さなDemoでだけ正しそうに見える直感を、最小の反例で崩します。
4. 作る： Canvas Labへ、実行できてTestできる機能を一つ追加します。
5. わざと壊す： Symptom、LogまたはTrace、Root Cause、Repair、Regression Testを記録します。
6. Evidenceで合格する： 自動化できる証明を目視だけで済ませません。人の確認が必要なものには、EnvironmentとPass Criteriaを記します。
7. 教え返す： 専門用語なしでRuleを説明し、新しい場面へ応用します。

始める前の準備

コースの例はすべてTypeScriptのStrict Modeを使います。Modern Browser、Node.js 22、Package Manager、Browser DevTools、Unit TestとBrowser Testを実行できるTerminalが必要です。React、tldraw、WebGPU、Browser Compatibilityを扱う章では、具体的なVersionを固定するか確認日を明記します。時間とともに変わる主張は、Official Documentationで再確認してください。

Matrix、Spatial Index、CRDT、Shaderを先に知っている必要はありません。必要なのは、まず予測すること、自分の手で壊すこと、そしてなぜ修正できたかをEvidenceで説明することです。