【React】「npx create-react-app」で作成されるフォルダやファイルを解説！

この記事ではReactの「npx create-react-appコマンド」で作成されるフォルダやファイルについて、

  • 「npx create-react-appコマンド」で作成されるフォルダやファイルの一覧
  • 「npx create-react-appコマンド」で作成される各フォルダやファイルの説明

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

Reactの「npx create-react-app」で作成されるフォルダやファイル

Reactの「npx create-react-appコマンド」で生成されるフォルダやファイルについて説明します。

「PowerShell」または「コマンドプロンプト(cmd)」を開き、以下の「npx create-react-appコマンド」を実行すると、カレントフォルダ(カレントディレクトリ)の下に指定した名前(以下のコマンドの場合は「test-app」)で新しいフォルダが作成されます。

npx create-react-app test-app

「test-appフォルダ」の中には、Reactアプリケーションのベースとなるフォルダやファイルが作成されており、以下のような構成となっています(アプリを実行する上で最低限必要なフォルダやファイルには星マーク★を付けています)。

Reactアプリケーションのプロジェクトフォルダ(今回はtest-app)
├─src★                   //このアプリケーションのソースコードが格納されているフォルダ
│   ├─App.js★            //最初に作成されるコンポーネントの本体
│   ├─App.css             //最初に作成されるコンポーネントのスタイル
│   ├─App.test.js         //最初に作成されるコンポーネントのテストコード
│   ├─index.js★          //アプリケーションの起動ポイント
│   ├─index.css           //アプリケーション共通のスタイル
│   ├─logo.svg            //Reactアプリケーションで使用されるロゴのSVGファイル
│   ├─setupTests.js       //テスト環境の設定ファイル
│   └─reportWebVitals.js  //Reactアプリケーションのパフォーマンス測定するためのスクリプト
├─public★                //HTMLや画像などWebブラウザにそのまま提供されているフォルダ
│   ├─index.html★        //アプリケーションのトップページ
│   ├─favicon.ico         //ファビコンを定義するファイル
│   ├─logoXXX.png         //ロゴ画像
│   ├─manifest.json       //アプリケーションの構成要素が記載されているファイル
│   └─robots.txt          //検索エンジンがサイトをクロールする際の指示を記述するファイル
├─node_modules★          //npmパッケージがインストールされるフォルダ
├─package.json★          //アプリで使用するパッケージ情報を定義するファイル
├─package-lock.json★     //インストールされたパッケージが記載されているファイル
├─README.md               //プロジェクトの説明ファイル
├─.git                    //Gitがプロジェクトの履歴を追跡するために使用するフォルダ  
└─.gitignore              //Gitが管理したくないファイルやフォルダを指定するファイル

補足

星マーク★が付いていないファイルは不要ですので削除しても構いません。しかし、index.html, App.js, index.js内で参照しているファイルもありますので、そちらの参照も削除する必要があります(参照を削除しないとエラーが発生します)。例えば、index.html, App.js, index.jsを以下に示すように変更すると動作するようになります。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.htmlではlogoXXX.pngやfavicon.icoやmanifest.jsonへの参照を削除しています。

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

index.jsではindex.cssやreportWebVitals.jsへの参照を削除しています。

App.js

function App() {
  return (
    <div className="App">
      <p>Hello, React!!</p>
    </div>
  );
}

export default App;

App.jsではApp.cssやlogo.svgへの参照を削除しています。

ではこれから各フォルダやファイルの詳細をこれから説明します。

srcフォルダ

Reactアプリケーションのソースコードが含まれるフォルダです。Reactコンポーネントやスタイル、テストファイルなどがここに格納されます。「appフォルダ」の中には以下のファイルが格納されています。

  • App.js
    • 最初に作成されるコンポーネントの本体です。UIの大部分はここで定義されます。
  • App.css
    • 最初に作成されるコンポーネント(Appコンポーネント)のスタイルシートです。
  • App.test.js
    • 最初に作成されるコンポーネント(Appコンポーネント)のテストファイルです。
  • index.js
    • アプリケーションの起動ポイントです。ReactアプリケーションをDOMにレンダリングします。
  • index.css
    • プリケーション共通のスタイルシートです。アプリ全体に適用されるスタイルを定義します。
  • logo.svg
    • Reactアプリケーションで使用されるロゴのSVGファイルです。
  • setupTests.js
    • テスト環境の設定ファイルです。テスト実行前に自動的に実行されるコードをここに配置します。
  • reportWebVitals.js
    • Reactアプリケーションのパフォーマンス測定するためのスクリプトが記載されているファイルです。

publicフォルダ

HTMLや画像などWebブラウザにそのまま公開される静的ファイルがこのフォルダに格納されます。ここに含まれるファイルは、ビルド時にそのまま出力されます。

  • index.html
    • Reactアプリケーションのトップページがここに描画されます。
    • Reactコードのマウントポイント(<div id="root"></div>)を含みます。
  • favicon.ico
    • ウェブサイトのファビコンを定義するファイルです。
  • logoXXX.png
    • アプリのロゴやアイコンなど、特定の用途で使用される画像です。
    • 例えば、logo192.png, logo512.pngがあり、これらはPWA(Progressive Web App)のためのサイズ違いのロゴです。
  • manifest.json
    • アプリケーションの構成要素が記載されているファイルで、ウェブアプリをPWA(Progressive Web App)としてとして動作させるための情報が含まれています。
  • robots.txt
    • 検索エンジンがサイトをクロールする際の指示を記述するファイルです。
    • どのページをインデックスすべきか、どのページを除外すべきかを指定します。

node_modulesフォルダ

プロジェクトで使用するnpmパッケージがインストールされるフォルダです。

これらのnpmパッケージはpackage.jsonファイル(後ほど説明します)にリストアップされており、「npm installコマンド」を実行すると、そのリストに従ってnpmパッケージがダウンロードされ、node_modulesフォルダに保存されます。

「npm updateコマンド」を実行すると、このフォルダ内の内容が更新されます。

package.json

アプリケーションの名前やバージョン、アプリケーションで使用するnpmパッケージ(ライブラリ)のリストとそのバージョン情報が記載されているファイルです。スクリプトの実行方法もここに記載されます。

package-lock.json

package.jsonを参照して、node_modulesフォルダに実際にインストールされたパッケージのバージョン情報が記述されているファイルです。

このファイルにより、プロジェクトは他のマシンでも同じ依存関係で正確に再現できます。

このファイルは「npm installコマンド」の実行時に新規作成または更新され、通常は開発者が編集することはありません。

README.md

プロジェクトの説明や使用方法、ライセンス情報などを記載するマークダウンファイルです。作成するアプリケーションについての説明を記述します。

.gitフォルダ

Gitがプロジェクトの履歴を追跡するために使用するフォルダです。「.gitフォルダ」にはコミット、ブランチ、タグなどの情報が格納されています。

補足

.gitフォルダは「npx create-react-appコマンド」によって直接生成されるわけではなく、「git initコマンド」を実行した際にGitによって作成されるものです。ただし、「npx create-react-appコマンド」を実行すると自動的にGitリポジトリが初期化されるため、このフォルダが存在することになります。

.gitignore

Gitが管理したくないファイルやフォルダを指定するファイルです。

例えば、ビルド時に生成されるファイルやログファイルなど、リポジトリに保存する必要がないファイルを指定します。例えば、node_modulesフォルダなどはリポジトリに保存する必要がないので、「.gitignoreファイル」に記述します。

本記事のまとめ

この記事ではReactの「npx create-react-appコマンド」で作成されるフォルダやファイルについて、以下の内容を説明しました。

  • 「npx create-react-appコマンド」で作成されるフォルダやファイルの一覧
  • 「npx create-react-appコマンド」で作成される各フォルダやファイルの説明

お読み頂きありがとうございました。