https://zenn.dev/tmgauss/articles/beca85dd7fdcae

フロントエンド開発は一般的に複雑性との戦いです。放ったらかしにしておくとますます複雑になり、変更するのが難しくなります。これまでにも、このような複雑さをどうにかして制御しようとして、Atomic Designをはじめとした様々な設計手法（デザインパターン）が考えられてきました。

しかし、React / Next.js を使ってチーム開発を行う際に、現状のデザインパターンでの運用では「どうもうまくいかないな」と思う場面に多々遭遇しました。そのような経験を踏まえて、「コンポーネントをどのように設計するか」「どのようにディレクトリを分けるか」を徹底的に考え、新しいデザインパターン「Tree Design」にまとめました。

Tree Design はまだまだ仮説段階です。今後弊社チームで運用していく中でブラッシュアップする予定です。しかし、他のフロントエンド開発チームがデザインパターンを再考する際の一助になればと思い、ドキュメントとして公開することにしました！ぜひご一読ください。

1.1. 仮定

フロントエンド開発一般について述べるのではなく、本ドキュメントでは以下の事項を仮定して、内容を絞って詳述します：

• 仮定1「React / Next.jsを使用します」
• 仮定2「Reactでは関数型コンポーネントを主に使用します」
• 仮定3「TypeScriptを使用します」
• 仮定4「Design Systemは使用しない」

1.2. 読者の想定

1.2.1. 対象読者

• Design Patternについて考えている方
  • コンポーネントの設計について扱います。

1.2.2. 対象でない読者

• Rendering Patternについて考えている方
  • SSGやSSRについては本ドキュメントでは扱いません。
• Performance Patternについて考えている方
  • SWRや画像のローディング最適化など、パフォーマンスに関することについては扱いません。

まず、既存のデザインパターンを振り返り、それぞれがどのようなことを解決しようとしていたのか、また、それがどの点において問題なのかについてまとめます。チーム開発のときに筆者が抱いた違和感を言語化します。

2.1. 代表的なデザインパターン

2.1.1. Atomic Design