いまコンポーネントの分け方を見直していて、ざっくり「ドメインに関わるコンポーネント」と「ドメインに関わらない見た目だけのコンポーネント」で分けるのが良いかなと考えている
そのとき、なんて名前のディレクトリにするかとかなどについて、以下が参考になったのでメモ
記事では以下の４つに分けているとのこと
- src/components/page
- src/components/model
- src/components/ui
- src/components/functional
重要視していること
- どこに分類させるかで迷わないこと
- Componentの移動がなるべく発生しないこと
- ディレクトリの階層の深さにルールがあり、予測可能であること
Pageについて
Next.jsの場合はsrc/pagesというディレクトリが最初からあるが、それらの責務はルーティングのみにして、components/pageという別のディレクトリを用意する
これはレイアウトの責務をもつコンポーネントだと理解した
UIコンポーネントのheaderやsidebarなどを流し込むイメージ
他にもと非同期fetchをページレイアウト側のSuspenseでキャッチするためでもあるとのこと
Modelについて
「ドメインに関わるコンポーネント」のためのディレクトリと理解した
その下にはドメイン単位のディレクトリをつくって、ドメイン名をPrefixとしてコンポーネント名にしているとのこと、わかりやすくよさそう
実際使い心地はどうなんだろう、ドメイン認識は変わるかもしれないと思っており変更したくならないかなと思った
UIについて
「ドメインに関わらない見た目だけのコンポーネント」のためのディレクトリと理解した
uiにした理由は「modelに関心を持っていてはいけないレイヤー感」が出るからとのこと
uiは他でも聞いたことがあるが、ちょっと悩ましい
あと、グローバルヘッダなどはmodelが一部滲み出ているが、例外としてuiに置いているとのこと
確かにこういうコンポーネントの置き場に困っている
Functionalにいついて
「ドメインに関心を持たない、見た目を伴わないコンポーネント」のためのディレクトリと理解した
hooksでもいいとのことで、何かを機能を切り出したときの置き場所のイメージ
とても参考になった
