Canvas vs DOM・インタラクティブUI
CanvasとDOMの使い分け・CSSインタラクション・カスタム物理エンジン・ポートフォリオ設計
他のトピック
初めての方は /start →このトピックに効く比較ガイド
関連記事で繰り返し参照されている比較記事を、次の実践ステップとしてまとめました。
TypeScript本おすすめ比較 2026 — 入門から実践まで最適な一冊を選ぶ
Effective TypeScript・サバイバルTypeScript等おすすめTS本5冊を2026年版独自スコアリングで徹底比較。内容の深さ・実践性・初学者フレンドリーの加重平均で最適な一冊を見つけよう。
おすすめアルゴリズム本 比較 2026 — 入門からガチ勢まで最適な一冊を選ぶ
CLRS・蟻本・けんちょん本など定番アルゴリズム本5冊を2026年版独自スコアリングで徹底比較。内容の深さ・実装例の加重平均で最適な一冊を見つけよう。
コードエディタ比較 2026 — AI統合・パフォーマンス・拡張性で選ぶ最適解
Cursor・VS Code・Zedなどおすすめコードエディタ5本を2026年版独自スコアリングで徹底比較。AI統合・パフォーマンス・拡張性・コスパの加重平均で最適な一本を見つけよう。
5 件
Canvas vs DOM — 203個のコンポーネントで選んだ基準と実測データ
203個のインタラクティブコンポーネントをCanvas APIとDOMに振り分けた判断基準を、実例と実測データで解説する。
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に削減した。重力・衝突・バウンドに絞り、拘束・摩擦・スタッキングを諦めたトレードオフを解説する。
ブラウザで動く物理エンジンを自前で書いた話
ポートフォリオサイトにMatter.jsを使わず約180行の軽量物理エンジンをTypeScriptで自作した経緯と設計判断。バンドルサイズ300KBを4KBに削減しつつ60fpsを維持した手法を解説。