とりま、Google先生に聞いてみる

この手の話題は、既にパイオニアの方々が答えを導き出しているに違いない！と思い、Google先生に英語と日本語でそれぞれ聞いてみました！

SEOがトップの高い記事が一番信頼が厚いという信用のない考えから、言語別検索のトップ３の記事に辿り着きました。

日本語検索：「react ディレクトリ構造ベスト」

zenn：Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
 Qitta：【個人的】 React ディレクトリ構成のベストプラクティス
 Qitta：Reactのディレクトリ構成どうしてる？

英語検索：「react file structure best」

TatvaSoft：REACT BEST PRACTICES AND SECURITY
React公式様:File Structure
onoufriosm:React best practices-React at scale (Part 2)

どの記事も身が詰まった良記事なので、気になった方は、ぜひぜひ上記のリンクからアクセスして欲しいです🙇‍♂️

記事から得た自分が思う最強のディレクトリ構造！！！

my-app
　　L node_modules
　　L public
　　　　L index.html
　　L src
　　　　L __tests__
　　　　L assets
　　　　L components
　　　　L modules
　　　　　　　　　L auth
　　　　　　　　　　　　　L components
　　　　　　　　　　　　　L api
　　　　　　　　　　　　　L pages
　　　　　　　　　　　　　  L index.js
　　　　　　　　　L tasks
　　　　　　　　　L \...etc
　　　　L api

あくまで自分が使いやすいベストプラクティスを優先したフォルダ構造にしてみました！
src以下のディレクトについて説明します！

modules

今回の一番のキモ！！！reactの各機能をベースにモジュール化したフォルダ
中には、部分的に共有化したいcomoponentsやロジック的に分離したいapiやpagesに細分化されているため
ページ数の肥大化に耐えられる堅牢なディレクトリ構造になっているのではないかと感じた。

_tests_

テストファイルを格納するためのフォルダ
拡張子が.spec.js or .test.jsもしくは__tests__にテストファイルを格納しているだけでJestがファイルを見つけてくれる！

assets

HTML/CSSをハードコーディングしていた時代の人からすると懐かしの駄菓子屋さんのような存在
faviconや画像などのその他もろもろのアセットを入れるためのファイル

components

繰り返し使用される共通のコンポーネント格納するためのフォルダ
例：ヘッダー(App bar)、テキストフィールド、ボタンなど
デザイン規格が厳密なMaterial Designなどを採用していると全ての共通するcomponentsも多いはず

以上！調査する以前は、src直下にpagesフォルダを置いていたので、
ロジック的にもグループ化に近い構造を学べてかなり気持ちがいいです！

最後に

これはあくまで、React初学者がなんとなくの使い勝手で理解したものです！
俺が考えた最強のディレクトリ構造をお持ちの方は是非是非コメントに記入して貰えると嬉しいです！

また、この膨大なネットの海でご縁があることを期待しています！

攻殻機動隊 STAND ALONE COMPLEX ５話より

コードを書きたいって囁くのよ
あたしの、ゴーストが

React初学者からみた最良のディレクトリ構造