こんにちは！チームラボ フロントエンド班所属の森と安藤です！
2025年9月6日、北海道のエア・ウォーターの森にて開催された「フロントエンドカンファレンス北海道2025」に現地で参加してきました！
また、私たちの所属するフロントエンド班からは朴木（ほうのき）さんと志田さんの2名が登壇されました。
本記事では、イベントやセッションの様子、そして2人の登壇内容についてレポートします。その他、登壇された方の資料もまとめていますので、気になる方はぜひご覧ください！
フロントエンドカンファレンス北海道とは
フロントエンドカンファレンス北海道は、Webフロントエンド領域に関心のあるエンジニアやデザイナーを対象とした技術カンファレンスです。
道内外から多くの方が集まっており、現地参加者は150名を超えるなど、終始活気と盛り上がりに満ちたカンファレンスでした🔥
当日の様子
今年の会場は「エア・ウォーターの森」。2024年冬に完成したばかりとのことで、非常に綺麗な施設でした。
スポンサーブース
1Fの吹き抜けエリアには、スポンサー企業によるブースが出展されていました。各社のプロダクトや技術について直接お話を伺いながら、豪華なノベルティまでいただき、楽しく交流させていただきました。
また、全ブースを巡るスタンプラリー企画も開催されていて、コンプリートすると、素敵なオリジナルグッズをいただけました！
発表会場
発表は1Fと2Fの2つのトラックで行われ、どちらの会場もしばしば立ち見が出るほどの盛況ぶりでした。また、各セッションの様子はオンラインでも同時配信されていました。
懇親会
カンファレンスの締めくくりは懇親会！お寿司やお肉など、美味しい食事を用意していただき、リラックスした雰囲気の中で道内のエンジニアの方々をはじめ、多くの参加者と交流することができました。 フロントエンドカンファレンス北海道 公式Xより
さらに、北海道銘菓として有名なバターサンドをはじめ、様々な銘菓もいただきました。美味しい！
LT登壇
今回のカンファレンスでは、チームラボから2名がLT枠で登壇しました！
朴木 優斗さん（ほうのき ゆうと さん）
「待たせ上手」なスケルトンスクリーン、そのUXの裏側 というテーマで発表されました！
登壇資料はこちら！
志田 洋斗さん（しだ ひろと さん）
意外と簡単！？フロントエンドでパスキー認証を実現する WebAuthn というテーマで発表されました！
登壇資料はこちら！
参加してみての感想
どのセッションも非常にレベルが高く、登壇者の方々のフロントエンド技術への造詣の深さと熱量をひしひしと感じました。
また、懇親会では登壇者の方にセッションの内容について質問させていただいたり、他社のエンジニアの方と交流させていただいたりと、非常に密度の濃い時間を過ごすことができました。
来年はさらに大きな規模での合同開催が予定されているとのことで、今から楽しみです！
フロントエンドカンファレンス北海道2025 登壇資料まとめ
フロントエンドチョットデキルルーム
HTMLの品質ってなんだっけ？ -“HTMLクライテリア”の設計と実践
今回のセッションは、セマンティックなHTMLとアクセシビリティの重要性を改めて深く考える良い機会になりました。国際基準を参照した品質評価や、リンターツールを使った日常的なチェック方法も大変参考になりました。
「フロントエンドで1,000万件のデータをリアルタイム処理しろですって？😱」WebGL2を活用したGPGPUの世界へ
CPUとGPUの違いを視覚的なデモで分かりやすく見せていただき、リアルタイムで膨大なデータを扱う技術への理解が深まりました。
（デモ：https://honeymaro.github.io/gpgpu-demo/ ）
Designing on The Web
Webデザインの歴史を振り返りながら、印刷物とは全く異なる、コンテキストに依存するというWebならではの本質を改めて理解できたのがよかったです。
特に、CSSとHTMLの基本原則に基づいた設計の重要性や、ブラウザが標準で提供しているUser-Agentスタイルシートの役割について解説があり、Webデザインの土台となる考え方を再確認できました
オレオレWeb名刺作っちゃおうぜ
フレームワークを使わないインタラクティブなWeb名刺の制作についてのお話、大変感銘を受けました。特に、JavaScriptの計算とtransformプロパティを組み合わせて3D回転などの複雑な動きを実装している点、NFCの対応には驚かされました！
続・p5.jsはいいぞ 〜外部デバイス連携も物理演算もできるよ〜
今回のセッションは、p5.jsというJavaScriptライブラリの魅力を存分に感じることができ、とても面白かったです！
実演を交えながら、外部デバイスとの連携や物理演算など、こんなにも多彩な表現ができることに驚きました。クリエイティブコーディングの可能性が大きく広がったように感じます。
サンプルも分かりやすく、p5.jsの楽しさがダイレクトに伝わってきました。
株式会社Gaudiy スポンサーセッション
アクセシビリティテストを自動化する今回のセッション、非常に興味深かったです。
特に、eslint-plugin-jsx-a11yのような静的解析ツールや、Storybookとaxe-playwrightを組み合わせたコンポーネントごとのテスト手法は、すぐにでも試したくなるような具体的な内容でとても参考になりました。
さらに、ClaudeのようなAIを活用した独自のMCPの開発事例は、より高度なアクセシビリティチェックの可能性を示してくれて、感銘を受けました。AIによるチェックロジックの実装など、未来的なアプローチを垣間見ることができ、これからの開発に活かしていきたいです。
<UserCard data={クソデカ複雑Object} />問題を考える / デザインスポンサーセッション
単一のViewで単一のデータを扱うことや、コンポーネントの階層化など、CSSの肥大化を防ぎつつ、良いコンポーネントを構成するための様々な観点がとても勉強になりました。
Viteのプラグインを作ると内部をイメージできるようになる
今回のセッションは、Viteのプラグイン開発を通じて、その内部構造を深く知ることができ、とても勉強になりました。Rollupベースの高速なビルドの仕組みや、プラグインのフックについて、分かりやすく解説していただき、プラグイン開発へのハードルが下がったように感じます。
RSCの時代にReactとフレームワークの境界を探る
React自体は、特定のフレームワークに依存しない開発体験を提供するための「規約」を定める役割を担っている、という結論にはとても納得しました。普段何気なく使っている機能の裏側にある、それぞれの役割を理解できたのが大きな収穫です。
ProxyによるWindow間RPC機構の構築
window.postMessageを使ったウィンドウ間通信の課題を解決する、新しいアプローチを知ることができ、大変勉強になりました。
ブラウザは「フロントエンド」を何から守っているのか？
ブラウザが持つセキュリティ機能について、具体的な攻撃手法を交えて解説されていました。同一オリジンポリシー（SOP）の進化や、UI Spoofing、Fingerprinting、XS-Leaksといった脅威から、ブラウザがどのようにフロントエンドを守っているかが説明されました！
AI時代のUIはどこへ行く？
「Webページは不要になるか？」という問いから始まったセッションは、未来のUI/UXの可能性を考える良いきっかけになりました！
MCP-UIとAPIを組み合わせることで、自然言語で操作できるUIのデモは、ユーザー体験の未来形を垣間見せてくれて、とても感銘を受けました。AIの進化が、これまでのUIの概念を根本から変えていくことを肌で感じることができ、今後の開発がさらに楽しみになりました！
5年目から始める Vue3 サイト改善
今回のセッションは、Vue 2で構築されたサイトの改善事例について、具体的な手法とともに知ることができ、大変勉強になりました。特に、途中参加のエンジニアという視点から、既存の課題を整理し、チャンク分割やバンドルサイズの最適化といった具体的な改善策を次々と実行していくプロセスは、とても参考になりました。
chot Inc. スポンサーセッション
今回のセッションは、Vercelの「v0」が、単なるプロンプトベースのツールから、より対話的なエージェント型へと進化したというお話が印象的でした。
特に、クライアントとの打ち合わせ中にその場でUIを生成し、議論を深めるという活用法は、これからの開発スタイルを大きく変える可能性を感じました。エンジニアだけでなく、デザイナーなど、誰もがアイデアをすぐに形にできるという点が、プロトタイピングツールとして非常に魅力的です。
おじいちゃんに優しいUIを作ってみた
単にフォントサイズを大きくするだけでなく、ボタンのサイズも大きくするといった、高齢ユーザーに特有の配慮が必要だというお話は、非常に参考になりました。
また、OSのフォントサイズ設定との連携など、具体的な実装の課題についても触れていただき、デザインと実装の両面から考えることの重要性を再認識しました。この学びを活かして、より多くの人が使いやすいサービスを作っていきたいです。
さようなら Date。 ようこそTemporal！ 3年間先行利用して得られた知見の共有
JavaScriptのDateオブジェクトの扱いにくさや課題を改めて認識し、その解決策となる新しいAPI「Temporal」について深く学ぶ良い機会になりました。
特に、3年間の先行利用で得られた知見を共有していただき、Temporalが持つメリットや実用性を具体的に知ることができてとても参考になりました。
Webブラウザ向け動画配信プレイヤーの大規模リプレイスから得た知見と学び
今回のセッションは、大規模な動画配信プレイヤーのリプレイスという貴重な経験から得られた知見を共有していただき、大変勉強になりました。
ガウディルーム
奥深くて厄介な「改行」と仲良くなる20分
改行の歴史から始まり、<br>や<wbr>といったHTMLタグ、そしてCSSプロパティまで、多角的な視点から丁寧に解説していただき、頭の中の知識が整理されました。
特に、改行に関する「流派」があるというお話は新鮮で、それぞれの特性を理解することで、より意図した通りにレイアウトをコントロールできると感じました。
DuckDB Wasmで地理空間情報を扱う
サーバーレスで手軽に地理空間分析ができるという点は、非常に魅力的だと感じました。特に、「コカ・コーラ自販機を探す」というデモは、技術の面白さを分かりやすく示していて感動しました。
スクリーンリーダーと仲良くなるためのマークアップ
セマンティックなHTMLがアクセシビリティの基本であるというお話を改めて伺い、日々のコーディングにおける意識の重要性を再認識しました。特に、初めて知った「アクセシビリティオブジェクトモデル（AOM）」という概念は、とても興味深かったです。
また、ループするカルーセルのような複雑なUIのアクセシビリティ対応の難しさや、SVGアイコンへの代替テキスト、WAI-ARIAを使ったエラーメッセージの対応など、具体的な実践例を交えた解説は、非常に分かりやすく共感できる内容でした。
アクセシビリティを軸にした、エラー表示の実装と考察
今回のセッションは、アクセシビリティの観点からエラー表示を考えるとても良い機会になりました。特に、時間経過で消えてしまう「Flashメッセージ」のようなアンチパターンが具体的なNG例として挙げられたことで、普段何気なく実装している部分に潜む課題を深く認識できました。
Testing Trophyは叫ばない
テストが普及する中で生まれた「CIが遅い」「テストが不安定」といった課題に対し、Googleのテストサイズという概念を参考に、テストを「関数」「UI」「E2E」の3種類に分類して考える方法は、とても分かりやすく、腑に落ちました。
それぞれの粒度で適切にテストを行うことの重要性が改めて理解でき、日々の開発に活かせるヒントがたくさんありました。テストの効率と信頼性を両立させるための、実践的な学びを得ることができて、とても有意義な時間でした！
WebARで切り拓く表現系フロントエンドエンジニアとしてのはじめの一歩
JavaScriptやWebGLの知識があればすぐに始められるというお話は、AR技術が意外と身近にあることを教えてくれて、とても興味深かったです。
「え？！それ今ではCSSだけでできるの！？」驚きの進化を遂げたモダンCSS
これまではJavaScriptを使わないと難しかった多くの表現が、今ではCSSだけで実現できるようになったという話に驚きました。
特に、z-index問題を解決するPopover APIや、詳細度を制御できる@layer、そしてスコープを限定する@scopeは、今後のCSS設計を大きく変える可能性を感じました。スクロール連動アニメーションなどもCSSで完結できるようになったと知り、CSSの進化のスピードにワクワクしました！
Progressive Web Apps（PWA）は夢を見るか、夢になるか
ブックマークとの違いなど、PWAの基本的な部分からとても分かりやすく解説していただき、改めてそのメリットを再認識できました。特に、Webの実装だけでクロスプラットフォーム対応が可能になるという開発者側の大きなメリットに、とても魅力を感じました。
1から理解するWeb Push
ブラウザごとの対応状況や、実装上の注意点といった実用的な情報から、ページ遷移の制御方法まで、網羅的に学ぶことができ、Web Push通知の全体像を掴むことができました。
0からでも理解しやすい構成で、日々の開発にすぐに活かせそうなヒントがたくさんありました。通知機能の導入を検討する際に、ぜひ参考にしたいと思います！
ES2026 対応：acorn への Explicit Resource Management 構文サポート実装
JavaScriptのパーサーである「acorn」に、新しい構文を実装するという、普段なかなか触れることのない領域のお話は、大変面白かったです。
すべてのinputに可視ラベルをつけたい
アクセシビリティの観点から、すべての入力欄にラベルを付けることの重要性について、改めて深く考える良い機会になりました。
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
Popover APIが標準で提供する機能だけでは、WCAG 2.2の基準を満たすには不十分な場合があるという指摘は、とても勉強になりました。
特に、適切なroleやnameを設定して不足している部分を補うという具体的な方法を知ることができ、とても参考になりました。ただ便利なだけでなく、すべてのユーザーが問題なく使えるように、開発者側でしっかりと配慮する必要があると再認識しました。
iPhone Eye Tracking機能から学ぶやさしいアクセシビリティ
GLSLで解き放つ！WebGLシェーダーが生み出す魔法体験
複製や回転、乱数といった、一つ一つの数学的な処理を組み合わせることで、最終的に音楽と同期した美しいビジュアル作品を創り出すというプロセスに、とても感銘を受けました！
自作JSエンジンに推しプロポーザルを実装したい！
Discussion