インターンに参加して気づいたディレクトリ構成
はじめに
はじめまして。大学3年生のきなこです。
3ヶ月の長期インターンに参加しました。そこでReactを用いた開発を行う過程で、AtomicDesignを学びました。
そこで感じたディレクトリ構成についてメモしていきたいと思います。
AtomicDesignとは
UIを5つの種類に分けて、小さいものから大きいものへと順番に組み上げるコンポーネント設計です。
ディレクトリ構成は以下の感じです。
src/
┗ compomemt
┠ atoms
┠ molcules
┠ organisms
┠ tempaltes
┗ pages
atomsは原子要素で一番小さいコンポーネントを入れるディレクトリです。
例えばボタンなどの一つの機能しか持たない要素です。
molculesは分子要素でatomsの次に大きい要素を入れるディレクトリです。
例えばボタンにラベルがついた物など要素に意味が持つようになったコンポーネントです。
organismsはatoms,molculesの組み合わせでできる、一つの構成要素としての役割をもった要素を入れるディレクトリです。
例えばヘッダー、フッターなど画面配置の構成要素として役割を持つようになります。
templatesはorganismsの組み合わせでできる、画面構成のファイルです。
ここでは配置やスタイルなどが与えれ、ほぼwebページと同じ型が出来上がります。
pagesはtemplatesに具体的な内容を入れた物であり、ユーザに見せる画面です。
AtomicDesignの使用感
AtomicDesignの良かったところ
- コンポーネントの再利用をしやすかった
- 小さい部品から作成していくので実装が簡単だった
- ディレクトリの名前でコンポーネントが何の役割を果たしているか明確だった
AtomicDesignの微妙だったところ
- 個人開発や少人数開発などでは再利用性を活かせる機会が少ない
- ディレクトリが増えすぎし、階層が深くなる
- メンバーによってはmolcules,organisms,tempalatesの認識が違う
所感
大規模開発とかになると小分けするので、メンテナンスをしやすいし、バグも修正しやすい構成だと感じた。
ただ、個人や少人数の開発ぐらいだと分割しすぎて、作業効率が悪くなるときがある。
この構成は分割の指針が曖昧なので、用いるときはどこからどこまでがどの要素に入るかルールを決めるべきだ感じた。
個人的に使いやすいディレクトリ構成
構成要素ごとで分割すると、個人開発の際には一つのディレクトリにいろんなページの要素が入ってるのがわかりにくいなと感じました。
そこでコンポーネントで共通させる要素はcommonディレクトリに入れて、componentsでは画面ごとにコンポーネントを管理するディレクトリにしました。
componentsではそれぞれのページディレクトの中でAtomicDesignのようにページと機能で分割しています。
この構成だとあるページのある機能で問題が起きた時に一目で探せるようになっています。
src/
┠ common/
┗ layout/
┗ Header.tsx
┗ components/
┠ TopPage/
┠ actions/
┗ TopPage.tsx
┗ MenuPages/
┠ actions/
┗ MenuPage.tsx
ただ、この構成ではcommonに入れる要素が多くなるときは破綻するし、結局階層が深くなってしまうデメリットもあります。
まとめ
様々なチーム開発の経験を経て、開発の規模感やメンバーの経験によって最適なディレクトリ構成は違ってくるなって感じました。
全員が使いやすいと思えるディレクトリ構成の最適解は今のところないと思うので、チームで開発に取り組み前にしっかりとルールを決めるべきだと感じました。
ただ、ルールを決める際にこの記事が参考になれば幸いです。
Discussion