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

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

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

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

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

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

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

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などを使用することができます。

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

最後に

CRA(Create React App)は、開発ケースに応じてディレクトリ構成が変わることがあります。ただし、CRA 3.4.1のデフォルトディレクトリ構成には、setupTests.jsファイルやService Worker関連のファイルは含まれていません。

過去のバージョンのCRAでは、これらのファイルがデフォルトのディレクトリ構成に含まれていたかもしれませんが、最新バージョンのCRAでは必要に応じてこれらのファイルを追加する必要があります。

CRAを使用することで、Reactアプリケーションの作成が簡単になりますが、より高度なカスタマイズを行いたい場合は、Webpack+Babelへの移行を検討することをお勧めします。

ただし、注意点として、Webpack+BabelはCRAよりも高度で、より深い技術的な知識が必要です。

そのため、初心者にはCRAの使用がお勧めされます。

最終的には、プロジェクトの要件に合わせて最適な選択を行う必要があります。

本日は以上となります。

最後まで読んで頂きありがとうございます。

この記事が役に立ったら、ブックマークと共有をして頂けると幸いです。

プライバシーポリシー

© 2023 Icons8 LLC. All rights reserved.

© [deve.K], 2023. React logo is a trademark of Facebook, Inc. JavaScript is a trademark of Oracle Corporation and/or its affiliates. jQuery and the jQuery logo are trademarks of the JS Foundation. TypeScript and the TypeScript logo are trademarks of the Microsoft Corporation. Next.js and the Next.js logo are trademarks of Vercel, Inc. Firebase and the Firebase logo are trademarks of Google LLC. All logos edited by [deve.K].