こんにちは！最近、中華料理ばっかり食べてる話をしていたら「中華マン」というあだ名を
つけられました、中華マンことゆーだいです。
今回は、ReactでTodoアプリを作る際に、どのようなディレクトリ構造がベストなのかについて疑問に思ったので記事にしました。
とりま、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初学者がなんとなくの使い勝手で理解したものです！
俺が考えた最強のディレクトリ構造をお持ちの方は是非是非コメントに記入して貰えると嬉しいです！
また、この膨大なネットの海でご縁があることを期待しています！
コードを書きたいって囁くのよ
あたしの、ゴーストが