<p data-line="0" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--bTHxBcNE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/733b902a4151a6abeeb540e8.jpeg%3Fsha%3D896a5be3b051e32520bc084dad0ec0d6e4c8c75c" loading="lazy" class="md-img"></p>
<p data-line="2" class="code-line">お久しぶりです、東京を中心に活動する React 開発者のコミュニティ、React Tokyo でお疲れ様会の幹事をしているふみやです！<br>
<a href="https://x.com/fumiyaki_" target="_blank" rel="nofollow noopener noreferrer">x.com</a>の DM とかで新宿・恵比寿・渋谷で飲み会で使えるおすすめのお店を教えて貰えるととても喜びます 🤩</p>
<p data-line="5" class="code-line">今回は 2025 年 6 月 20 日(金)に開催された「React Tokyo ミートアップ #6」にスタッフとして参加してきましたので、そのレポートをお届けします！</p>
<p data-line="7" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__77193ef0c0ee1" src="https://embed.zenn.studio/card#zenn-embedded__77193ef0c0ee1" data-content="https%3A%2F%2Freact-tokyo.connpass.com%2Fevent%2F354906%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://react-tokyo.connpass.com/event/354906/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://react-tokyo.connpass.com/event/354906/</a></p>
<h2 id="%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E6%A6%82%E8%A6%81" data-line="9" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E6%A6%82%E8%A6%81" aria-hidden="true"></a> イベントの概要</h2>
<p data-line="11" class="code-line">React Tokyo ミートアップは、React Tokyo コミュニティにご参加いただいている方々の親交を深め、Discord（オンライン）上でも活発な交流ができるような土壌作りを目的としたオフラインイベントです。</p>
<p data-line="13" class="code-line">メンバー同士の交流がメインのイベントとなっており、毎回決まるテーマに沿って行うグループワークや、交流会を行います。<br>
React に関する LT も行われます！</p>
<p data-line="16" class="code-line">今回は 6 度目の開催で、参加者は約 40 名でした。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--hNDLrGev--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d5bd41ff52c53acb13ae9d6c.jpeg%3Fsha%3D03dfd25d35272d869a3d1d10569df11b04c550b8" loading="lazy" class="md-img"></p>
<h2 id="%E4%BC%9A%E5%A0%B4%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B5%E3%83%BC-lt-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%82%BF%E3%82%A4%E3%83%9F%E3%83%BC%E6%A7%98" data-line="19" class="code-line">
<a class="header-anchor-link" href="#%E4%BC%9A%E5%A0%B4%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B5%E3%83%BC-lt-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%82%BF%E3%82%A4%E3%83%9F%E3%83%BC%E6%A7%98" aria-hidden="true"></a> 会場スポンサー LT 　<a href="https://corp.timee.co.jp/" target="_blank" rel="nofollow noopener noreferrer">株式会社タイミー様</a>
</h2>
<p data-line="21" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--YjmgMr1U--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/32cc5af308d4c1477f373329.jpeg%3Fsha%3D92bd3dd8de7e9d42098e491b343620ae81d97280" loading="lazy" class="md-img"><br>
オフラインイベントを応援していて、コミュニティを大切にしたいと話していました！<br>
会場も貸してますよー！とのことです（今回はありがとうございます！）</p>
<h2 id="%E9%A3%B2%E9%A3%9F%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B5%E3%83%BC-lt-rosca-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E6%A7%98" data-line="25" class="code-line">
<a class="header-anchor-link" href="#%E9%A3%B2%E9%A3%9F%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B5%E3%83%BC-lt-rosca-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E6%A7%98" aria-hidden="true"></a> 飲食スポンサー LT 　<a href="https://rosca.jp/" target="_blank" rel="nofollow noopener noreferrer">ROSCA 株式会社様</a>
</h2>
<p data-line="27" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--nSpUo0Tw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d2492f44b9474fc7b9ee7680.jpeg%3Fsha%3Dabdc23ad220c9ffd41cc53869b44160f94fe73f4" loading="lazy" class="md-img"></p>
<p data-line="29" class="code-line">サンドイッチとお酒を提供していただきました 🥪🍻<br>
エンジニアのキャリアの壁打ちとか募集しているらしいので、AI 時代にキャリアをどう考えていくのか壁打ちさせてもらいたいですね 🙌</p>
<h2 id="%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%88%E3%83%BC%E3%82%AF%3A-react-%E3%81%AE%E5%86%85%E9%83%A8%E6%A7%8B%E9%80%A0%E3%82%92%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8F" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%88%E3%83%BC%E3%82%AF%3A-react-%E3%81%AE%E5%86%85%E9%83%A8%E6%A7%8B%E9%80%A0%E3%82%92%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8F" aria-hidden="true"></a> メイントーク: React の内部構造を知っておく</h2>
<p data-line="34" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__dc98c81dd310c" src="https://embed.zenn.studio/card#zenn-embedded__dc98c81dd310c" data-content="https%3A%2F%2Fspeakerdeck.com%2Fcalloc134%2Freactnonei-bu-gou-zao-wozhi-tuteoku-react-tokyo-number-6-at-calloc134" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://speakerdeck.com/calloc134/reactnonei-bu-gou-zao-wozhi-tuteoku-react-tokyo-number-6-at-calloc134" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://speakerdeck.com/calloc134/reactnonei-bu-gou-zao-wozhi-tuteoku-react-tokyo-number-6-at-calloc134</a></p>
<p data-line="36" class="code-line"><a href="https://x.com/calloc134" target="_blank" rel="nofollow noopener noreferrer">かろっく</a>さんの発表で React の内部構造について Deep Dive する内容でした 🤿<br>
Discord や x でアイコンと名前は知っていたのですが、まさか学生さんだったとは驚きでした笑</p>
<p data-line="39" class="code-line">スライドにかわいい図がたくさんあってかわいいスライドでした。<br>
準備に凄く時間をかけている事が伝わる Deep Dive でした！</p>
<p data-line="42" class="code-line">「React のドキュメントでは仮想 DOM はあまり使われていなくて、Fiber ノードと呼ばれている」「alternate、FiberRootNode」など終始感嘆しっぱなしでした 🫠(脳が溶けている様子)<br>
皆も React のソースコード読もうぜ！</p>
<p data-line="45" class="code-line">発表の最後に「Meta の React 開発チームの皆様、間違いなどあれば教えてね〜」って言ってたけど会場に Meta の人はいたのかな 🤔</p>
<h2 id="%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%83%AF%E3%83%BC%E3%82%AF" data-line="47" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%83%AF%E3%83%BC%E3%82%AF" aria-hidden="true"></a> グループワーク</h2>
<p data-line="49" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--iOh0cLv8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/5ad23bffcc882a920621016b.jpeg%3Fsha%3D7886eaa2991e5fbdc77c3fdbb63de801dc9bb595" loading="lazy" class="md-img"></p>
<p data-line="51" class="code-line">今回のグループワークのテーマは【フォーム実装どうしている？】でした！</p>
<p data-line="53" class="code-line">自分の参加したグループでは React Hook Form をメインで使っている方が多かったです。<br>
バリデーションをエクセルで管理しつつ、そのデータからコード生成する仕組みが整っているなどの話があり興味深かったです！<br>
次点で Conform で、TanstackForm は様子見という印象でした 👀</p>
<p data-line="57" class="code-line">フォームの話のセットでバリデーションの話も上がり、「valibot 使いたいけど zod 使ってる」「テストめんどくさいよね・あまり書いていない・・・」などと悲しみ・苦しみの共有もされました 😭</p>
<h2 id="lt1%3A-jsx---%E6%AD%B4%E5%8F%B2%E3%82%92%E6%8C%AF%E3%82%8A%E8%BF%94%E3%82%8A%E3%80%81%E2%BE%AF%E2%BD%A9%E3%81%8C%E3%81%A3%E3%81%A6%E3%80%81%E3%82%A8%E3%83%A2%E3%81%8F%E3%81%AA%E3%82%8D%E3%81%86" data-line="59" class="code-line">
<a class="header-anchor-link" href="#lt1%3A-jsx---%E6%AD%B4%E5%8F%B2%E3%82%92%E6%8C%AF%E3%82%8A%E8%BF%94%E3%82%8A%E3%80%81%E2%BE%AF%E2%BD%A9%E3%81%8C%E3%81%A3%E3%81%A6%E3%80%81%E3%82%A8%E3%83%A2%E3%81%8F%E3%81%AA%E3%82%8D%E3%81%86" aria-hidden="true"></a> LT1: JSX - 歴史を振り返り、⾯⽩がって、エモくなろう</h2>
<p data-line="61" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--fESh6lXq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/7749903341b29e0f835343b9.jpeg%3Fsha%3Dcafffae4acdb03eeac09de3e19b34624a950a66d" loading="lazy" class="md-img"><br>
<a href="https://x.com/pal4de" target="_blank" rel="nofollow noopener noreferrer">晴れ井戸</a>さんの発表で JSX（インターフェース）について熱いぽえむが聞けました 🙌<br>
XHP という記法が JSX のふるさと？という過去の話から JSX の未来について学びが多かったです 🖌️</p>
<p data-line="65" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4cefc3cedcc1a" src="https://embed.zenn.studio/card#zenn-embedded__4cefc3cedcc1a" data-content="https%3A%2F%2Fspeakerdeck.com%2Fpal4de%2Fjsx-li-shi-wozhen-rifan-ri-gatute-emokunarou" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://speakerdeck.com/pal4de/jsx-li-shi-wozhen-rifan-ri-gatute-emokunarou" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://speakerdeck.com/pal4de/jsx-li-shi-wozhen-rifan-ri-gatute-emokunarou</a></p>
<h2 id="lt2%3A-dataloader-%E3%81%AE%E3%81%99%E3%82%9D%E3%82%81-meta-%E6%B5%81%E3%83%87%E3%83%BC%E3%82%BF%E3%83%95%E3%82%A7%E3%83%83%E3%83%81%E8%A8%AD%E8%A8%88" data-line="67" class="code-line">
<a class="header-anchor-link" href="#lt2%3A-dataloader-%E3%81%AE%E3%81%99%E3%82%9D%E3%82%81-meta-%E6%B5%81%E3%83%87%E3%83%BC%E3%82%BF%E3%83%95%E3%82%A7%E3%83%83%E3%83%81%E8%A8%AD%E8%A8%88" aria-hidden="true"></a> LT2: DataLoader のすゝめ Meta 流データフェッチ設計</h2>
<p data-line="69" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--DZ4gaKuU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/40a2ae60b766b409dcaf880a.jpeg%3Fsha%3D9725da3ee0e95792222a02ebabfd8b22f0cc21c6" loading="lazy" class="md-img"><br>
<a href="https://x.com/akfm_sato" target="_blank" rel="nofollow noopener noreferrer">akfm_sato</a>さんの発表で DataLoader のすゝめ。<br>
DataLoader はいいぞぉ、バッチングで待って N+１っぽいやつを解決するという話。<br>
x(1)<br>
x(2)<br>
と書いて x([1,2])で送るのと同等の挙動になるらしいです（詳しくは<a href="https://zenn.dev/akfm/articles/desing-of-data-fetching" target="_blank">akfm さんの zenn の記事</a>を確認してください 🙏）</p>
<p data-line="76" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7b756dd6045c5" src="https://embed.zenn.studio/card#zenn-embedded__7b756dd6045c5" data-content="https%3A%2F%2Fakifumisato.github.io%2Fslide-of-react-with-dataloader-202506%2F1" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://akifumisato.github.io/slide-of-react-with-dataloader-202506/1" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://akifumisato.github.io/slide-of-react-with-dataloader-202506/1</a></p>
<h2 id="lt3%3A-react-%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B-mrah-%E8%A8%AD%E8%A8%88%E3%81%AE%E3%82%B9%E3%82%B9%E3%83%A1" data-line="78" class="code-line">
<a class="header-anchor-link" href="#lt3%3A-react-%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B-mrah-%E8%A8%AD%E8%A8%88%E3%81%AE%E3%82%B9%E3%82%B9%E3%83%A1" aria-hidden="true"></a> LT3: React における MRAH 設計のススメ</h2>
<p data-line="80" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--Tdd51VrW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/4ab0611621162fce08dfc629.jpeg%3Fsha%3Dd7b228b7f0d58365f342d6f0c614049ce9046c38" loading="lazy" class="md-img"><br>
<a href="https://x.com/4h0xa" target="_blank" rel="nofollow noopener noreferrer">Ahoxa</a>さんの React における MRAH 設計のススメ。<br>
MRAH は Modular, Rendering, Adaptive, Hydration の頭文字らしいです！<br>
特にハイドレーションについて詳しく解説されていました 🚿</p>
<p data-line="85" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1865a45ffe232" src="https://embed.zenn.studio/card#zenn-embedded__1865a45ffe232" data-content="https%3A%2F%2Fspeakerdeck.com%2Fahoxa%2Freatcniokerumrahshe-ji-nosusume" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://speakerdeck.com/ahoxa/reatcniokerumrahshe-ji-nosusume" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://speakerdeck.com/ahoxa/reatcniokerumrahshe-ji-nosusume</a></p>
<h2 id="%E4%BA%A4%E6%B5%81%E4%BC%9A" data-line="87" class="code-line">
<a class="header-anchor-link" href="#%E4%BA%A4%E6%B5%81%E4%BC%9A" aria-hidden="true"></a> 交流会</h2>
<p data-line="89" class="code-line">交流会では、ドリンクとサンドイッチをお供にさまざまな話題で盛り上がっていました 🌼</p>
<p data-line="91" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--4WCmWOcI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/51211e1c0974d517662466db.jpeg%3Fsha%3Dfd482665ebfb3ec2ed9f3cbf4d09d0995abc54c4" loading="lazy" class="md-img"><br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--0TC5IvcN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/73b34e0c1756a9f5a45a74e3.jpeg%3Fsha%3Dc511fe08a01f160d2ececcf69d32667cd16f72e6" loading="lazy" class="md-img"></p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="94" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p data-line="96" class="code-line">久々に React Tokyo のイベントに参加して React にまつわる話がたくさん出来て楽しかったです。<br>
オンライン・オフラインどちらも継続して盛り上げていきたいので皆さんも是非たくさんご参加ください！</p>
<p data-line="99" class="code-line">イベント開催にあたり、会場、飲食のご支援を頂きました<a href="https://corp.timee.co.jp/" target="_blank" rel="nofollow noopener noreferrer">株式会社タイミー</a>様、<a href="https://rosca.jp/" target="_blank" rel="nofollow noopener noreferrer">ROSCA 株式会社</a>様、そして日頃よりコミュニティをご支援いただいているコミュニティスポンサーの株式会社<a href="https://kikkakecreation.com/" target="_blank" rel="nofollow noopener noreferrer">キッカケクリエイション</a>様、<a href="https://www.dress-code.com/" target="_blank" rel="nofollow noopener noreferrer">Dress Code 株式会社</a>様、<a href="https://www.rebase.co.jp/" target="_blank" rel="nofollow noopener noreferrer">株式会社 Rebase</a>様、 <a href="https://www.kakehashi.life/" target="_blank" rel="nofollow noopener noreferrer">株式会社カケハシ</a>様、株式会社 <a href="https://www.algo-artis.com/" target="_blank" rel="nofollow noopener noreferrer">ALGO ARTIS</a>様、<a href="https://careers2025.mosh.jp/" target="_blank" rel="nofollow noopener noreferrer">MOSH 株式会社</a>様、誠にありがとうございました。<br>
そして運営をサポートしてくださった、React Tokyo サポートチームの皆様、本当にありがとうございました。</p>
<p data-line="102" class="code-line">React Tokyo では、今後もオンライン・オフラインでのイベントを企画していきます。<br>
興味を持っていただけた方は、ぜひ React Tokyo の Discord にご参加ください！</p>
<p data-line="105" class="code-line">それではまた次回のイベントでお会いしましょう！</p>
<p data-line="107" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0a5a72d29515a" src="https://embed.zenn.studio/card#zenn-embedded__0a5a72d29515a" data-content="https%3A%2F%2Freact-tokyo.vercel.app%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://react-tokyo.vercel.app/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://react-tokyo.vercel.app/</a></p>
<p data-line="109" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__55866e8f73623" src="https://embed.zenn.studio/card#zenn-embedded__55866e8f73623" data-content="https%3A%2F%2Freact-tokyo.connpass.com%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://react-tokyo.connpass.com/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://react-tokyo.connpass.com/</a></p>
<p data-line="111" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--PLRNHrSo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/704bfcd0da5b503bea870724.jpeg%3Fsha%3Da4daa7b03ca926a29a3a8d941516d88384ae9833" loading="lazy" class="md-img"></p>


React Tokyo ミートアップ #6 イベントレポート

会場スポンサー LT 　株式会社タイミー様

飲食スポンサー LT 　ROSCA 株式会社様

メイントーク: React の内部構造を知っておく

LT1: JSX - 歴史を振り返り、⾯⽩がって、エモくなろう

LT2: DataLoader のすゝめ Meta 流データフェッチ設計

LT3: React における MRAH 設計のススメ

Discussion