フロントエンドカンファレンス関西2025
LT（5分）
フレームワーク・ライブラリ
ツール
WebGL
UI/UX
JavaScript（TypeScript）
Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善
てつを。
tetsuwo0717
Matter.jsは、Webブラウザで手軽に物理演算を扱える比較的軽量なライブラリです。例えば、以下のような表現が可能です。
・オブジェクトが重力や衝突で自然に動く表現
・ユーザー操作に反応して弾む・転がるインタラクション
・配置や衝突判定を伴うインタラクティブな演出
・物理法則に基づいたアニメーションによる動的UI
一方で、描画や更新の扱い方によってパフォーマンス面での課題が生じやすくなります。
本発表では、配信画面デザインサービスにおける事例をもとに、Reactと組み合わせた遊び心満点の物理エフェクトの実現方法を紹介します。
エンジン共有や再計算の抑制といった設計上の工夫から得られた、物理演算をWeb表現に活かすための実践知を共有します。
あなたのWebサイトも、手頃に「ぷにゃっ」と動かしてみませんか。