😵
Reactでアトミックデザインやめた話
追記
知見貯まったのでディレクトリ構造に関する新しい記事を書きました。
随分前にコンポーネントの設計をアトミックデザインに基づいたディレクトリ分割するのをやめた。
現在のディレクトリ構成(create-react-appベースです)は以下の通り。
- src
- assets
- components
- designSystems
- recipes
- ページごとのディレクトリ
- helpers
- store
- pages
- App.tsx
- index.tsx
- routes.tsx
- ...省略
なぜアトミックデザインをやめたかというと
- コンポーネントを作成段階で、このコンポーネントがatomsなのかorganisms考えるのがめんどい。hooksで簡単にapiを取得できるようになって、このコンポーネントでapiを呼ぶかどうかは試行錯誤のすえ決めるが、アトミックデザインだと最初から決めないといけない。結果とりあえずorganismsにすべてのコンポーネントいれるようになった。
- UIライブラリ使ってると、atomsって意外と少ない。
- atomsになったりmoleculesになったりリファクタリングの過程でコンポーネントはよく構成が変わるので、移動するのが面倒になる。
- これはatomsなのかとかいう議論がめんどい。
結局 ページ単位ごとにディレクトリを作り、ページコンポーネントからはそのディレクトリ(recipes)を介して呼ぶことにした。共通コンポーネントは存在するので、それはdesignSystemsというディレクトリに入れる。こちらはatomなのかmoleculeなのか区別する必要はない。名前は試行錯誤の中でこうなっているが、こちらの記事とは思想は異なる。https://bradfrost.com/blog/post/design-system-components-recipes-and-snowflakes/
ページ単位に作ると、ノー思考でそのディレクトリ以下にコンポーネント作ればよいのでかなり楽。
コンポーネントは最初から共通化を意識して作るのは大変だし、再利用されない可能性もある。似たようなコンポーネントがあれば、一旦コピペプログラミングをし、あとからリファクタリングを通して共通化するようにしてる。
アトミックデザインは最初から完成形すぎてしんどかった。
Discussion