フロントエンドディレクトリ構成に関して

現在のディレクトリ構成は何を使っていますか？

僕がフロントエンドの領域に入ってからそろそろ２年が経過しようとしています。
現状の経験ではかなり大規模のフロントエンドの経験はないですが、中規模・小規模のフロント開発は携わってきました。

多くのエンジニアの方が経験のあるディレクトリ構成では以下のような構成が多いのかなと思います

- src
|- components
　　 |-general
  |-navigation
  └ 省略...
|- style
|- hook
|-router
|-page
  |- user
  |- blog
  |- 省略・・・

このディレクトリ構成を採用した際の問題としては、あるページをコーディングしてる時に、コンポーネントを参照したいとなったときに、vscodeでファイルを探すと思いますが、そうするとpageディレクトリとcomponentディレクトリの場所が少し離れているので見ずらいと思います。

そこで今回僕がおすすめしたいのは、ページごとに管理をこなうというディレクトリ構成です。

おすすめのディレクトリ構成(小規模~中規模)

なぜ小規模~中規模なのかというと、単純に僕が経験をしたことがないため100%おすすめですと言えないことがあります。

なので、大規模になるともしかしたらAtomic　Designのほうがいいのかもしれないです。。。

では本題ですが、僕のおすすめのディレクトリ構成は以下の通りです

- src
 |- components
   |- button
   |- navigatiion
   |- layout
   省略・・・
 |- hook
 |- style
 |- router
 |- page
   |- user
     |- component
     |- hook
     |- style
     省略

上記のように各ページのディレクトリでコンポーネントなどの管理を行う構成です。
このようにすれば、わざわざ遠くのcomponentに見に行く必要がないですし、すっきりしたわかりやすい構成になります。

開発をしているとよくあると思いますが、あるページのコードが肥大化してしまった際にコンポーネントとして切り分けることで、引き継ぎなどを行った際にどこに何が書いてあるのかがわかりやすくなったりします。
例えば以下のようん構成などが考えられます

- page
  |- user
  　　　　|- components
       |- UserAvator.tsx(ユーザ画面で使用するアバターの共通コンポーネント)など
    |- list
      |- page.tsx
      |- hooks
         |- useSearchUserForm.tsx
      |- component
        |- UserItem.tsx
        |- UserSearchForm.tsx
        省略・・・
    |- edit
      |- page.tsx
      |- hooks
        |- useEditUserProfile.tsx
      |- compoennts
        |- UploadAvator.tsx
        |- EditUserForm.tsx
        |- ComfirmUserForm.tsx
        省略・・・

みたいな感じで管理することでどこに何があるのかが明確になります

デメリット

こちらの構成のデメリットとしては、ディレクトリ構成が深くなる可能性があるのでかなり大規模な画面を作成する場合は慎重にする必要があります