<p data-line="0" class="code-line">こんにちは！<br>
React Tokyo Publicationでは初めての記事投稿ということに気づきました、React Tokyoの立ち上げメンバーの一人、Teruhisaです。</p>
<p data-line="3" class="code-line">今回は、2025年9月7日に<strong>札幌で開催されたReact Server Componentsハンズオン</strong>についてのイベントレポートになります。</p>
<p data-line="5" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__86a4d3deaf65e" src="https://embed.zenn.studio/card#zenn-embedded__86a4d3deaf65e" data-content="https%3A%2F%2Freact-tokyo.connpass.com%2Fevent%2F365128%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://react-tokyo.connpass.com/event/365128/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://react-tokyo.connpass.com/event/365128/</a></p>
<h2 id="react-%22tokyo%22-%E3%81%AA%E3%81%AE%E3%81%AB%E6%9C%AD%E5%B9%8C%E9%96%8B%E5%82%AC%EF%BC%9F" data-line="7" class="code-line">
<a class="header-anchor-link" href="#react-%22tokyo%22-%E3%81%AA%E3%81%AE%E3%81%AB%E6%9C%AD%E5%B9%8C%E9%96%8B%E5%82%AC%EF%BC%9F" aria-hidden="true"></a> React "Tokyo" なのに札幌開催？</h2>
<p data-line="9" class="code-line">React Tokyoは、オフラインでのミートアップを中心にDiscordでのオンラインでも交流を行っているReactコミュニティです。<br>
実は！東京在住でなくても<strong>全世界から参加可能</strong>です！</p>
<p data-line="12" class="code-line">普段は東京を中心にオフラインイベントを行っていますが、この度<a href="https://sapporo-engineer-base.dev/" target="_blank" rel="nofollow noopener noreferrer">Sapporo Engineer Base</a>様のご支援により、フロントエンドカンファレンス北海道とのコラボイベントとして、<strong>初の地方開催</strong>が実現しました。<br>
ご招待いただき、誠にありがとうございました！</p>
<p data-line="15" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4e8153a1870d" src="https://embed.zenn.studio/card#zenn-embedded__4e8153a1870d" data-content="https%3A%2F%2Fnote.com%2Ffec_hokkaido%2Fn%2Fn13354438989f" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://note.com/fec_hokkaido/n/n13354438989f" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://note.com/fec_hokkaido/n/n13354438989f</a></p>
<p data-line="17" class="code-line">フロントエンドカンファレンス北海道は 2025年9月6日（土曜日）に開催され、このハンズオンは翌日の 2025年9月7日（日曜日）に開催されました。</p>
<h2 id="react-server-components%EF%BC%88rsc%EF%BC%89%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3" data-line="19" class="code-line">
<a class="header-anchor-link" href="#react-server-components%EF%BC%88rsc%EF%BC%89%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3" aria-hidden="true"></a> React Server Components（RSC）ハンズオン</h2>
<p data-line="21" class="code-line">今回主催側の要望もあり、React Tokyoでも初めてのハンズオンイベントとなりました。</p>
<h3 id="%E5%BA%A7%E5%AD%A6" data-line="23" class="code-line">
<a class="header-anchor-link" href="#%E5%BA%A7%E5%AD%A6" aria-hidden="true"></a> 座学</h3>
<p data-line="25" class="code-line">React初学者の参加も考慮し、いきなり手を動かすのではなくまず初めに座学の時間を設けることにしました。<br>
担当は、この記事の筆者でもある私です。</p>
<p data-line="28" class="code-line">座学では、これまでのWebアプリケーション開発を簡単におさらいし、「React Server Components（RSC）はどういうモチベーションで作られたのか」「フレームワークとRSCの差は何か」を念頭に話を進めました。</p>
<p data-line="30" class="code-line">ありがたいことに前日に開催された本祭で、うひょさんによるトーク「<a href="https://fortee.jp/frontend-conf-hokkaido-2025/proposal/3ebf1951-dd48-4f1b-a0c7-9d2753291af4" target="_blank" rel="nofollow noopener noreferrer">RSCの時代にReactとフレームワークの境界を探る</a>」もあり、参加者の皆さんの理解もスムーズだった印象でした。</p>
<p data-line="32" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/d0f8b65e494b-20250910.jpeg" alt="座学資料タイトル" class="md-img" loading="lazy"></p>
<h3 id="%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3" data-line="34" class="code-line">
<a class="header-anchor-link" href="#%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3" aria-hidden="true"></a> ハンズオン</h3>
<p data-line="36" class="code-line">ハンズオンでは、<a href="https://waku.gg/" target="_blank" rel="nofollow noopener noreferrer">Waku</a>を使ってRSCを体験する機会としました。<br>
担当は、Wakuの作者でもある<a href="https://x.com/dai_shi" target="_blank" rel="nofollow noopener noreferrer">Daishi</a>さんです。</p>
<p data-line="39" class="code-line">取り上げたテーマは、Server/Client Components、動的／静的レンダリング、静的コンテンツへのビルド後に serve で確認する場合とWebサーバー上で動かす場合の違い など、RSCで違いが出やすいポイントです。</p>
<p data-line="41" class="code-line">最後に約1時間、参加者の皆さんそれぞれが自身で決めたテーマで自由に開発してもらいました。<br>
Client Componentに焦点を当てて実装した方、メモアプリや在庫管理アプリをテーマに実装した方、Wakuの<a href="https://waku.gg/blog/rethinking-fine-grained-components" target="_blank" rel="nofollow noopener noreferrer">Slices機能</a>を試した方、など、皆さん時間の許す限り手を動かしていらっしゃいました。</p>
<p data-line="44" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/01d785406c88-20250910.png" alt="ハンズオン資料タイトル" class="md-img" loading="lazy"></p>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" data-line="46" 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="48" class="code-line">初めての地方開催ということもありましたが、無事開催することができホッとしております。</p>
<p data-line="50" class="code-line">これを皮切りに、地方でのイベント開催がさらに実現できればと考えておりますので、東京以外で地域に根ざしたコミュニティ運営に携わっている方、他イベントを主催している方等で「React Tokyo呼びたい」と少しでも思っていただけましたら、お気軽にお声掛けください！</p>
<p data-line="52" class="code-line">最後に、改めまして今回このような場を設けていただきました<a href="https://www.frontend-conf.jp/" target="_blank" rel="nofollow noopener noreferrer">フロントエンドカンファレンス北海道の皆様</a>ならびに<a href="https://sapporo-engineer-base.dev/" target="_blank" rel="nofollow noopener noreferrer">Sapporo Engineer Base</a>様、また、カンファレンス翌日にも関わらずご参加くださった皆様、本当にありがとうございました！</p>
<p data-line="54" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/40b08f981737-20250911.png" alt="参加者の皆さんと記念撮影" class="md-img" loading="lazy"></p>
<p data-line="57" class="code-line">北海道、最高〜！</p>
<span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__5454aa44584e6" src="https://embed.zenn.studio/tweet#zenn-embedded__5454aa44584e6" data-content="https%3A%2F%2Fx.com%2Ft6adev%2Fstatus%2F1964665385879490704" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<h2 id="%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B" data-line="61" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B" aria-hidden="true"></a> お知らせ</h2>
<p data-line="63" class="code-line">フェス開催します！参加登録まだの方、是非この機会に！<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__38f9e5e1b8033" src="https://embed.zenn.studio/card#zenn-embedded__38f9e5e1b8033" data-content="https%3A%2F%2Freact-tokyo.connpass.com%2Fevent%2F366003%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://react-tokyo.connpass.com/event/366003/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://react-tokyo.connpass.com/event/366003/</a></p>
<h2 id="%E3%81%8A%E3%81%BE%E3%81%91" data-line="66" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%81%BE%E3%81%91" aria-hidden="true"></a> おまけ</h2>
<p data-line="68" class="code-line">全体的に和気あいあいとしつつ、お昼も美味しいお弁当頂きながら開発秘話などにも花が咲きました。</p>
<p data-line="70" class="code-line">フロントエンドカンファレンス北海道実行委員長撮影：</p>
<span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__a61073957a14e" src="https://embed.zenn.studio/tweet#zenn-embedded__a61073957a14e" data-content="https%3A%2F%2Fx.com%2F_n13u_%2Fstatus%2F1964541211311771909" frameborder="0" scrolling="no" loading="lazy"></iframe></span>


【札幌開催】React Server Componentsハンズオン イベントレポート

React Server Components（RSC）ハンズオン

react

【札幌開催】React Server Componentsハンズオンイベントレポート

Discussion