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
pages
ここには一番親となるファイルを書きます
ここには値や処理は書かずコンポーネントのみを書きます
components
organisms
ここにはページ全体に関連するStateや関数などを記述します
また、複数のmoleculesを記述し、定義した変数や関数を渡して処理をさせます
molecules
ここでは親から受け取ったStateや関数を使ったりAtomsを使ったりします。
基本的には描画を担当するイメージです
ただ、このコンポーネントのみで完結するような関数や変数はここで定義します
atoms
ここは最小限の構成で記述していきます。
一番意識することは汎用的なものを作成することなので、ここではできる限り関数や変数は定義しません。
関数の処理などを入れたいときはPropsでその関数を渡してもらって処理をするように実装します。
functions
ここではorganismsで実行したい処理を記述します。
本当はorganismsで処理を記述したいのですが、そこに書いてしますと1ファイル内のコード量が増えてしまうのでここで管理するようにしています。
utils
ここは名前の通り汎用的なデータを保管する場所です
多くのコンポーネントで利用されるであろう型やContextなどをここで定義してあげるようにしています。
最後に
Atomic DesignならTemplateもだろと思った方もいたかもしれないですが、個人的にディレクトリの数を増やしてしまうとこれはどこに書くんだっけ？みたいになってしまってめんどくさくなってしまったので、今回は3階層にしてみました
みなさんはどのようにしてディレクトリを分けていますでしょうか？