React開発の始め方：Create-React-Appの使い方と最新バージョンのディレクトリ構成解説

Reactを学習中の方や、SPAの開発を手軽に始めたい方には、Create-React-App（CRA）というCLIツールがおすすめです。

このツールは、Reactプロジェクトの雛形を提供し、初期設定を自動的に行ってくれます。

CRAを使用すると、ディレクトリ構成が自動的に作成されます。

CRAの最新バージョン(2023年5月時点で3.4.1)のデフォルトのディレクトリ構成を解説します。

このディレクトリ構成を細かく解説していきますが、注意点として、OSやCRAのバージョンによって構造が異なる場合があります。

CRAのディレクトリ構成
- my-app/
  - README.md
  - node_modules/
  - package.json
  - gitingnore
  - public/
  - src/
  - 最後に

CRAのディレクトリ構成

CRAの最新バージョン(2023年5月時点で3.4.1)のデフォルトのディレクトリ構成は以下となります。

my-app/
├── README.md
├── node_modules/
│   ├── (複数のライブラリやモジュールが含まれる)
│   └── ...
├── package.json
├── .gitignore
├── public/
│   ├── index.html
│   └── favicon.ico
└── src/
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg

上記ではデフォルトCRAのディレクトリ構成となります。

順番にいきましょう。

my-app/

ルートディレクトリmy-appには、プロジェクトの設定ファイルやソースコードが含まれます。

ルートディレクトリは全てに繋がる枝の開始地点です。

README.md

プロジェクトの説明を書くためのファイルです。

一般的には、プロジェクトの概要や機能、使い方、開発者情報などを記載します。

README.mdは、GitHubなどのリポジトリサイトで自動的に表示されるため、プロジェクトの説明を記述する上で非常に重要なファイルです。

node_modules/

プロジェクトで使用するパッケージの依存関係がインストールされるディレクトリです。

CRAでは、プロジェクト作成時に自動的に必要なパッケージがインストールされます。

これらのパッケージは、依存関係が解決された上でnode_modules/にインストールされます。

初学者様はこのフォルダを触らない事をお勧めします。

package.json

プロジェクトの設定を記述するファイルとなります。

依存パッケージのバージョン管理やスクリプトの設定などが行われます。

例えば、scriptsには、npm runコマンドで実行できるスクリプトを設定することができます。

CRAでは、プロジェクト作成時に自動的に生成され、必要な設定がすべて記載されています。

gitingnore

Gitで管理しないファイルを指定するためのファイルです。

CRAでは、デフォルトでいくつかのファイルやディレクトリが.gitignoreに記述されています。

例えば、node_modules/や、開発中に生成される一時ファイルなどが除外されます。

public/

静的ファイルが置かれるディレクトリです。

CRAでは、ここにindex.htmlファイルが置かれます。

また、favicon.icoファイルなどもここに配置することができます。

・ index.html: アプリケーションのエントリーポイントとなるHTMLファイル。

ここにReactアプリケーションのルート要素を定義します。

CRAでは、自動的に必要なスクリプトが読み込まれるため、基本的に編集する必要はありません。

・ favicon.ico: Webサイトのタブに表示されるアイコン画像。CRAでは、デフォルトでpublic/ディレクトリに配置されています。

src/

src/ディレクトリは、CRAで作成されたReactアプリケーションのメインのソースコードを格納する場所です。

ここには以下のようなファイルが含まれます。

・index.js: アプリケーションのエントリーポイントとなるJavaScriptファイルで、ReactコンポーネントをレンダリングするためのReactDOM.render()が含まれます。

・App.js: アプリケーションのメインコンポーネントを定義するJavaScriptファイルで、render()メソッド内に表示内容が定義されます。

・App.css: App.jsで使用されるスタイルを定義するCSSファイルです。

・App.test.js: App.jsコンポーネントのテストスイートが含まれるファイルで、Jestによって実行されます。その他のJavaScriptファイル: アプリケーションで使用される他のJavaScriptファイルが含まれます。

また、src/以下には、コンポーネントを定義するためのディレクトリ構造も含まれています。

この構造はデフォルトでは存在しませんが、プロジェクトの規模や複雑度が高くなった場合に利用されることが多いです。

例えば、以下のような構造を採用することがあります。

src/
  components/
    Button/
      Button.js
      Button.css
      Button.test.js
    Form/
      Form.js
      Form.css
      Form.test.js
  pages/
    Home/
      Home.js
      Home.css
      Home.test.js
    About/
      About.js
      About.css
      About.test.js

上記のように、components/やpages/といったディレクトリを用いて、コンポーネントやページを分類することができます。

各コンポーネントやページは、それぞれのディレクトリにJavaScriptファイル、CSSファイル、テストファイルを持ちます。

こうすることで、プロジェクトの構造を整理し、管理しやすくすることができます。

ただし、この構造はあくまでも一例であり、プロジェクトの要件やチームの開発スタイルに合わせて変更することができます。

なお、CRAでは、src/ディレクトリ内のJavaScriptファイルには、Webpackによって処理されるため、ES6の「import/export」構文やJSXなどを使用することができます。

これにより、よりモジュラーなアプリケーションを開発することができます。