自作のアプリケーションにアトミックデザインを取り入れてみた話

はじめに

自作のアプリケーションにアトミックデザインを採用して組んでみました。結論から言えば失敗しました。そこで今回は自分が組んだアトミックデザインのディレクトリ構成の紹介となぜ失敗したのか・どのようにすれば上手く行っていたか・上手くいくのかを考察してみたいと思います。

ディレクトリ構成

フレームワークはNext.js+TypeScriptを使っています。デザイン用のフレームワークとしてMaterial UIを使っています。(役割の被るファイルは省略しています。)

.
├── Dockerfile
├── components
│   ├── molecules
│   │   └── SubmitButton.tsx
│   └── organisms
│       ├── AuthLinks.tsx
│       ├── form
│       │   └── UserUpdateForm.tsx
│       ├── input
│       │   ├── AboutInput.tsx
│       └── user
│           └── ProfileCard.tsx
├── hooks
│   ├── api
│   │   ├── axios.ts
│   │   └── user
│   │       ├── useGetUserInformation.ts
│   └── firebase
│       ├── authContext.tsx
│       ├── firebase.ts
│       └── useFirebase.tsx
├── next-env.d.ts
├── package.json
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── index.tsx
├── types
│   └── model
│       └── user.ts
└── yarn.lock

それぞれのディレクトリを簡単に説明します。

components

いうまでもないかもしれませんがコンポーネントを入れる場所です。分類的にはmoleculesとorganismsに分けています。

Material UIを使っているため細かいパーツを一から作ることはないためatomは省略しています。強引かもしれませんがnode_modulesのmaterial-ui全体がatomです。

またNext.jsにおけるpagesディレクトリ=アトミックデザインにおけるtemplatesという考え方もできるのではないかと思ってcomponents内には作っていないです。

hooks

axios.tsにはaxiosのインスタンスをあらかじめ作っています。下のuserは実際にapiを叩く場所となっておりuseSWRで作ったカスタムフックが入っています。省略していますがuser以外にも各モデルごとにディレクトリを作って分けています。firebaseはfirebaseの初期化やサインインやサインアップなどの必要なロジックを入れています。

pages

next.js用のページを入れるフォルダです。

types

各種モデルを入れています。

開発してみてどのようになったか

このディレクトリ構造で開発して最終的にmolecules・organismsがそれぞれ何個のtsxファイルが出来上がったか

molecules 1個

organisms 29個

です。

かなり偏っています。organismsには↑のディレクトリで示したようにフォーム用のコンポーネントだったりそのインプット・ヘッダーやローディングコンポーネントの他に各モデル専用のコンポーネントまで入っていました。それでmoleculesはサブミットボタン一つです。

ここまで偏っていたらわざわざアトミックデザインである必要はないのではないか？と思い始めました。(アトミックデザインの失敗？)

ではどのようなディレクトリを組む？

アトミックデザインがあまり上手く行かなかった対策ですが個人的にcomponents-organismsをそのままcomponentsにしたら良いのではないかと思います。基本的にコンポーネントはその名前の中で依存し合うみたいな構造にしてら良いのではと思っています。具体的には以下のような構造でしょうか？

.
└── components
   ├── authLinks
   │   └── AuthLinks.tsx
   ├── form
   │   ├── UserUpdateForm.tsx
   │   ├── button
   │   │   └── SubmitButton.tsx
   │   └── input
   │       └── AboutInput.tsx
   └── user
       └── ProfileCard.tsx

form内のコンポーネントはその中のbuttonやinputには依存しますが他のauthLinksやuserには依存していないと言った感じです。

この上でpagesでは自由に使用可能とかにしておけば良い気がします。