こんにちは！GMO ペパボのてつをです。
この度、フロントエンドカンファレンス東京 2025に参加・登壇してきたので、その内容をご紹介します。
フロントエンドカンファレンス東京とは
「フロントエンドを次世代に」をテーマに開催される、フロントエンド技術に特化したカンファレンスです。今年初開催ながらもオフライン350人以上が参加し、国内最大級のフロントエンドカンファレンスとなりました。
また、全セッションでAMAルームが用意されていたのも印象的でした。AMAとは「Ask Me Anything」の略で、登壇者に自由に質問できるコーナーのことです。各セッション終了後、登壇者ごとに個室が用意され、参加者が直接議論できる場が設けられていました。どのルームも活発な議論で盛り上がっており、登壇内容を直接登壇者に深掘りできる貴重な機会だなと感じました。
登壇について
ここからは、今回私が発表させていただいた内容について紹介します。
ブラウザストレージを活用した複数アプリを跨ぐ高速化とリアクティブな同期
本発表では、Alive Studioで実際に活用している、localStorageとstorageイベントを組み合わせた、複数window間でのリアクティブな同期を実現する方法について紹介しました。
また、Alive StudioはOBS（ライブ配信で広く利用されているオープンソースの配信ソフトウェア）上のブラウザ（Chromium ベース）で動作するということもあり、OBSブラウザならではの特徴についても併せてお話しすることができました。
主な内容：
- localStorageとstorageイベントによる複数のwindow間の同期の仕組み
- セキュリティ・型安全性・保守性を考慮した実装の重要性
- localStorageの利用指針の事例
実装上の工夫：
- イベントハンドラの増殖を防ぐための抽象化と依存性注入によるテスト可能な設計
- Zodを使った型安全性の確保（parse + validate）
複数のドキュメント間で状態をリアクティブに同期し、よりシームレスなユーザー体験を提供できることを実例を交えて紹介しました。
登壇の感想
発表後、多くの方から「storageイベントでそんなことができるのか」「その発想はなかった」「擬似的な双方向通信として面白い」といった沢山の反応をいただきました。
このような反応をいただけたことで、多くの方にとって新鮮なアプローチだったのだと実感しました。いただいた感想や意見からも多くの気付きを得られ、今後の発表やプロダクト開発に活かしていきたいと思います。
印象に残ったセッションについて
ここからは、私が聴いた数多くの素晴らしいセッションの中でも、特に印象に残った2つを紹介したいと思います。
TS-Type=JS ？
TypeScriptとJavaScript、そしてそれらを取り巻くエコシステムと型システムの本質について考察された発表でした。
感想
発表は「TypeScriptは Programming language ですか？」という問いかけから始まりました。実際に一番前で聴いている方に向けてマイクを向けて意見を求める様子が斬新で、始まり方が新しいなと感じました。
当初はenumやnamespaceのようなTypeScript固有の構文がどう言語としての独自性を与えているのか、という話だろうと予想していました。実際の発表では、そうした構文レベルの違いにフォーカスするのではなく、「TypeScriptをどう位置づけるか」 というメタな視点から切り込まれていました。
この発表で最も印象的だったのは、TypeScriptを「言語」として捉えるのではなく、開発体験（DX）を最大化するためのツールチェーンとして捉える視点でした。発表の中で、JSDoc + プリプロセスという手法が先にあって、TypeScriptはその流れを言語レベルの構文として発展させたものだという歴史の説明があり、TypeScriptの成り立ちについて改めて知ることができました。
また、現在のTypeScript開発では「型チェック」と「型の除去」を完全に分離する流れが主流になっているという話がありました。開発時（例えばIDE/CI）では型チェックを行うためのツール群（例えばtsc/LSP）で安全性を担保し、ビルド時は高速なツール（esbuild/swc）でただ型を削除するだけ、という役割分担です。 発表ではDenoやBun、Node＋ローダなどのツールも例に挙げられましたが、これらは「TSランタイム」と呼ばれがちでも実際には実行前に型を剥がしてからJavaScriptとして走らせています。そのため型安全性を保ちながら、ビルド速度を大幅に向上させられるという点が印象的でした。実際に私が開発するときも同様の構成を取ることが多く、TypeScriptを「Programming language」ではなく「超高速な型チェッカー」として捉える視点がより腑に落ちました。
この発表を聞いて、TypeScriptエコシステムの構造について改めて考える機会になり、今後の開発でビルドツールや型チェック方法を選択する際に思い出したい内容でした。
個人的に、jxckさんの話し方はとても聞きやすく、ユーモアもありながら一切カンペや資料に頼らない発表スタイルが印象的でした。いつか自分もあのような発表ができるようになりたいなと思いました。
実践AIチャットボットUI実装入門
AIチャットボットのインタラクションについて、テキストだけでなくリッチなUIを返す仕組みについての実践的な発表でした。
感想
この発表は『AIとの対話＝テキストチャット』という前提を見直すきっかけになりました。考えてみれば、ルート案内なら地図表示の方が直感的だし、ショッピングなら商品画像や色選択のUIの方が分かりやすい。このように普段は当たり前に見えていることが、AI時代の文脈で改めて問い直されると、新しい気付きに変わるんだなと感じました。
特に印象に残ったのは、AG-UIとMCP-UIという2つのアプローチの比較です。AG-UIはエージェントとユーザーのやり取り全体を扱うプロトコルで、メッセージ送受信やツール呼び出し、状態同期まで幅広くカバーしていることが紹介されていました。CopilotKitとの結びつきが強く、高い表現力を持つ一方で、専用フロントエンドを前提とする点が特徴的です。
一方のMCP-UIは、Model Context Protocolを拡張した仕組みとして紹介され、HTMLをiframeで表示するようなシンプルな方式で既存クライアントやPostmanからも利用できる点が強調されていました。軽量ながら汎用性が高く、AG-UIとの対比がとてもわかりやすかったです。
また「カラーピッカーで選んだ色のグリンピースのシュウマイを生成されるMCPサーバー」を使ったデモは強く印象に残りました。チャットボット上でのシンプルな操作から即座に結果が得られることで、テキスト入力にとらわれない新しいやりとりの形を見ることができました。最初は「グリンピースの色が変わる…？」と少し謎でしたが、デモが成功した瞬間には自然と会場から拍手が湧いたのも印象的でした。
まとめ
フロントエンドカンファレンス東京2025は、『フロントエンドを次世代に』というテーマの通り、多彩な発表と学びが詰まった一日になりました。
また、会場では多くの参加者や登壇者の方々と直接話す機会があり、普段の業務では得られない刺激をたくさんいただきました。来年もぜひ参加したいです！
