<p data-line="0" class="code-line">こんにちは！React Tokyo サポートメンバーの locol(<a href="https://x.com/locol23" target="_blank" rel="nofollow noopener noreferrer">@locol23</a>) です。<br>
<a href="https://discord.com/invite/5B9jYpABUy" target="_blank" rel="nofollow noopener noreferrer">React TokyoのDiscordサーバー</a>では、React に関する最新技術の動向から、日々の開発で直面する具体的な課題まで、メンバー間で活発な情報共有が日々交わされています。</p>
<p data-line="3" class="code-line"><code>React Tokyo トレンドレポート</code>は Discord サーバー内の<a href="https://discord.com/channels/1313457938962190368/1313657961033367582" target="_blank" rel="nofollow noopener noreferrer">情報・質問部屋</a>で盛り上がったトピックを定期的にまとめて紹介するレポートです！<br>
過去記事は以下のリンクからご覧いただけます。</p>
<p data-line="6" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__311b8bc092185" src="https://embed.zenn.studio/card#zenn-embedded__311b8bc092185" data-content="https%3A%2F%2Fzenn.dev%2Freact_tokyo%2Farticles%2F0d373fe1178452" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/react_tokyo/articles/0d373fe1178452" style="display:none" target="_blank">https://zenn.dev/react_tokyo/articles/0d373fe1178452</a></p>
<p data-line="8" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e544660641569" src="https://embed.zenn.studio/card#zenn-embedded__e544660641569" data-content="https%3A%2F%2Fzenn.dev%2Fp%2Freact_tokyo" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/p/react_tokyo" style="display:none" target="_blank">https://zenn.dev/p/react_tokyo</a></p>
<h1 id="%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E8%A8%AD%E8%A8%88%E5%B0%8F%E9%83%A8%E5%B1%8B" data-line="10" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E8%A8%AD%E8%A8%88%E5%B0%8F%E9%83%A8%E5%B1%8B" aria-hidden="true"></a> コンポーネント設計小部屋</h1>
<p data-line="12" class="code-line">昔から今に至るまでに Atomic Design、Container/Presentational(C/P) パターン、Feature-Sliced Design (FSD)等、様々なコンポーネント設計が登場してきましたが、普段の開発ではどのように設計をしていますか？<a href="https://discord.com/channels/1313457938962190368/1352302062452473958" target="_blank" rel="nofollow noopener noreferrer">コンポーネント設計小部屋</a>では、コンポーネント設計についてのディスカッションが盛り上がりました。Dan 氏が提唱した C/P パターンは React Hooks の登場により、同じことが React Hooks でできるため、恣意的に分離する必要はなく、歴史的な理由でこの記事は残していると、Dan 氏自身にて追記が行われています。</p>
<blockquote data-line="14" class="code-line">
<p data-line="14" class="code-line">Update from 2019: I wrote this article a long time ago and my views have since evolved. In particular, I don’t suggest splitting your components like this anymore. If you find it natural in your codebase, this pattern can be handy. But I’ve seen it enforced without any necessity and with almost dogmatic fervor far too many times. The main reason I found it useful was because it let me separate complex stateful logic from other aspects of the component. Hooks let me do the same thing without an arbitrary division. This text is left intact for historical reasons but don’t take it too seriously.</p>
</blockquote>
<p data-line="16" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e7235866f9bf6" src="https://embed.zenn.studio/card#zenn-embedded__e7235866f9bf6" data-content="https%3A%2F%2Fmedium.com%2F%40dan_abramov%2Fsmart-and-dumb-components-7ca2f9a7c7d0" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0</a></p>
<p data-line="18" class="code-line">しかしながら、React Server Components(RSC) の登場により、C/P パターンの活躍の場が再度訪れているという議論が行われています。また、RSC 時代において、FSD はどうなのか、Next.js における設計についてはどうか、クリーンアーキテクチャを絡めた設計はどうなのか等、様々な角度から活発な意見が出てきています。詳細については、コンポーネント設計小部屋に参加していただいて、是非チェックしてみてください！</p>
<p data-line="20" class="code-line">コンポーネント設計小部屋のチェック方法は下記になります！</p>
<ol data-line="22" class="code-line">
<li data-line="22" class="code-line">
<a href="https://discord.com/invite/5B9jYpABUy" target="_blank" rel="nofollow noopener noreferrer">React TokyoのDiscordサーバー</a>へ参加！</li>
<li data-line="23" class="code-line">
<a href="https://discord.com/channels/1313457938962190368/1313657961033367582" target="_blank" rel="nofollow noopener noreferrer">情報・質問部屋</a>の<a href="https://discord.com/channels/1313457938962190368/1352302062452473958" target="_blank" rel="nofollow noopener noreferrer">コンポーネント設計小部屋</a>へ移動！</li>
<li data-line="24" class="code-line">気になったら小部屋を<a href="https://zenn.dev/react_tokyo/articles/6aaea6220a2c3e" target="_blank">フォロー</a>！</li>
</ol>
<p data-line="26" class="code-line">最後に、話題に上がっていたリンクをいくつかご紹介します。</p>
<p data-line="28" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__13dc7a23768a9" src="https://embed.zenn.studio/card#zenn-embedded__13dc7a23768a9" data-content="https%3A%2F%2Fnextjs.org%2Fdocs%2Fapp%2Fgetting-started%2Fproject-structure%23colocation" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://nextjs.org/docs/app/getting-started/project-structure#colocation" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nextjs.org/docs/app/getting-started/project-structure#colocation</a></p>
<p data-line="30" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ecb4023096b41" src="https://embed.zenn.studio/card#zenn-embedded__ecb4023096b41" data-content="https%3A%2F%2Fspeakerdeck.com%2Ftwada%2Fwhy-the-clean-architecture-does-not-fit-with-web-frontend" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://speakerdeck.com/twada/why-the-clean-architecture-does-not-fit-with-web-frontend" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://speakerdeck.com/twada/why-the-clean-architecture-does-not-fit-with-web-frontend</a></p>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p data-line="34" class="code-line">React のコンポーネント設計について、様々な視点から活発な意見交換が行われています。特に C/P パターンと FSD、そしてNext.jsの特性を踏まえた設計についての議論が深まっています。もし少しでも気になる部分があれば、<a href="https://discord.com/channels/1313457938962190368/1352302062452473958" target="_blank" rel="nofollow noopener noreferrer">コンポーネント設計小部屋</a>にご参加ください！</p>
<h1 id="%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" data-line="36" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> 終わりに</h1>
<p data-line="38" class="code-line">今回ご紹介した議論に興味を持たれた方、React についてもっと深く語り合いたい方は、ぜひ<a href="https://discord.com/invite/5B9jYpABUy" target="_blank" rel="nofollow noopener noreferrer">React TokyoのDiscordサーバー</a>へお越しください！初心者の方からエキスパートの方、エンジニア以外の職種の方までどなたでも大歓迎です！<br>
また、React Tokyo の Web サイトもありますので、是非ご覧ください！</p>
<p data-line="41" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2835ffaebbf06" src="https://embed.zenn.studio/card#zenn-embedded__2835ffaebbf06" 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>


React Tokyo トレンドレポート #5 : コンポーネント設計小部屋

Discussion