deve.K

エンジニアが未来を切り開く。

React create-react-appのディレクトリ構成の解説

react画像

本日はReactの学習でSPA開発する際に手軽にプロジェクトの雛形を提供してくれるCLIツールである

Create-React-App(CRA)テンプレのディレクトリ構成の中身を解説します。

こちらは完全な初学者様用もしくは現在学ばれてる方々用になりますのでご了承下さい。

ディレクトリの中身を細かく覗いていきましょう。

OSまたはCRAのバージョンの関係上、大きく構造が前後する場合があります。

CRAのツリー構造

create-react-app画像

上記ではCRAのツリー構造となります。

順番にいきましょう

my-app

ファイルシステムで最上位にあるディレクトリで

プロジェクトルートになります。

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

README.md

READMEにはそれぞれ役割があります。

  • プロジェクトのツールの使い方やインストール方法 コマンドなどその他詳細

  • 宣伝などで使われたりします。

取り扱い説明書みたいな感じですね!。

node_modules

このフォルダはnpmシステムの一部です。

npmでインストールされたモジュールの『バージョン』の依存関係を管理している場所となります。 複数のファイルがあります。

CRAを使用している場合に単純なReact.jsアプリを実行するために必要な最小限の依存関係が見つかります。

node_modulesとpackage-lock.jsonフォルダを削除した場合、すべての依存関係をインストールするには、コマンドを再実行する必要があります。

なぜnode_modulesフォルダがこんなに大きくなっているのか不思議に思うかもしれません。

それはreact-scriptsに起因しています。

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

package.json

このファイルは、Reactアプリケーションの開発とデプロイで非常に重要な役割を果たします。

npmまたはyarnでパッケージをインストールしたのをここで設定する事が可能です。

npmパッケージを使用して開発している場合は、 1 つもしくは複数のパッケージが更新されている時に、プロジェクトをビルドすると警告やエラーが発生することは珍しくありません。

時にはバージョンが競合したり、パッケージのバージョンが廃止されていたりする場合もあります。

package.jsonを作成し、npmでインストールをすればpackage.jsonに登録しておいたnode moduleがinstallされたり、わざわざGitにpushする必要もありません。

つまり、プロジェクトに関連付けられたメタデータ・バージョン・スクリプトのすべての依存関係が含まれているファイルとなります。

create-react-app画像

gitingnore

Gitに関する登録をしたくないファイルがある場合はこの場所に記述します。

Gitによる追跡から特定のファイルを除外します

つまりGitの管理下ではなくなる、ということです。

public

この場所ではHTMLや画像、フォントなどを管理します。

publicフォルダに他のアセットを追加することも可能となります。

Webで公開されるファイル『ファイルにアクセスできるもの』をまとめておくところになります。

その中でも1番重要なのが『index.html』となりますReactではこのファイルにコードを入れ、ブラウザに実行できるようになるからです。

index.htmlは、build/index.htmlを生成するためのテンプレートとして機能し、最終的にブラウザ上で提供されるメインファイルとなります。

public内にある『manifest.json』はJSONテキストファイルでアプリに関する構成情報を提供しているファイルとなる。

情報はアプリの『作成者・アイコン・説明』などなどこれらをデバイスのホーム画面にWebアプリをインストールします。

create-react-app画像

src

このディレクトリはアプリを開発していく上で主にこの部分での開発となります。

JavaScriptファイルやReactのコンポーネントで扱うCSSなどがここに配置されます。

index.jsでは、public/index.htmlからbodyにあるid="root"の部分にDOM要素を生成しAppというReactコンポーネントを設定しています

Service Worker.js

Service Worker.jsはネットワークの関連機能を提供します。

機能と言うのはプッシュ通知やバックグラウンド同期などの機能を有効にします。

ファイルを開くとあらかじめ最初からコードの処理が記述してありますが

あなたのアプリが本番環境でなおかつブラウザに対応されているかになります。

setupTests.js

setupTests.jsはユニットテストを行うことができます。

必要なツールを使いReactと連携させコンポーネントレンダリングなどのテストが可能となります。

最後に

setupTestやServiceWorkerなどは初学者のうちは無視してても、問題はありません。

ですが、聞かれたときに簡単な説明ぐらいはできるようにしときましょう。

CRAは開発のケースによりディレクトリの構成は変わったりします。

CRAの扱いに慣れたら、Webpack+Babelに移行するのを強くお勧め致します。

このアプリケーションには、ES6およびES7の一連の機能をサポートする独自のBabelプリセットである(babel-preset-react-app)が付属しています。

付属されてるのを下記に示します。

Async/await

Object Rest/Spread Properties

Dynamic import()

Class Fields and Static Properties

CRAのアプリケーションのビルドは静的ファイルのみで構成されているため、それらをリモート環境にデプロイする方法はいくつかあります。

Node.js環境で実行している場合は、Node.jsサーバーを使用するか、NGINXなどの別のWebサーバーを使用してアプリケーションを提供できます。

公式ドキュメントのデプロイ方法では、アプリケーションをAzure、AWS、Heroku、Netlify、およびその他の一般的なホスティング環境にデプロイする方法の概要を説明しておりますので、ぜひ活用下さい。

個人的にはNetlifyをお勧めします、初心者でも簡単にアプリケーションをデプロイする事が容易となっているホスティングサービスです。

本日は以上となります。

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

プライバシーポリシー