Reactのディレクトリ構造を完全解説！初心者でもわかるコンポーネント管理のベストプラクティス
生徒
「Reactでファイルがどんどん増えて、どこに何を書けばいいかわからなくなりました…」
先生
「それはディレクトリ構造を意識していないことが原因かもしれません。」
生徒
「ディレクトリ構造って、フォルダの分け方のことですか？」
先生
「その通りです。Reactではコンポーネントを整理することがとても大切です。」
1. Reactにおけるディレクトリ構造とは
ディレクトリ構造とは、ファイルやフォルダをどのようなルールで配置するかという考え方です。 パソコンを触ったことがない人でも、書類を引き出しごとに分けて保管する場面を想像すると理解しやすいです。
Reactでは、画面を作るためのコンポーネントが増えていきます。 何も考えずに置いていくと、後から探すのが大変になります。
2. なぜコンポーネント管理が重要なのか
Reactの特徴は、コンポーネントを再利用できる点です。 しかし、管理ができていないと、同じような部品を何度も作ってしまいます。
きちんと整理されたディレクトリ構造は、作業の効率を上げ、ミスを減らします。 初心者のうちから意識しておくと、後でとても楽になります。
3. 初心者におすすめの基本ディレクトリ構成
まずはシンプルな構成から始めるのがおすすめです。 すべてを最初から細かく分ける必要はありません。
src/
├ components/
├ pages/
└ App.jsx
componentsフォルダには、再利用する部品を入れます。 pagesフォルダには、画面単位のコンポーネントを置きます。
4. componentsフォルダの中身を整理する
componentsフォルダには、ボタンやヘッダーなどの小さな部品をまとめます。 名前を見るだけで役割がわかるようにすることが大切です。
function Button() {
return (
<button>送信</button>
);
}
export default Button;
5. pagesフォルダで画面単位を管理する
pagesフォルダには、トップページや詳細ページなど、画面全体を表すコンポーネントを置きます。 componentsを組み合わせて作るのが特徴です。
import Button from "../components/Button";
function HomePage() {
return (
<div>
<h1>トップページ</h1>
<Button />
</div>
);
}
export default HomePage;
6. フォルダを役割ごとに分ける考え方
コンポーネントが増えてきたら、役割ごとにフォルダを分けます。 たとえば、ヘッダー関連、フォーム関連などです。
これは、本棚をジャンルごとに分けるのと同じです。 探しやすさが一気に上がります。
7. ファイル名とフォルダ名の付け方のコツ
ファイル名は、中身がすぐに想像できる名前にします。 Button、Header、Footerのように、役割をそのまま名前にします。
英語が苦手でも、短くて意味がはっきりした単語を使えば問題ありません。
8. ディレクトリ構造を整えることで得られる効果
ディレクトリ構造を整えると、コードを読むのが楽になります。 修正や追加もしやすくなり、React開発がスムーズになります。
初心者でも、整理された構造を見ることで、全体の流れを理解しやすくなります。
import HomePage from "./pages/HomePage";
function App() {
return <HomePage />;
}
export default App;
