<p data-line="0" class="code-line">こんにちは！じょうげんです。</p>
<p data-line="2" class="code-line">2025年3月21日に開催されたReact Tokyo ミートアップ #3に参加してきましたので、そのレポートをお届けします。</p>
<p data-line="4" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__72fab9d936451" src="https://embed.zenn.studio/card#zenn-embedded__72fab9d936451" data-content="https%3A%2F%2Freact-tokyo.connpass.com%2Fevent%2F345893%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://react-tokyo.connpass.com/event/345893/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://react-tokyo.connpass.com/event/345893/</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="6" 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="8" class="code-line">React Tokyo ミートアップは、React Tokyoコミュニティにご参加いただいている方々の親交を深め、Discord（オンライン）上でも活発な交流ができるような土壌作りを目的としたオフラインイベントです。</p>
<p data-line="10" class="code-line">メンバー同士の交流がメインのイベントとなっており、毎回決まるテーマに沿って行うグループワークや、交流会を行います。<br>
Reactに関するLTも行われます！</p>
<p data-line="13" class="code-line">今回は３度目の開催で、参加者は約40名でした。</p>
<p data-line="15" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--USuj7w-B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/1d23683ca4212901b3d5fdc7.jpg%3Fsha%3D329f6164e0e87936917087484d36e001beab60cb" alt="オプティム社のロゴを背に受付をする様子" loading="lazy" class="md-img"></p>
<p data-line="17" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--g-6MWoTn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/98003059b407348f5ab8e3e4.jpg%3Fsha%3D6e7c854247bca2103cd35bcefbea589050011e95" alt="説明をする様子" loading="lazy" class="md-img"></p>
<h2 id="%E7%99%BA%E8%A1%A8%E8%B3%87%E6%96%99" data-line="19" class="code-line">
<a class="header-anchor-link" href="#%E7%99%BA%E8%A1%A8%E8%B3%87%E6%96%99" aria-hidden="true"></a> 発表資料</h2>
<p data-line="21" class="code-line">メイントーク&amp;LTの資料</p>
<h3 id="react%E3%82%92%E6%AE%B5%E9%9A%8E%E7%9A%84%E3%81%AB%E8%A6%97%E3%81%84%E3%81%A6%E3%81%BF%E3%82%8B" data-line="23" class="code-line">
<a class="header-anchor-link" href="#react%E3%82%92%E6%AE%B5%E9%9A%8E%E7%9A%84%E3%81%AB%E8%A6%97%E3%81%84%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> Reactを段階的に覗いてみる</h3>
<span class="embed-block embed-speakerdeck"><iframe src="https://speakerdeck.com/player/91082412cf854134881fa0b3cadf1519" scrolling="no" allowfullscreen allow="encrypted-media" loading="lazy"></iframe></span>
<p data-line="26" class="code-line"><a href="https://zenn.dev/taisei_13046" target="_blank">たいせーさん</a></p>
<h3 id="view-transition-api" data-line="28" class="code-line">
<a class="header-anchor-link" href="#view-transition-api" aria-hidden="true"></a> View Transition API</h3>
<span class="embed-block embed-speakerdeck"><iframe src="https://speakerdeck.com/player/5269ebe306424939a27be7a7eef807c2" scrolling="no" allowfullscreen allow="encrypted-media" loading="lazy"></iframe></span>
<p data-line="31" class="code-line"><a href="https://github.com/shirakaba" target="_blank" rel="nofollow noopener noreferrer">Jamie Birchさん</a></p>
<h3 id="create-tsrouter-app%E3%81%A7%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E6%AC%A1%E4%B8%96%E4%BB%A3react-spa" data-line="33" class="code-line">
<a class="header-anchor-link" href="#create-tsrouter-app%E3%81%A7%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E6%AC%A1%E4%B8%96%E4%BB%A3react-spa" aria-hidden="true"></a> create-tsrouter-appで実現する次世代React SPA</h3>
<span class="embed-block embed-speakerdeck"><iframe src="https://speakerdeck.com/player/2a2621cfb91849b69cab3ed24c085421" scrolling="no" allowfullscreen allow="encrypted-media" loading="lazy"></iframe></span>
<p data-line="36" class="code-line"><a href="https://zenn.dev/yusukekikuta" target="_blank">Yusuke Kikutaさん</a></p>
<h3 id="cline%E3%81%ABnext.js%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%94%B9%E5%96%84%E3%82%92%E3%81%8A%E9%A1%98%E3%81%84%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F" data-line="38" class="code-line">
<a class="header-anchor-link" href="#cline%E3%81%ABnext.js%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%94%B9%E5%96%84%E3%82%92%E3%81%8A%E9%A1%98%E3%81%84%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F" aria-hidden="true"></a> ClineにNext.jsのプロジェクト改善をお願いしてみた</h3>
<span class="embed-block embed-speakerdeck"><iframe src="https://speakerdeck.com/player/4907332b7db342ba8f7773cab527436c" scrolling="no" allowfullscreen allow="encrypted-media" loading="lazy"></iframe></span>
<p data-line="41" class="code-line"><a href="https://zenn.dev/riml" target="_blank">Rimlさん</a></p>
<h2 id="%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%88%E3%83%BC%E3%82%AF%26lt%E3%81%AE%E6%A7%98%E5%AD%90" data-line="43" 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%26lt%E3%81%AE%E6%A7%98%E5%AD%90" aria-hidden="true"></a> メイントーク&amp;LTの様子</h2>
<p data-line="45" class="code-line">皆さんとても奥が深い内容をお話しされていて、とても興味深かったです。<br>
特にメイントークでは、実際にflowのコードを追うことでReactも普通のライブラリと同じように作られていることがわかり、とても勉強になりました。</p>
<p data-line="48" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--IGLS6xXP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/4d4ea8becdcc33fba0739752.jpg%3Fsha%3D1cabafe66d5253801ddb54da6d0ddbb43351a982" alt="メイントークの様子" loading="lazy" class="md-img"></p>
<p data-line="50" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--h_wd8ux_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/4cd1bf7ef823dafad36ac449.jpg%3Fsha%3D0bd4612e223c7556119289f22143fccf54736497" alt="React内部のflowコード" loading="lazy" class="md-img"></p>
<p data-line="52" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--7gppgUrz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/bbb13010d1d5fb08925641cc.jpg%3Fsha%3Dd16f966365b5fc78ca3500b88c63ae65763f54ed" alt="ViewTransitionのスライド" loading="lazy" class="md-img"></p>
<p data-line="54" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--9uYPkuRN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/dd57a06303720e444e8d8bbb.jpg%3Fsha%3D61d8c027e7f39bf0cf1d0c17ae0d7a86f62870d1" alt="create-tsrouter-appのスライド" loading="lazy" class="md-img"></p>
<p data-line="56" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--vLCk_LSP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/6b6492413548bb4525de25f3.jpg%3Fsha%3D2c460d2f39ec1dce30c5e9d6b38957285b90e3a7" alt="Clineによる改善のスライド" loading="lazy" class="md-img"></p>
<h2 id="%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AE%E6%A7%98%E5%AD%90" data-line="58" 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%E3%81%AE%E6%A7%98%E5%AD%90" aria-hidden="true"></a> グループワークの様子</h2>
<p data-line="60" class="code-line">参加者がグループを作ってディスカッションを行う時間も設けられていました。<br>
テーマは「開発にAI活用してる？」。<br>
AIはまさに今後のトレンドとなる技術ということもあり、皆さん熱心に話し合っていました。</p>
<p data-line="64" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--Ri-0KgoS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/195b16665bc7d388642f03b2.jpg%3Fsha%3D2642b35c5861362076331e7d1ba87ec3eb026e8a" alt="グループワークの様子" loading="lazy" class="md-img"></p>
<p data-line="66" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--X0ZOotjS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d218ee948e14ecbd3d1646eb.jpg%3Fsha%3Dc38d8bffda628d5ffa3b76870073fb78b5b5efc0" alt="グループワークの様子" loading="lazy" class="md-img"></p>
<p data-line="68" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--mdOB5KSI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/cf4b1cc850c88ba2bf968169.jpg%3Fsha%3De98bee06f2f36335a7bcb3e9a28be54c9491ffb6" alt="グループワークの様子" loading="lazy" class="md-img"></p>
<h2 id="%E4%BA%A4%E6%B5%81%E4%BC%9A%E3%81%AE%E6%A7%98%E5%AD%90" data-line="70" class="code-line">
<a class="header-anchor-link" href="#%E4%BA%A4%E6%B5%81%E4%BC%9A%E3%81%AE%E6%A7%98%E5%AD%90" aria-hidden="true"></a> 交流会の様子</h2>
<p data-line="72" class="code-line">交流会では、参加者同士で自由に会話を楽しみました。<br>
Reactに関する話題だけでなく、様々な話題で盛り上がっていました。<br>
話していると、あっという間に時間が過ぎてしまい、最後はとても名残惜しい気持ちになりました。</p>
<p data-line="76" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--YwmlQJui--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/1663c7a30b2574150bee1686.jpg%3Fsha%3Dcecabc8903ce44940d7ad3c1835099cb0f4e8f88" alt="交流会の様子" loading="lazy" class="md-img"></p>
<p data-line="78" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--8gMvW0XN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/5f9d6702a8a97fac4d99ae9c.jpg%3Fsha%3D579dbc9b431f25cd1c69c0114a2fa6556db4a84b" alt="集合写真" loading="lazy" class="md-img"></p>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" data-line="80" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h2>
<p data-line="82" class="code-line">今回は私も運営スタッフとして受付や進行を手伝わせていただき貴重な体験となりました。<br>
参加者の皆さんが楽しんでいただけたようで、とても嬉しく思います。<br>
毎回募集から１時間程度で満枠になるほどの人気ぶりで、それを感じさせる熱量の高いイベントでした。</p>
<p data-line="86" class="code-line">イベント開催にあたり、ご支援頂きました<a href="https://www.optim.co.jp/" target="_blank" rel="nofollow noopener noreferrer">株式会社オプティム</a>様、<a href="https://levtech.co.jp/" target="_blank" rel="nofollow noopener noreferrer">レバテック株式会社</a>様、誠にありがとうございました。そして運営をサポートしてくださった皆様、本当にありがとうございました。</p>
<p data-line="88" class="code-line">React Tokyoでは定期的にイベントを開催いたしますので、興味を持っていただいた方は是非参加してみてください。<br>
それではまた次回のイベントでお会いしましょう！</p>
<p data-line="91" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e3d3da88c383" src="https://embed.zenn.studio/card#zenn-embedded__e3d3da88c383" 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="93" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f0154cc278ce7" src="https://embed.zenn.studio/card#zenn-embedded__f0154cc278ce7" 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>


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

create-tsrouter-appで実現する次世代React SPA

ClineにNext.jsのプロジェクト改善をお願いしてみた

Zenn

react

Discussion