Javascript React ディレクトリ構成

Javascript

前回の記事で、JavascriptのReactでサンプルアプリを作成してみました

Javascript React カウンターアプリ作成
JavascriptのReactを使ってサンプルのwebアプリを作成するところまで解説します。
go-pro-world.net
2025.09.16

今回は、Reactで作ったプロジェクトの ディレクトリ構成と各ファイルの役割 を整理して説明します

１． ディレクトリ構成（CRAで作成直後）

my-counter/
├── node_modules/      # インストールしたnpmライブラリ（触らない）
├── public/            # 公開用の静的ファイル
│   ├── index.html     # Reactアプリが埋め込まれるベースHTML
│   └── favicon.ico    # アイコンや画像など
├── src/               # 実際に開発するコード（ここをいじる）
│   ├── App.js         # メインのコンポーネント（最初に編集する）
│   ├── App.css        # Appコンポーネント用のスタイル
│   ├── index.js       # アプリのエントリーポイント（Appを読み込む）
│   ├── index.css      # 全体のCSS
│   └── logo.svg       # Reactロゴ画像
├── package.json       # プロジェクトの依存関係やスクリプト
├── package-lock.json  # 依存関係の正確なバージョン記録
└── README.md          # プロジェクトの説明

２．各ファイルの役割

🔹 public/

  • index.html
    • Reactアプリを埋め込むベースのHTML
    • 中に <div id=”root”></div> があり、ここにReactコンポーネントが差し込まれる
    • ふつう中身を直接書き換えることはあまりない（タイトル変更ぐらい）

🔹 src/

ここが 開発のメインフィールド 🎯

  • index.js
    • ReactアプリのエントリーポイントApp コンポーネントを index.html の <div id=”root”> に描画している
    import React from “react”; import ReactDOM from “react-dom/client”; import App from “./App”; const root = ReactDOM.createRoot(document.getElementById(“root”)); root.render(<App />);
  • App.js
    • メインのコンポーネント
    • 最初に編集して動作確認するのはここ
    • いま作ったカウンターアプリもこのファイルに書いてある
  • App.css
    • App.js に対応するCSSファイル
    • コンポーネントごとにスタイルを分けられる
  • index.css
    • 全体に適用するスタイル（グローバルCSS）
  • logo.svg
    • Reactの回るサンプルのロゴ画像（最初の画面に出るやつ）

🔹 package.json

  • プロジェクトの「設計図」みたいなもの
  • 依存パッケージ（Reactや開発ツール）のバージョンが書いてある
  • スクリプトも定義されている
  • { “scripts”: { “start”: “react-scripts start”, “build”: “react-scripts build”, “test”: “react-scripts test”, “eject”: “react-scripts eject” } }

以下のコマンドでwebアプリを生成できます

  • npm start → 開発サーバー起動するコマンド
  • npm run build → 本番用に最適化した静的ファイルを生成するコマンド

重要な部分

  • public/index.html … ベースのHTML（rootにReactが差し込まれる）
  • src/index.js … Reactアプリのスタート地点
  • src/App.js … 最初に編集するメインコンポーネント
  • package.json … 依存関係・スクリプト管理

実際に編集するのは基本的に src/ の中です。

３．開発の流れ

  1. src/App.js や src/ フォルダ内にコードを書いて開発する
    （App.jsだけじゃなく、コンポーネントを増やして src/components/ を作ったりするのが普通）
  2. 開発中は npm start を使う
    → 自動でホットリロードされて、ブラウザに即反映される
    → 本番用ではなく、開発サーバーで動いている状態
  3. 本番公開したいときは npm run build を実行して静的ファイルを生成する

４．npm run build で起こること

  • react-scripts build が動いて、最適化済みの静的ファイルを生成する
  • 出力先はプロジェクト直下の build/ ディレクトリ
my-counter/
├── build/               # ← ここが生成される（本番公開用）
│   ├── index.html       # Reactアプリが埋め込まれたHTML
│   ├── static/          # 圧縮・最適化されたJSやCSS
│   │   ├── js/
│   │   │   ├── main.[hash].js   # あなたのReactコードがまとめられたJS
│   │   └── css/
│   │       └── main.[hash].css  # CSSがまとめられたもの
│   └── favicon.ico
├── public/
├── src/
└── ...

🔹 ポイント

  • src/ のコードは全部まとめられて 1つのJavaScript（main.[hash].js） に変換される
  • CSSもまとめられて main.[hash].css になる
  • build/index.html には、これらのファイルが <script> や <link> として読み込まれるように書き換えられている
  • hash はキャッシュ対策のためのランダム文字列

公開するなら

  • VPS や GitHub Pages、Netlify、Vercel などに build/ フォルダをアップロードすればOK
  • これで「Reactを動かすためのサーバー」は不要で、ただの静的ファイルとして動く

５．WEBアプリ生成のまとめ

  • 開発 → npm start
  • 本番用ビルド → npm run build
  • 出力 → build/ ディレクトリに index.html と最適化されたJS/CSS

今回は各ファイルの役割とwebアプリの生成までの流れを解説しました

次回以降でもっと実践的なwebアプリを作成する流れを解説したいと思います

コメント