トーク

ひとつのWebアプリだけで完結しないUIやサービスでは、複数のページやタブをまたいで状態を保持し、必要に応じて復元・連携する仕組みが必要になります。

本トークでは、配信画面支援サービスにおける実例をもとに、localStorage・IndexedDB・PostgreSQLを組み合わせた三層構成による状態永続化の設計と実装について紹介します。

また、localStorageのstorageイベントを活用し、配信画面と設定画面といった複数のWebアプリ間で状態をリアクティブに同期・共有する仕組みも実現しています。こうした設計を通じて得られた知見をもとに、ストレージの選定指針や同期の工夫、実装時の落とし穴などをお話しします。

react@experimentalで導入されたViewTransitionコンポーネントは、ブラウザのView Transition APIをReactに統合する新しい組み込みコンポーネントです。

これまでもReactとView Transition APIを組み合わせることは可能でしたが、DOMの更新に対してstartViewTransitionを手続き的に呼び出す必要があり実装が煩雑になりがちでした。ViewTransitionコンポーネントはこのプロセスをReactのトランジションの概念と統合し、マウント、アンマウント、移動といった状態変化に応じたアニメーション実装を簡単にします。

本トークでは、このViewTransitionコンポーネントの基本的な使い方から、ネイティブアプリのような洗練されたアニメーションを実装する実践的なテクニックまで、デモを交えて解説します。

CSSは不完全な言語です。JavaScriptのようなプログラミング言語でもなく、デザインツールが完璧に再現することもできません。

宣言的で、コンテキストに依存し、あらゆるデバイスで予測不能に動作するCSSの言語特性は、「互換性に縛られた未知で無限の空間」である「Web」という媒体において、実は必然的かつ合理的な設計判断だったのではないでしょうか。

昨今のCSSWGでの仕様策定を俯瞰すると、根底の設計思想を尊重しつつ、より洗練された形で活用可能にする傾向が見受けられます。

本セッションでは、CSS がなぜこの設計思想を継承し、どのように発展させ、Web で Design するとはどういうことなのかを、CSS と Cascade の哲学に焦点を当てつつ考察します。

Webページの初期表示速度、どこまで最適化できていますか？
HTTP/1.1 時代の常識を一歩先へ進めるのが 103 Early Hints です。
このセッションでは、クライアントとサーバー間の通信に「ヒント」を挟み込み、リソースのプリロードを可能にする103 Early Hintsの仕組みと効果について紹介します。

コードベース全体に関わる変更に立ち向かっていますか？

「自分でやるのは時間かかりすぎるけど、AIに任せるのは正確性に不安がある。かといって静的解析は設計のコストが大きいよなぁ...」
こんな風に思いながら放置されているタスク、あなたのプロジェクトにもあるのではないでしょうか。

今回は、AIと静的解析の協働によって安全性と低コストを両立したTypeScriptの一括変換アプローチについてお話しします。

AIを元に静的解析を低コストで実現するアプローチ、静的解析を元にAIを安全に動かすアプローチの２つを比較し、双方のメリットデメリットを比較しながらより良いアプローチを模索します。

Motion (Framer Motion) は JavaScript や Vue, React で利用可能なアニメーションライブラリです。
Motion を使うとまるでネイティブアプリのようなアニメーションをつくることも可能です。
本セッションでは、Motion を使って心地良いアニメーションをつくる方法を紹介します。

JavaScriptのDateオブジェクトには課題が多く、特に任意のタイムゾーンと暦を指定出来ない点は課題の一つとして挙げられていました。

このような課題を解決すべく提案された新しい仕様がTemporalです。Temporalでは任意のタイムゾーンを指定できるだけでなく、グレゴリウス暦以外の暦もサポートします。一方、この「グレゴリウス暦以外をサポートする」という仕様が直近でTemporalの実装の難しさの一員となっています。

このトークでは「異なる暦をサポートすること」の根本的難しさと、Temporalがそこに対してどのような解決・割り切りを行っている（行おうとしている）のかを解説します。

トーク内容は少しマニアックですが、この題材を通じて、「複雑で必ずしも論理的・厳密でないドメインの仕様・挙動をどう決めていくか」という私達が日々立ち向かっている課題へのヒントになればと思っています。

フロントエンドの責務は広がり続けており、その中で「エラー」の扱いは重要な課題の一つです。Result型などエラーハンドリングは確立されつつありますが、そのエラーを「UIとしてどうユーザーに伝えるか」という観点での議論は、まだ十分とは言えません。

本LTでは、その問いへの一つの答えとして、アクセシビリティの観点から「良いエラーUI」を考察します。具体的なUIデザインを交えながら、エラーメッセージの文言、表示タイミング、位置など、すぐに実践できる設計のヒントを紹介します。

このLTは、エラー実装に「アクセシビリティ」という新たな評価軸をもたらします。また、実装都合ではない、サービスの品質を高めるためのUI設計に取り組むきっかけを提供します。

▼ 話すこと

• エラーUIの設計方針
• ヒントとなるWCAG達成基準の紹介

▼ 話さないこと

• ロジックや描画層でのハンドリング実装

昨年のフロントエンドカンファレンス北海道2024では「Linterからはじめるa11y」というタイトルでLTをさせていただきました。

Linterによるa11y対応の第一歩を踏み出した後、「これだけで十分なのか」「実際にユーザーが使える状態になっているか」という次の課題に直面することが多くあります。

本セッションでは、静的解析では検出できない動的な操作やフォーカス管理、実際のスクリーンリーダーでの読み上げなど、より実践的なa11yテストが求められる場面について、自動テストを活用したアプローチを紹介します。

また、既存プロダクトに段階的に自動テストを導入した際の課題や、開発チーム全体でa11y品質を維持するための運用などについても体験談を基にお話しします。

State of React 2024 アンケートで「名前は聞くが使わない」率トップだったマイナー React ビルトイン Hooksに加え、React19で追加されたhooksを開発者目線で総ざらいします。useId／useDeferredValue／useSyncExternalStore／useInsertionEffect／useImperativeHandle／useDebugValue…「いつ・なぜ・どうやって」採用する判断軸を整理し、共通ペインをユースケース別で紹介します。「お前らいつ使うねん？」から「今やろがい」になりましょう。

動画と連動してプログラムを実行させたいと思ったことはありませんか？
srt.jsは、津田塾大学の栗原一貴教授が開発した、YouTube動画の任意の時間でJavaScriptを実行できるフレームワークです。動画と連動する作品を簡単に創出できます。srt.jsでは、動画に字幕情報を追加するためのSRT形式のファイルに、実行したいJavaScriptコードを書き込みます。動画に合わせてアラートを出したり、WebAPIにアクセスしたり、モータなどの外部デバイスを動かしたりすることができます。テスト用の実行環境が用意されており、ファイルを用意するだけですぐに試すことができます。
LTでは、srt.jsの使い方や活用例を紹介します。動画はもう見るだけではありません！モノと繋がることで五感を刺激する体験を創り出しましょう！

本トークでは、WebRTC配信に“わざと通信障害”を起こし検証する技術を紹介します。
WebRTC は JavaScript API を呼ぶだけで、Webブラウザ間でカメラ映像・音声を暗号化し P2P でリアルタイム送受信できる技術です。
私たちの研究では、WebRTCを用いた車載カメラ映像配信を検討しています。実験用のバーチャル都市をUnityで構築し、Unity Render Streamingを用いてUnity内の車載カメラからWebブラウザへのWebRTC配信を実現しました。加えて、Linuxのtcコマンドを用いて任意の帯域制限、遅延、パケットロスを発生させる機能を実装しました。
通信障害による映像の崩れ方、tc制御の課題と対策、複数ストリーム表示の工夫等、リアルな話をお届けします。
「通信障害で映像はどう乱れる？」そんな疑問をお持ちの方、ぜひお聞きください！

この発表では、表題の ES2026 の新機能を JavaScript パーサーである acorn に実装した経験を通じて学んだことを共有します。

【アジェンダ】

• ECMAScript / TC39 とは何か
• JavaScript パーサー / acorn とは何か
• Explicit Resource Management とは何か
• 言語仕様書の読み方
• 実装する上で難しかったこと
  • using が予約語でないことによる難しさ
  • acorn にバックトラックがないことによる難しさ
  • (余談) なぜ acorn にバックトラックがないのか

Tanstack Tableは検索、ソート、ページネーション、行・列の選択などが備わったテーブルが簡単に作れるHeadlessなUIライブラリです。

このLTでは、TanStack Tableで作ったテーブルの検索やソートなどの状態をURLパラメータに同期できるライブラリを作った話をします。

以下が話す予定の内容です。

• ライブラリの設計で考えたこと
  • Reactの各種フレームワークで使えるようにするためのURLパラメータとの同期の仕組み
  • 数行で簡単に使い始められる設定の少なさと、細かいカスタマイズ性
• issueから学んだ設計の甘かった部分
• 初めての自作ライブラリでの学びや感想

React用のライブラリの話ですが、Reactを使ったことがない方でも楽しめる内容になる予定です。

フロントエンドエンジニアであれば、 一度は Google Tag Manager（以降、GTM）を利用したことがあるのではないでしょうか。 基本的な使い方はご存じでも 「どのようなユーザー行動を把握したいか」によって、 タグの設計や仕込み方は大きく異なります。 GTMを活用したユーザー行動の分析は、 toC領域における現代のWebフロントエンド開発において欠かせない要素です。

本セッションでは、以下の2点を中心にお話しします。

1. 弊社におけるGTM活用の実例
2. BigQueryに蓄積したデータの活用方法

実際のコード例やBigQueryとの連携を通じて、 フロントエンドエンジニアの視点から、 ユーザーのリアルな行動をどのように捉え、 プロダクトマネージャーと連携しながら活用していけるのかをご紹介します。

パソコンを開いた瞬間、「にゃーん」と鳴くねこちゃんが大量に襲いかかってきたら……。

本セッションでは、そんな“無限増殖ねこちゃん”をJavaScriptで実装する過程を通じて、macOSの自動起動・再起動制御・UI操作をLaunchAgentとJSだけで行う方法を紹介します。

JSだけでOSと仲良くなる方法を、かわいいネコと一緒に学んでいきましょう！

Next.jsの中にHonoを入れてAPIを組んでいたところ、テストのたびにハンドラをMockするのがだんだん面倒に感じてきました。とはいえ、大げさな設計を持ち込むのも違う…。そこで「ちょうどいい依存性注入（DI）」の形を探りながら、Hono側に必要な依存を注入できるようにすることで、無理なくテストを書ける構成を目指しました。

このトークでは、なぜMockがつらいと感じたのか、DIするために工夫したファイル構成や責務の分け方、Next.jsでやる上で気をつけたこと、そして「ここまではやってよかった」「ここはやりすぎだった」といった実感ベースの話を共有します。

HonoをNext.jsで使っている方、テスト設計でモヤモヤしている方、あるいは「ちょっとしたDI」を試してみたい方にとって、肩の力を抜いて聞いていただける内容になればと思います。

LLMが出てきて、Webページを見る代わりに、チャットで情報を得るようになりました。チャットってチャットUIですよね。だから「Webページ、ひいては多くのUIが必要なくなるんじゃないか？」なんてビビってました。でも、UIは必要なんですよ。やり方が変わるんだと思います。

Kent C Doddsさんの「The future of AI interaction: Beyond just text」が非常に面白いです。「MCPでテキストを送るけど、それじゃ味気ないよね。例えばストップウォッチやデータの可視化、インタラクティブなマルチモーダルのUI欲しくない？」ってね。

MCPだとHTMLやJSXを含む新しいコンテンツタイプも提案されているし、UIを送るAIエージェントのデモもあります。今回はそれらの最新動向を紹介しつつ、デモも作って、AI時代のUIについて考えてみたいと思います。

Vitestは今やフロントエンド開発に欠かせないテストランナーの一つですが、「モック」機能がどう動いているかを深く知る機会は意外と少ないのでは？
このセッションでは、Vitestがどのように関数やモジュールを“すり替え”、テスト時に挙動を偽装しているのか、その内部のしくみを追いかけます。

ESMの制約、Viteとの連携、vi.mock()がやっている魔法、spyとの違いなどを解き明かしていきます。
「ただの便利なAPI」が、実はどれだけ緻密な仕組みの上に成り立っているのかを一緒に覗いてみませんか？

想定する聴講者
-VitestやJestを普段から使っているが、内部動作までは知らないフロントエンドエンジニア

• テストツールやバンドラの裏側に興味がある方

Vitestは今やフロントエンド開発に欠かせないテストランナーの一つですが、「モック」機能がどう動いているかを深く知る機会は意外と少ないのでは？
このセッションでは、Vitestがどのように関数やモジュールを“すり替え”、テスト時に挙動を偽装しているのか、その内部のしくみを追いかけます。

ESMの制約、Viteとの連携、vi.mock()がやっている魔法、spyとの違いなどを解き明かしていきます。
「ただの便利なAPI」が、実はどれだけ緻密な仕組みの上に成り立っているのかを一緒に覗いてみませんか？

想定する聴講者
-VitestやJestを普段から使っているが、内部動作までは知らないフロントエンドエンジニア

• テストツールやバンドラの裏側に興味がある方