Atomic Designについて

僕がAtomic Designについて勉強するときに参考にしたサイトです
https://note.com/tabelog_frontend/n/n07b4077f5cf3

開発でフロントエンドを触る機会ができたので、どうせするならとAtomic Designを取り入れることにしました。

こういうフレームワークのようなディレクトリ構造はとったことがないので、どういういう風に書けばいいか初めはわからなかったのですが、書いていくうちにしっくりくるディレクトリ構造を作ることができたので共有です。

私が使用したディレクトリ構造

Reactでの開発を想定しています

src
 ├components
    ├atoms
    ├molecules
    ├organisms
 ├pages
 ├routes
    ├validation
    ├Route
 ├functions 
 └util

ここには一番親となるファイルを書きます
ここには値や処理は書かずコンポーネントのみを書きます

ここにはページ全体に関連するStateや関数などを記述します
また、複数のmoleculesを記述し、定義した変数や関数を渡して処理をさせます

ここでは親から受け取ったStateや関数を使ったりAtomsを使ったりします。
基本的には描画を担当するイメージです

ただ、このコンポーネントのみで完結するような関数や変数はここで定義します

ここは最小限の構成で記述していきます。
一番意識することは汎用的なものを作成することなので、ここではできる限り関数や変数は定義しません。
関数の処理などを入れたいときはPropsでその関数を渡してもらって処理をするように実装します。

ここではorganismsで実行したい処理を記述します。
本当はorganismsで処理を記述したいのですが、そこに書いてしますと1ファイル内のコード量が増えてしまうのでここで管理するようにしています。

ここは名前の通り汎用的なデータを保管する場所です
多くのコンポーネントで利用されるであろう型やContextなどをここで定義してあげるようにしています。

Atomic DesignならTemplateもだろと思った方もいたかもしれないですが、個人的にディレクトリの数を増やしてしまうとこれはどこに書くんだっけ？みたいになってしまってめんどくさくなってしまったので、今回は3階層にしてみました

みなさんはどのようにしてディレクトリを分けていますでしょうか？