トーク

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アプリをラフに作ってみたい

ひとつの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での仕様策定を俯瞰すると、Inheritance、Defaulting、Cascade、Specificity 等の根底の設計思想を尊重しつつ、より洗練された形で活用可能にする傾向が見受けられます。

本セッションでは、CSS がなぜこの設計思想を継承し、どのように発展させ、どのような変化がこれから予想されるかを、Cascade Layers・Scope・Container Queries などに焦点を当てつつ考察します。

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

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

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

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

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

本トークでは、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 にバックトラックがないのか

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を普段から使っているが、内部動作までは知らないフロントエンドエンジニア

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

WebAssembly の名前は一度は聞いたことがあったり、使い方は知ってるがその技術が目指しているゴールや思想を知らない人が多いかと思います。WebAssembly は Web 標準として組み込まれるために以下の 4 つの目標を挙げています。

1. 高速かつ高効率、そしてポータブルであること
2. 可読性があり、デバッグ可能であること
3. 安全であること
4. ウェブを破壊しないこと

本セッションでは、実際に策定された仕様や実装例から、WASM を利用する開発者の目線からどのように Web 標準として組み込まれ、モダンなフロントエンド技術からどのように利用できるのか、順を追ってご紹介しようと思います。

フロントエンドエンジニアの登場以降サービスのUIはどんどん使いやすくなる一方で裏側のUIロジックは複雑になる一方です。
Reactはコードを宣言的にかけるようにしてくれましたが、現在のアプリケーションはそれでもなお複雑なロジックを抱えています。

私は業務の中でReact/Next.jsのアプリケーションのリファクタリング業務などを行っており、その経験を元に現在業務でReactを活用している人向けに、分かりやすいReactコンポーネントの書き方について紹介させていただきます。

大まかな構成

• 漸進的にコンポーネントを移行する
• C/Pパターンから学ぶファイル構成の重要性
• Reactを使いこなそう

※構成は現状の想定のため少し内容の変更があるかもしれません。

旅行アプリ『NEWT』では、ツアー、ホテル、マガジンの機能をモノレポ内の独立したNext.jsアプリとして構築し、これらをメインドメイン配下にリライトとベースパスで統合しています。

さらにリライト機能を駆使し、(1)空港/出発地コードのURL正規化、(2)マガジン記事のクロスドメイン提供、(3)クエリパラメータのパス変換、(4)外部ノーコードツールの同一ドメイン統合などを実現しています。
これによりマイクロサービスごとの独立性を保ちながら、ドメインオーソリティの集約・ドメインランクの大幅な向上を達成しました。

状態管理やログ分析への課題と、それらを乗り越えてドメインランク向上に貢献した実践知を、具体例を交えながらご紹介します。

■ 想定観客：フロントエンド中級者〜上級者、SEOを意識したアーキテクチャ設計に興味がある方
■ 期待効果：マイクロサービス環境でのSEO戦略立案など

【セッション概要】
近年のフロントエンド開発は、AIによる開発体験と生産性がより求められるようになってきました。そんな中で業務上で、どんなふうに私たちがAIと向き合ってきたか、どうやって生産性を上げることができたのかなどをトピックに話します。

本セッションでは、特に以下の3つについてお話しします。

• Design to Codeをより効率的に実現するFigma MCPの活用法を実践例を交えて紹介します。
• AIの力を借りて、いかに開発効率を高めていくかについて、私が思う勘所を共有します。
• これらの取り組みを通じて私たちが目指したい理想の開発体制や文化についての展望を提示します。

【対象者】

• フロントエンド開発の生産性を向上させたいエンジニアの方
• 実際のAI x フロントエンドの実践例を知りたい方
• よりAIを活用できる方法に興味がある方

現代のフロントエンド開発では TypeScript を用いることが多く、開発者は型の恩恵を享受しながら本質的な開発に集中できます。

しかし、REST API を挟んだ「外界」との接続点において「型安全」は必ずしも担保できるわけではなく、仮初めの型定義に頼った開発を余儀なくされる場面も少なくありません。
あるいは、バックエンドから書き出したスキーマから TypeScript 用型定義を生成する手もありますが、開発においてバックエンドが先行する必要があるなどの難点を抱えています。

このトークでは、

• 「REST API 型安全は誰の嬉しさなのか」という原点に立ち返り
• バックエンドと協調しながら双方が嬉しい「API 仕様」の共有を実現する手法について
• 技術面だけでなくドキュメンテーションの観点からも

「REST API 型安全」を考え直すきっかけとなることを期待してお話します。

ネットサーフィンをしていると「アプリをインストール」というポップアップを誰しも１度は経験したことがあると思います。

ショートカットを作成するのと何が違うのか、何をインストールしているのか。
そんなポップアップの裏側である技術「Progressive Web Apps （PWA）」。
OSや端末を選ばないWebアプリの利点と、オフラインでも使用できるネイティブアプリの特性を融合したPWAはどのように生まれて、どのように実装されているのか。
なぜ、PWAはそこまで普及していないのか。
PWAはどこまでネイティブアプリに近づけているのか。

本トークでは、PWAに関するこれまでの歴史を振り返りつつ、PWAがどのような仕組みでブラウザや端末に実装されているのかを読み解きます。

PWAに夢を見た1人のWebエンジニアから見たPWAの世界を共有できればと思います。

サービス成長に伴い、機能の複雑化やマーケティングツール導入によってパフォーマンスが劣化する課題が発生します。弊社の提供する旅行アプリ『NEWT（ニュート）』でも同様の問題に直面しました。
本セッションでは新機能開発で忙しい中でも、AIを活用して効率的にパフォーマンス改善を効率的に実現する手法をお話しします。アクセス数の多いページに改善対象を絞り、LighthouseとDevToolsのPerformance AIアシスタント、ChatGPTを組み合わせることで、設定ミス、不要ライブラリ、分析ツール読み込み順序などの問題を手軽に特定できました。問題の修正にはDevinを用いています。
サービス成長期におけるパフォーマンス改善の優先順位付けと、AI活用による効率的な問題解決アプローチをお教えします。

バイオ×AI分野では、数百万〜1,000万件規模のデータをリアルタイムで可視化・分析するニーズが急速に高まっています。もともとAI解析ではバックエンドでの大規模データ処理が重視されていましたが、現在ではブラウザ上でのインタラクティブな可視化においても同等の処理性能が求められるようになっています。本セッションでは、WebGL2を活用し、Transform FeedbackやR32Fテクスチャ、Framebufferなどを組み合わせて、サーバーに依存せずにブラウザ内で完結するGPGPUベースの高速データ処理の仕組みを解説します。さらに、カテゴリ・数値フィルタの操作に対して即座にGPU演算が反映されるUIや、FPSやGPU時間などのパフォーマンス指標を可視化するインタラクティブなデモも併せて紹介します。

プロダクション水準のWebアプリ開発において、ReactはUI構築のためのJavaScriptライブラリとして、国際的にも事実上の一強状態であると言えます。
Next.jsはそれを支えるReactフレームワークとして、App RouterをやRSCといった革新的なメカニズムをReactに先駆けて導入してきました。
しかし移行の困難さやSSRに偏重した姿勢は「Next.js疲れ」を開発者にもたらし、Remixなど他のフレームワークへの離反も招きました。

本発表ではNuxtやSolidといった「React以外の」オルタナティブなOSSフレームワークの開発体制に着目し、フロントエンドを取り巻くエコシステムを「地政学」の観点から読み解きます。

米国を中心に激変しつつある昨今の国際情勢において、本発表がエンジニアとしての技術スタックを見つめ直すきっかけとなることでしょう。