こんにちは！React Tokyo サポートメンバーの locol(@locol23) です。
React TokyoのDiscordサーバーでは、React に関する最新技術の動向から、日々の開発で直面する具体的な課題まで、メンバー間で活発な情報共有が日々交わされています。
React Tokyo トレンドレポートは Discord サーバー内の情報・質問部屋で盛り上がったトピックを定期的にまとめて紹介するレポートです！
過去記事は以下のリンクからご覧いただけます。
コンポーネント設計小部屋
昔から今に至るまでに Atomic Design、Container/Presentational(C/P) パターン、Feature-Sliced Design (FSD)等、様々なコンポーネント設計が登場してきましたが、普段の開発ではどのように設計をしていますか？コンポーネント設計小部屋では、コンポーネント設計についてのディスカッションが盛り上がりました。Dan 氏が提唱した C/P パターンは React Hooks の登場により、同じことが React Hooks でできるため、恣意的に分離する必要はなく、歴史的な理由でこの記事は残していると、Dan 氏自身にて追記が行われています。
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.
しかしながら、React Server Components(RSC) の登場により、C/P パターンの活躍の場が再度訪れているという議論が行われています。また、RSC 時代において、FSD はどうなのか、Next.js における設計についてはどうか、クリーンアーキテクチャを絡めた設計はどうなのか等、様々な角度から活発な意見が出てきています。詳細については、コンポーネント設計小部屋に参加していただいて、是非チェックしてみてください！
コンポーネント設計小部屋のチェック方法は下記になります！
- React TokyoのDiscordサーバーへ参加！
- 情報・質問部屋のコンポーネント設計小部屋へ移動！
- 気になったら小部屋をフォロー！
最後に、話題に上がっていたリンクをいくつかご紹介します。
まとめ
React のコンポーネント設計について、様々な視点から活発な意見交換が行われています。特に C/P パターンと FSD、そしてNext.jsの特性を踏まえた設計についての議論が深まっています。もし少しでも気になる部分があれば、コンポーネント設計小部屋にご参加ください！
終わりに
今回ご紹介した議論に興味を持たれた方、React についてもっと深く語り合いたい方は、ぜひReact TokyoのDiscordサーバーへお越しください！初心者の方からエキスパートの方、エンジニア以外の職種の方までどなたでも大歓迎です！
また、React Tokyo の Web サイトもありますので、是非ご覧ください！
Discussion