私の推しフロントエンドディレクトリ構成と気をつけたいポイント

どうも、sakitoです。 今回は私の推しフロントエンドディレクトリ構成と気をつけたいポイントを紹介します。ちぇけら！ 2023年5月29日 追記 この記事を読みにきていただきありがとうございます。 私が記事を書いた時期はまだNext.jsのApp Routerが発表されたばかりで、App Routerを使用したディレクトリ構成の考慮はされていません。 先日、App Routerがリリースされ、Next.jsのドキュメントにApp Routerのディレクトリ構成について記事が出ているので、Next.jsを使用されている場合は、まず参照することをオススメします。 はじめに 今回、私の紹介する推し構成は、機能単位で設計するパターンです。 Reactのディレクトリ構成のベストプラクティスを集めたBulletproof Reactで紹介されているパターンにかなり似ています。さらに詳細なプロダクト構

[tk_musik]

昔vueでアトミックデザインでやろうとして粒度わけわからんくなるのとemitがゴチャついたのでやめてしまった。

[berlysia]

Testing Trophyで考えた結果hooksとfunctionsの単体テストを書かないってのはエッジケースで容易に面倒を生みそうなんだけど、その単位までみっちり統合テストを書く話なんだろうか

[kako-jun]

Dockerfileとdocker-compose.ymlを同じ場所に置くか、1層下げるか？GitHubのREADME.mdやLICENSEを、同じ場所に置くか1層上げるか？という部分のほうが悩むわ。あと、ディレクトリ名のうちtestやjsが複数形で作られないとか

[kazuhi_ra]

ここまでゴージャスに作ったことはないけど大体同じでした / storybookのファイルは各コンポーネントのディレクトリに入れる派です

[jay-es]

機能単位でディレクトリを分ける。その中の各部品にはテストを書かず、index.tsx に対してだけ統合テストや Story を作る。共通の hooks などには単体テストを書く。機能の粒度はエンジニアだけで考えない