創発的なコミュニケーションが生まれる新感覚の一日！React Tokyo フェス 2026 イベントレポート

皆さんこんにちは。花谷（@potato4d）です。

今回は2月28日に開催された React Tokyo フェス 2026 について、LINEヤフーとしてスポンサーを行いました。本記事では、イベント本編やスポンサーブースの様子についてお伝えします。

React Tokyo フェス 2026とは

React Tokyo フェスは、React Tokyo コミュニティが主導する、React をテーマとしたお祭り型のカンファレンスです。

一般的なトーク中心のカンファレンス形式とは異なり、参加者同士の交流を主軸に置いた設計が特徴で、デイフェスとナイトフェスの2部構成となっています。

ポスターセッションなど見ることも交流することも可能なコンテンツに加え、その場で話題を作り議論していくフィッシュボウル・ディスカッションも開催。新しい試みが中心ではありながら、React 入門者から経験者まで楽しめる間口の広さも魅力的なイベントです。

LINEヤフーとReact

LINEヤフーでは、「Yahoo! JAPAN トップページ」をはじめとするさまざまなプロダクトで React を使用しています。

直近の利用状況としては、2024年末に実施した社内アンケートでは React がトップの採用率。また、 React プロジェクトのうち9割が Next.js を併用している状況です。

プロジェクトでの活用以外で、過去にはReact.jsの公式日本語ドキュメントの翻訳に社員が携わるなど、何かと縁の深い技術となっています。

そういった経緯を踏まえ、新たに生まれた React のみにディープに浸ることができる場を応援していく意図を込め、今回 React Tokyo フェス 2026 に協賛する運びとなりました。

コンテンツレポート

まずはデイフェスの様子について、いくつか現地参加メンバーの感想をピックアップします。

React エンジニア向け SolidJS 解説

React との対比を軸に SolidJS の仕組みや設計思想を解説したポスターセッションです。

React を前提とした説明構成になっているため、差分として SolidJS の特徴が自然と浮かび上がる形になっており、普段 React を書いているエンジニアにとって非常に入りやすい内容でした。

(by りっくん)

ライブコーディングコンテンツ

約30分で X（旧Twitter）のクローンを構築するというライブコーディングセッションです。

AI を活用したいわゆる Vibe Coding のスタイルで進められており、短時間でアプリの骨格が出来上がっていく様子が印象的でした。
現場では浸透してきている Vibe Coding ですが、こういったイベント会場などでの活用は珍しく、実際に手を動かしている場面を見ることで、より身近に感じる機会となった方も多そうに感じました。

(by りっくん)

React Compiler 時代のパフォーマンスチューニング

React Compiler 導入時に発生しうる注意点を紹介するポスターセッションです。

自動 memo 化をオフにする方法の紹介など、実際に導入する際につまずきやすい箇所が丁寧に取り上げられており、わかりやすい内容でした。

(by l1lhu1hu1)

Zod v4 リリースによる新機能活用法を考える

Zod v4 で追加された新機能を活用して、既存の処理をどう書き換えられるかを紹介するポスターセッションです。

Top-level string format を使うことで処理をシンプルに記述できる点が印象的で、v3 と v4 で同じ処理を比較した構成もあって非常にわかりやすかったです。普段 Zod をあまり使っていなくても、使ってみようかなという気持ちになるポスターセッションでした。

(by l1lhu1hu1)

スポンサーブース

LINEヤフーの展示ブースの様子である。中央に青いテーブルクロスをかけた机があり、前面には「LINEヤフー」と大きく印字された白い布が垂れている。机の上には「React AI Review Challenge」と書かれた案内ボード、コード例を示したパネル、QRコード付きの案内札、ノベルティらしきステッカー類、キャラクターのぬいぐるみが置かれている。背後には白地に緑と青の斜めラインが入った縦型バナーが立っている。右側には黒いスタンドに設置された大型縦型モニターがあり、エディタ上でソースコードが表示されている。木目調の床とパネル壁に囲まれた屋内会場での展示風景である。

LINEヤフーブースでは、「React AI Review Challenge」という企画を実施しました。

AI によって生成された課題の多い React Component を来場者とともに AI を活用して修正していく催しで、ブラウザの機能が関わる部分のクリーンアップやエラーハンドリング、状態の設計など様々な問題に対する修正案をプロンプトとして受け取って実行していきました。

3人の来場者が展示ブースの大型縦型モニターを見ている後ろ姿の写真である。中央の人物は黄色のReactTokyoのTシャツを着ている。両手を後ろで組み、モニターに表示されたコードや説明文を見ている。左の人物は紺色のReactTokyoのTシャツを着ている。右の人物はペットボトル飲料を手に持ちながら画面を見ている。モニターには「React AI Review Challenge」の画面とソースコードが表示されている。手前には「LINEヤフー」と書かれたテーブルクロスが見え、屋内会場のパネル壁と木目調の床が背景に広がっている展示風景である。

全8つの課題を多くの来場者の方に修正いただいただけでなく、よりよいコーディング手法についての意見貢献や、AIが意図せず混入させてしまったバグの修正なども発生し、React Tokyo フェス 2026 のイベント本編と同じく、創発的なコミュニケーションが発生する場となりました。

また、今回ブースにて実施したレビュー企画については、後日作問者による解説記事を公開予定です。想定する課題とその対応方法、レビュー用の Skill について詳細を解説予定ですので、ぜひ以下コードの修正に挑戦してみてください。

全8つ、React Compiler は導入されていない環境を想定しています。

import React, { useState, useEffect } from 'react';

type Props = {
  userId: string;
  onUpdate: (data: any) => void;
}

export const UserProfile: React.FC<Props> = ({ userId, onUpdate }) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [count, setCount] = useState(0);

  useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1);
    }, 1000);
  }, [count]);

  const handleClick = () => {
    onUpdate(data);
  };

  const userAge = new Date().getFullYear() - new Date(data.birthDate).getFullYear();

  return (
    <div onClick={handleClick}>
      <h1>User Profile</h1>
      {loading && <p>Loading...</p>}
      {data && (
        <div>
          <p>Name: {data.name}</p>
          <p>Age: {userAge}</p>
          <p>Count: {count}</p>
          <button onClick={handleClick}>Update</button>
        </div>
      )}
    </div>
  );
};

スポンサーセッション『Layout as a Data - React のコンポーネントをデータレイヤーへ拡張する』

スポンサーセッション冒頭のスライド。『Layout as a Data - React のコンポーネントをデータレイヤーへ拡張する』というタイトルが表示されている。

また、今回はランチタイムにスポンサーセッションとして登壇も行っています。Yahoo! JAPAN スマホ Web の開発を担当する石倉が登壇し、UIのレイアウト情報をデータレイヤーで管理する「Layout as a Data」というアプローチを紹介しました。

五輪や選挙といった国民的イベントに合わせた特設 UI を、既存コンポーネントを活用しながら開発コストゼロで柔軟に提供するための工夫が語られています。

後日 Speaker Deck より公開を予定しておりますので、ぜひそちらも合わせてお楽しみください。

おわりに

l1lhu1hu1、sezawa、りっくん、kokuriha、potato4dの集合写真である。それぞれLINEヤフーのロゴがあしらった服装やノベルティを所持して自社をアピールしている。背後には「React AI Review Challenge」と書かれたボードがあり、緑色の付箋が多数貼られている。右側にはコードが表示された大型モニターが設置され、会場内の木目調の床とパネル壁が見える展示ブースの様子である。