Canvas APIReactPerformanceAccessibility
Canvas vs DOM — 203個のコンポーネントで選んだ基準と実測データ
15 分で読める
このトピックを深掘りする
Canvas vs DOM・インタラクティブUI
CanvasとDOMの使い分け・CSSインタラクション・カスタム物理エンジン・ポートフォリオ設計
全5本中 1 本目。
次に読む記事
203個のCanvas/DOMコンポーネントで踏んだバグ Top 10 — 実データから見えたパターン
203個のインタラクティブコンポーネントを開発する過程で実際に遭遇したバグをgit履歴から集計し、頻出パターンと修正手法をTop 10形式でまとめた。
CSSだけで作るインタラクティブUI — transform, transition, custom propertiesの実践
FidgetSpinner、InfiniteKnob、ToggleSwitchなどのDOM+CSSベースのインタラクティブUIで活用したtransform、transition、custom propertiesのCSS技法を実例で解説する。
自前物理エンジン180行の限界点 — Matter.jsを捨てた理由と、カバーできなかったこと
physics.tsの166行で2D物理エンジンを自作し、Matter.jsの300KBを4KBに削減した。重力・衝突・バウンドに絞り、拘束・摩擦・スタッキングを諦めたトレードオフを解説する。
シリーズ全体の流れを見ながら、次に読む記事へ進めます。 初めての方は /start →
よくある質問
- Q. Canvas APIとDOMのどちらを選ぶべきですか？
- 連続物理シミュレーション、50個以上の同時描画エンティティ、ピクセル操作のいずれかがあればCanvas。キーボード操作やスクリーンリーダー対応が必要ならDOM。
- Q. Canvasコンポーネントのアクセシビリティ対策はどうすればよいですか？
- canvas要素にrole="img"とaria-labelを付与するのが実質的な上限。Canvas内部の個別要素にフォーカスを当てることはできないため、ユーザーが操作するUIはDOMで実装すべき。
- Q. DOMアニメーションで60fpsを維持するコツは何ですか？
- アニメーションをtransformとopacityに限定してGPUアクセラレーションを活用し、left/topによるリフロー発生を避ける。状態管理はuseRefで行い、React再レンダーを回避する。