トーク

株式会社WinTicketではクライアント(Web,App,Server)から送る行動ログを数百行のスプレッドシートで管理しており、閲覧のし辛さ、更新漏れが課題になっていました。
また行動ログのスキーマはクライアント側のコードで独自で定義をしており、期待する行動ログの構造と実際に送るリクエストに不整合が起きることもしばしばありました。
本セッションでは、Protocol Buffersでログスキーマを定義して自作のGo製protocプラグインを用いてログ仕様ドキュメントと型安全なクライアントコード(TypeScript)を自動生成し、ログ実装の保守性・信頼性を向上させた事例をフロントエンドエンジニアの視点で紹介します。

株式会社WinTicketではクライアント(Web,App,Server)から送る行動ログを数百行のスプレッドシートで管理しており、閲覧のし辛さ、更新漏れが課題になっていました。
また行動ログのスキーマはクライアント側のコードで独自で定義をしており、期待する行動ログの構造と実際に送るリクエストに不整合が起きることもしばしばありました。
本セッションでは、Protocol Buffersでログスキーマを定義して自作のGo製protocプラグインを用いてログ仕様ドキュメントと型安全なクライアントコード(TypeScript)を自動生成し、ログ実装の保守性・信頼性を向上させた事例をフロントエンドエンジニアの視点で紹介します。

近年はフロントエンド領域でも自動テストを導入することが一般的になってきています。
私はコーディングの中でも特にテストが好きで、よく自動テストの導入などを手伝っていたりします。

そんな自分が今からテストが書かれていないReactアプリケーションに対して、テストを導入するならどうするかをテーマにテストの導入方法や向き合い方などについて紹介させていただきます。

• フロントエンドのテストは何のために存在するのか
• テストをどこから始めるか
• テストしやすいように設計を変更する
• テストが書けないなら、常にテストを書くべき理由

最新のChromeでは、オフラインでも生成AIを使える機能が搭載されており、その機能をJavaScriptから呼び出すことができます。
このGemini Nano in Chromeについては以下参考資料の頃の情報から更新しつつ、5月に発表されたGemini in Chrome（Chromeから直接AIを使う機能の方）も踏まえてお話しできればと思います。
ブラウザ上で動くAIのことを知って、ユーザーのブラウザ体験が生成AIによってどう変わるか想像できるようになりましょう！

ターゲット: Webアプリケーションを開発しているフロントエンドエンジニア
伝えたいこと: Chromeに搭載されている・される予定の生成AI機能の情報をキャッチアップしてほしい！
参考資料: https://www.docswell.com/s/gatchan0807/ZN1V6G-2024-11-23-110000

昨今話題のMCP（Model Context Protocol）について、概要を知っている方やプラットフォームが提供しているものを利用したことがある方は多いかと思います。
ですが、「自分でMCPサーバーを立ててみる」という経験をされた方はまだまだ少ないのではないかなと思い、今回の発表を聞いて実際にやってみよう！と思えるようにお話しします！
この技術自体はこれまでフロントエンドに関わって仕事をしてきた方にとって、意外とそんなにハードルが高くないものなので、ぜひ触ってみましょう！
合わせて、私が実際に触ってみてわかったハマりどころ・注意点も含めてお話しできればと思っています！🙌

ターゲット: 生成AI時代に取り残されたくない（自分のような）フロントエンドエンジニア
伝えたいこと: フロントエンドエンジニアの土壌があれば、これに手を出すことは怖くないし、キャリアの糧になる

既存の物件検索サイトは保存できる検索条件の上限や、価格の変更を手動でチェックするなど、業務効率を阻む制約が多く、SaaS単体では解決が困難です。
そこで、私たちは拡張機能を前提にSaaSを設計しました。
拡張機能があることで既存のWebサイトを拡張したり、管理画面と連携することができます。

管理画面にログイン中なら拡張側も自動認証できるスマートログイン。
ダウンロード直後のPDF図面をService Workerが捕捉し管理画面へ登録するスマートアップロード。
content-scriptが埋め込んだ UI 要素と拡張機能のlocalStorageをstorageイベントで双方向同期するなど、
普段のフロントエンド開発ではなかなか取り組めない技術の組み合わせを紹介します。

当日はライブデモを交えてWebを “壊さず拡張する” 次世代フロントエンドの実践知を共有します！

フロントエンド開発の品質とスピードを保ち続けるためには要望の本質をとらえた設計と実装が重要ですが、実際の開発では目立つ要素である画面の実装や瑣末な文言に気を取られがちです。

Why「なぜ必要か」→How「どう実現するか」→What「何が出来たか」の観点でPRを段階的にレビューするという概念自体は特別新しくありません。しかし、フロントエンド開発の現場で実践してみると期待以上の効果がありました。当初はレビューの負荷を下げる目的で始めた取り組みが、チーム全体に「表層ではなく土台から積み上げる」文化をもたらしたのです。

• 誰もが知るWhy→How→Whatという枠組みが、なぜフロントエンドのPRレビューで特に有効だったのか
• どう導入すれば同じ効果を得られるのか

このトークでは、これらについて実践的な知見を共有します！

JavaScriptで0.1 + 0.2を計算すると0.30000000000000004になる現象、経験ありませんか？

これはJavaScriptがIEEE 754という二進浮動小数点規格に従っているため、十進数を正確に表現できないことが原因です。
ECサイトの価格計算などで誤差が生じ、実際にバグの温床となっています。

この問題を解決するため、TC39ではDecimal（正確な十進数計算）の標準化を議論中ですが、
decimal.js等の関連ライブラリが広く利用され、圧倒的需要があるにも関わらず、5年間進展がありません。

用途は異なりますが、最近TC39 Stage 4に到達した浮動小数点関連のFloat16Arrayと比べ、なぜDecimalは停滞しているのか？
TC39のproposal-decimalを読み解き、なぜ需要があっても標準化が困難なのかを共有します。

現代のフロントエンド開発は、様々なフレームワークやライブラリやツールが急速に進化しており、どんどん複雑化しています。
そのため、「覚えることが多いな」と感じる方が大勢いるかと思います。

このセッションでは、数あるJavaScriptフレームワークの中でも、特にシンプルな記述で簡単に使える(※)Svelteと、それに様々な機能を搭載したSvelteKitについてお話します。
私が過去、役に立たないWebアプリをSvelteで大量に作って得た知見を皆様に共有させていただきます。

※個人の感想です

【話すこと】
・Svelte/SvelteKitの特徴
・入門の手引き

【こんな人におすすめ】
・Svelteについて全く知らない、あるいはかろうじて名前ぐらいは聞いたことがある
・Webアプリをラフに作ってみたい

WebSocket通信はリアルタイム性に優れる一方で、接続状態の把握・イベント処理・再接続戦略など、状態管理が煩雑になりがちです。

特にReactアプリケーションに組み込む際は、通信状態をUI上にどう表現するか、状態をどこまで共有するか、といった設計がUXに大きく影響します。

本トークでは、接続・切断・待機・エラーといったWebSocketの状態をReactでどのように扱い、アプリケーション上で視覚的にどう反映するかを紹介します。再利用可能なコネクションの設計、ライフサイクルに応じたイベント管理、スコープに基づいた状態の共有といった観点から、実例を交えて解説します。

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

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

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

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

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

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

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がそこに対してどのような解決・割り切りを行っている（行おうとしている）のかを解説します。

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

昨年のフロントエンドカンファレンス北海道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制御の課題と対策、複数ストリーム表示の工夫等、リアルな話をお届けします。
「通信障害で映像はどう乱れる？」そんな疑問をお持ちの方、ぜひお聞きください！