トーク

フロントエンドとサーバーサイドで言語が異なる環境において、APIスキーマの整合性をどう保つかに悩んでいる方は多いでしょう。
多くの現場でOpenAPIが採用されていますが、数千行に及ぶ openapi.yml を人間がメンテナンスし続けるのは、もはや限界ではないでしょうか。

本セッションでは、ReactとRubyのプロダクト開発で、Microsoftが開発する「TypeSpec」を2年間運用してきた知見を共有します。
TypeSpecはTypeScriptライクな構文を持つAPI定義専用の言語で、Orvalと組み合わせることで型安全なクライアント生成を強力に自動化できます。

単なる導入事例にとどまらず、運用で直面したトラブルや、AIとの相性の良さなど、
2年経った今だからこそ語れる導入後の現在地を紹介します。

Reactのkey、警告が出るから付けてるだけになっていませんか?
「なぜ必要なのか」を考えると、Reactの内部動作が見えてきます。

• Reactは何を基準にUIを更新しているのか
• keyはその中でどんな役割を担っているのか

このセッションでは、keyを入り口に、仮想DOMとReconciliationの仕組みを整理します。
実装を深掘りするのではなく、「だからkeyが必要なんだ」と腹落ちできることを目指します！

Panda CSSは、Chakra UIチームが開発したゼロランタイムで型安全なCSS-in-JSライブラリです。
私は新製品プロジェクトでPanda CSSを採用し、約2年にわたり実務で運用してきました。

本セッションでは、

• PandaCSSの概要と注目度
• ゼロランタイムのCSSライブラリを選ぶ理由
• 型安全が開発体験に与える具体的な影響
• Emotionやstyled-componentsとの思想・運用の違い
• 実際の開発現場で見えてきた強みと弱み
  などを具体例とともに共有し、CSSライブラリの採用判断に役立つポイントを整理してお話しします！

新しいバージョンをデプロイした直後、ユーザーの画面が真っ白になる。
コンソールにはChunkLoadErrorの文字。フロントエンド開発をしていれば一度は遭遇する問題ではないでしょうか。
この問題の正体は「バージョンスキュー」です。 ブラウザに残った古いHTMLが参照するJSチャンクが、デプロイ後のサーバーには存在せず404になり、画面が壊れます。

本トークではまずチャンク分割とバージョンスキューの仕組みを図解し、なぜこの問題が構造的に避けられないのかを明らかにします。
その上で、Error Boundaryによるリカバリー、外部ストレージでの旧アセット保持、バージョンチェックによる事前検知など複数の対策を比較検討します。
最後に、Next.js＋コンテナデプロイの環境で実際に対策を導入した過程と得られた知見を共有します。

Next.js 16 から登場した Cache Components. かつては試験的な機能としてPartial Prerendering（PPR）という名前で提供されていました. ですが, Next.js Conf 2025では "Cache Components" という名前になりました. "Rendering"のも"Parital"でもない, けれどもPPRの後継機能.

"Cache" "Components"が意図するところからこの機能でNext.jsチームが達成したいこと, 私たち開発者が新機能に対してどう向き合うべきかを再確認します.

Webサービスのフロントエンドを開発していると、<link rel=”prefetch”>のような記述を見かけることがあります。
これはユーザーの動きや利用する際の環境を予測して、あらかじめWebページの読み込みやレンダリングなどを行い、パフォーマンスを向上させるための投機的読み込み向けの記述の1つです。

このセッションでは、link要素のrel属性で設定できる投機的読み込み機能を理解し、サービスの特性にあわせた使い分け方法をご紹介します。
また、ブラウザの実験的機能である投機ルールAPIで、従来の投機的読み込み機能のどういった課題を解決しようとしているのかについてもお話します。
対象者は、Webサービスのパフォーマンス改善に興味のある方を想定しています。

RSCの普及とともに、フロントエンドからバックエンドの処理を直接呼び出す手法が一般的になりました。
私はその中でもフレームワーク間の Server Functions のアプローチの違いが非常に面白いと感じています。

本セッションでは、Tanstack StartとRSCに焦点を当て、設計思想の違いや内部実装について包括的に説明します。
例えば、RSCは関数単位で実行ランタイムを指定できる設計になっており、ネットワーク越しの通信であっても単なる関数呼び出しとして記述します。一方Tanstackは、ミドルウェアやバリデーションなどAPIサーバーの概念が積極的に取り入れられているのが特徴で、両者はネットワークやAPIサーバの隠蔽度合いに差異があります。

これに加えて、業務でTanstack StartやNextを、個人でWakuを利用しているため、実際の開発体験の違いについても説明します。

AIとの開発を日常的に取り入れたことで、フロントエンドエンジニアとしての働き方が大きく変わりました。コードを自分で書く時間が減り、バックエンド領域にも自然と染み出せるようになり、CursorからClaude Codeへツールを移行する中で「開発する」という行為そのものの捉え方も変化しています。本セッションでは、AIエージェントを活用した開発を実践する中で起きた変化と、これからのフロントエンドエンジニアの可能性についてお話しします。

個人開発でWebアプリを量産したいけれど、ホスティング費用はできるだけ抑えたい。そんな悩みを抱える開発者の方に向けて、2026年時点での実用的なホスティング戦略を紹介します。
NextJSユーザー向けに、Vercelの代替選択肢としてCloudflare Workersを使ったホスティング方法を解説します。無料枠で何個までアプリをホストできるのか、具体的なデプロイ手順とともに実例を交えてお伝えします。
また、主要なホスティングサービス以外の選択肢として以下の方法も紹介します。
・NextJSに対応した低価格VPSの活用法
・バニラPHPアプリを共有サーバーで運用する方法
・ローカルサーバーとCloudFlare Tunnelを組み合わせた自宅ホスティング
各サービスの料金比較と実際の運用コストを明示しながら、皆さんの開発スタイルに合った最適なホスティング戦略を見つける手助けをします。

現在のフロントエンド開発では、さまざまなUIフレームワークを利用して宣言的でコンポーネント指向な開発スタイルを採用しています。

一方でUIフレームワークの普及とともにstorybookも利用者を増やしていきました。
これらのライブラリによりフロントエンド開発は更に効率的なものとなりましたが、ただ導入するだけではうまく使いこなしているとは言えません。

この発表ではstorybook導入するにあたって、私が行ったフロントエンド開発プロセス自体の見直しの内容をもとに「Containerから実装を始めないこと」や「外部接続を面倒くささで定義する方法」などstorybookを使いこなすためのノウハウを紹介させていただきます。

2026年1月、MCPの公式拡張としてMCP Appsがリリースされました。

AIがテキストだけでなくインタラクティブなUIコンポーネントを返せるようになり、AIチャット上でリッチな体験が実現します。

• AIが返したグラフやチャートを直接操作し指示を出す
• AIがカンバンUIを返し、その場でタスクを編集・登録する

これまでプラットフォーム固有でこうした仕組みの議論が進んでいましたが、MCP Apps で標準化され、複数のAIクライアントで動くようになりました。

フロントエンドエンジニアにとって、これは「AIの中にUIを設計する」という新たな領域の登場です。本セッションでは、

• MCP Appsの仕組みについて
• 人間が操作すべきUIとAIに委ねるUIの境界線
• 実装デモを交えたユースケース紹介

を通じ、AI時代のフロントエンド開発の変化の一つの可能性を考察します。

追加開発のたびにアプリケーションの仕様を設計書に書き写し、その設計書を見ながら実装する。
この往復作業は工数がかかるわりに付加価値が低く、設計と実装の乖離も生みやすい構造的な課題となっているのではないでしょうか。

本トークでは、SPA の画面から単一の HTML ファイルを自動生成し、「実画面そのものを設計の正」とする開発フローを紹介します。
生成された HTML モックは AI エージェントが直接読み書きできるため、画面の現状把握や改修案の作成に活かせます。
モックは開発サイクルごとに再生成するだけなので、従来の設計書のようなメンテナンスは不要です。
さらに Figma への取り込みも可能なため、デザイナーとの協働にも活用できます。

設計と実装をつなぐ作業に使っている時間を UX 設計やコンポーネント設計に回せるようにしたい、そんなきっかけになるフローをご紹介します！

OG画像メーカーやSNSキャンペーン、プロフィールカード生成など、ブラウザ上で画像を生成する事例が急速に増えています。
近年はCoding Agentなどの登場により画像を生成する実装の敷居が下がりましたが、実際のプロダクトとして成立する品質に引き上げるためには、知識が必要だと考えています。　

本セッションでは、Canvas APIを使った画像生成の基礎から実践的な設計パターンまでを解説します。仕事で開発した大規模メディアで利用しているOG画像エディタや、SNSキャンペーン用に開発した画像エディタの事例を紹介しながら、クオリティを高めるためのテクニックや、ユーザーが迷わず利用できる設計について取り上げます。

Cloudflareはフロントエンドエンジニアにとって親しみのあるPaaS的なサービスを多数持っています。

例えば、安価にサーバーレスが配信できるCloudflare Workers、Dockerコンテナを安価に動かせるContainers、イベント駆動の非同期処理パイプラインを構築できるCloudflare Workflowsなどです。

これらのサービスはWorkersを中心に設計されており、運用時に知っておきたい落とし穴もあります。

本セッションでは、Cloudflareのサービス群を使うプラクティスを紹介します。具体的には以下を扱います。

1. 各種サービス（Workers / Containers / Workflowsなど）の基本紹介
2. 各種サービスの作成方法とwrangler configが与える影響
3. 本番運用を見据えたWorkersの運用プラクティス

Apple製品の紹介ページや映像作品のLPでは、React登場以前からjQuery/GSAP等で「スクロール演出・トランジション多めのCSSリッチなLP」（通称、クリエイティブ系）が作られてきました。その実態は熟練のマークアッパーがアニメーションの状態・タイミング・イベントを泥臭く調整する試行錯誤です。

実現したい要件をほとんどCoding Agentが実装してくれる2026年でも、複雑なアニメーション付きのマークアップをAIだけで仕上げることは困難を極めます。（要件を自然言語などで伝えることが困難なため）

本セッションでは、最近のフロントエンド環境に合わせて主要なアニメーションライブラリ（GSAP/Motion/Anime.jsなど）を比較、選定を行い
Coding Agentと一緒にクリエイティブ系LPを効率よく作るための実装パターンを紹介します。

Reactを使いこなす鍵は、その「思想」の正しい理解にあります。
本セッションでは、Reactを単なるライブラリではなく一つの「思想体系」として捉え直し、全てのReact開発者が共通して持つべき基礎教養を提示します。

「f(state) = UI」という純粋関数性の重要性、状態をスナップショットとして扱うイミュータブルな設計、
そして副作用を「外部システムとの同期」として外部に逃がす設計など、React独自のメンタルモデルを深掘りします。
さらに、Fiberアーキテクチャや差分検知アルゴリズムといった内部実装のソースコード・データ構造にも踏み込み、
並行レンダリング等の最適化手法も踏まえつつ、その思想と実装の繋がりを紐解きます。

この一年、様々なところで「MCP」という単語を聞くようになりました。
なにやらAIチャットが外部と連携できるようになるようです。
ところでMCPサーバーとはどのような仕組みで動いているのでしょうか。

また、MCP Appsという仕様も2026年1月に安定化しました。
MCP Appsとは一体なんなのでしょうか。もしくは、どのように動いているのでしょうか。いわばサードパーティのアプリケーションをどのように隔離しているのでしょうか。

MCP Appsのためのフレームワークchapplinを開発している私が、MCPサーバーからMCP Appsまで技術的な面にスコープを当てて紹介します。

SignalsはTC39のStage1標準化プロポーザルとして進行中で、依存関係を追跡し必要な部分だけを効率的に更新する仕組みとして注目されています。

Signalsが提案するリアクティブモデルは、状態の変更を効率よく扱う設計アプローチとして現代のフロントエンド開発における重要な設計パターンのひとつです。

状態管理は避けて通れない課題ですが、Signalsを理解することで、不要な再描画を減らす設計やリアクティブシステムの振る舞いを構造的に捉える視点が得られます。

フレームワークに依存しない状態管理の共通原理を理解できる内容です。

本セッションでは、以下の視点でSignalsの仕組みを解説します。
・Signalsがどのように依存関係を追跡しているのか
・状態が変わったとき、必要な箇所だけ更新される仕組み
・signal-polyfillを用いた実装検証から得られた知見

ガワネイティブアプリとは、SwiftやKotlinで開発されたネイティブアプリの中でWebViewで機能を表現するアプリの形式です。
様々な都合で、ネイティブアプリ開発が行えない場合において、
Webフロントエンドエンジニアを中心に組成されたチームで、スマートフォンアプリを開発する際に選択される形式でもあります。

本セッションでは、ガワネイティブアプリにうっかり遭遇してしまったフロントエンドエンジニアの方に向け、WebViewの取り扱い方法や、注意点などをお話しします。
また、WebViewで作られた画面とネイティブコードの連携方法など高機能なアプリ開発のためのTipsもお伝えします。

トピック

• iOSで注意すべきCSS
• 検知できるイベント、できないイベント
• ページ遷移（画面遷移）の注意点

差分の大きいPRを複数の小さなPRに分けることでレビュワーの負担を抑えることができます。
でも、チケットを細かく分割するのって正直めんどくさくないですか？
そんなあなたに！！！
エンジニア歴半年の学生でもできた、AIとタスク管理ツールを活用して"ちょっと楽に"チケット分割するためのヒントを、数千ファイルの変更を伴うチケットに立ち向かった経験をもとに紹介します！