こんにちは！GMO ペパボのてつをです。
この度、フロントエンドカンファレンス関西 2025に参加・登壇してきたので、その内容をご紹介します。
フロントエンドカンファレンス関西とは
「IGNITE KANSAI – 出会いが共鳴し、次の誰かを動かす」をコンセプトに、2025年11月30日にマイドームおおさかで開催された、Webフロントエンド技術に特化したカンファレンスです。会場はワンフロアを貸し切り、2つのトークルームで並行してセッションが行われました。基調講演やレギュラートークに加え、LTやスポンサーブースも設けられ、全19セッションが展開されました。
また、「Ask the Speaker」として、セッション中に気になった話題についてスピーカーに直接質問できるスペースが設けられており、スピーカーとコミュニケーションできる場が提供されていました。
登壇について
ここからは、今回私が発表させていただいた内容について紹介します。
Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善
本発表では、JavaScript製の2D剛体物理エンジンであるMatter.jsを使って、「ぷにゃっ」とした軟体風のアニメーション表現を実現する方法について紹介しました。
Matter.jsは剛体物理エンジンであるため、そのままでは軟体のような柔らかい表現はできません。そこで、衝突イベントから得られる法線ベクトル（衝突方向）と速度をもとに、CSSアニメーションで衝突方向と速度に応じた縮みを表現するアプローチを紹介しました。
主な内容
- Matter.jsの基本的な使い方（エンジン作成、レンダラー作成、オブジェクト追加）
- Eventsを活用した衝突方向・速度の推定方法
- 物理計算 → JavaScript → CSSというイベント駆動の描画反映の仕組み
また、パフォーマンス改善についても紹介しました。
- オブジェクト数の上限管理とFPS制限による計算コストの削減
- エンジンと静的ボディの再利用
- イベントリスナーや物理オブジェクトの適切なクリーンアップによるメモリリーク防止
登壇の感想
今回はLT枠（5分）での発表でしたが、物理演算をWebエフェクトに応用するという内容に対して、多くの方に興味を持っていただけました。限られた時間の中でしたが、実際の使用例と注意点の両面を伝えられたのではないかと思います。
印象に残ったセッション
ここからは、特に印象に残った2つのセッションを紹介します。
なぜフロントエンド技術を追うのか？なぜカンファレンスに参加するのか？
サイボウズ株式会社のsakitoさんによる、フロントエンド技術を追う意味とカンファレンス参加の価値についての基調講演でした。
感想
技術の変化の速さに対して「流行を追う」のではなく「流れを楽しむ」という視点が印象的でした。個々のツールを点で見るのではなく、「なぜ生まれたのか」「どんな課題を解決したのか」を線で捉えることの大切さが説かれており、自分の技術との向き合い方を見直すきっかけになりました。
特にビルドツールの進化の話が面白かったです。webpackの大規模化による課題からViteが生まれ、さらにRustの普及によってRspackやTurbopackへと繋がっていくという流れが解説されていました。新しいツールが前のツールを否定するのではなく、課題を踏まえて次へ進化していくという考え方は、今後技術選定する際にも活かせそうだと感じました。
「ドキュメントには『どう使うか』は書いてあるが、『どう現場に落とし込むか』は書いていない」というカンファレンス参加の意義についてのお話も響きました。Ask the Speakerが設けられている今回のカンファレンスにまさにぴったりの基調講演だったと思いました。
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
株式会社カナリーの深美翔悟さんによる発表で、不動産マーケットプレイス「CANARY」でのフロントエンドテスト基盤構築の実践について語られました。
感想
テストの目的は「アプリが動いていること」ではなく「プロダクト価値が毀損されないこと」であるという前提の置き方が印象的でした。その上で、ビジネスモデルから逆算してテスト対象を特定するというアプローチが紹介されており、テスト戦略の出発点をプロダクトの価値に据えるという考え方は、自分も意識していきたいなと感じました。
テストガイドラインとして、Kent C. Dodds氏のTesting Trophyに基づきIntegrationテストを厚くする方針や、BDD（振る舞い駆動開発）のGiven-When-Thenパターンでスタイルを統一するアプローチも参考になりました。
また、Claude Codeのカスタムサブエージェント機能を使ったテスト自動生成の話も印象に残りました。プロンプトだけでは期待とかけ離れた結果だったものが、ガイドラインを教え込んだサブエージェントの導入で振る舞いベースのテストに改善されたという過程は、AI活用においてもガイドライン設計が重要であることを示していました。「AIをためらわず試す文化」を支えるTry AI Budget制度（月額$200/人）という組織的な取り組みも印象的でした。
まとめ
フロントエンドカンファレンス関西2025は、「出会いが共鳴し、次の誰かを動かす」というコンセプトの通り、技術的な学びだけでなく、現場の知見や多様な視点に触れられる一日になりました。
来年もぜひ参加したいです！
