【初心者向け】Create-React-Appの環境変数を理解しよう!-Reactアプリケーションの設定を簡単に行う方法-

reactのpackage.json

以前は、Reactアプリケーションを作成するのには、webpackやBabelなど、多くの設定が必要でした。

しかし、Create-React-Appという優れたツールが登場し、Reactアプリケーションを簡単に構築できるようになりました。

Create-React-Appには、react-scriptsというスクリプトコマンドが付属しており、デフォルトで4つのメインスクリプトが用意されています。

これらのスクリプトを使うことで、Reactアプリケーションの構成に必要なすべての設定が提供されます。

具体的には、以下の4つのスクリプトがあります。

start

test

build

eject

これらのスクリプトを利用することで、開発者はターミナルから環境変数を設定することができ、高度な構成を行うことができます。

react-scriptsには、様々な環境変数が用意されており、開発者はこれらの環境変数を利用することで、Reactアプリケーションの様々な設定を簡単に行うことができます。

初学者にとっては、これらの環境変数を理解することは大変かもしれません。

しかし、これらの設定を理解することで、より高度なReactアプリケーションを作成することができます。

本記事では、これらの環境変数の理解を深めることを目的として、初学者向けに解説していきます。

package.jsonとは?

npmパッケージには、通常プロジェクトルートにある「package.json」というファイルが含まれます。

このファイルには、プロジェクトに関する様々なメタデータが含まれており、npmにプロジェクトを識別し、依存関係を処理するための情報を提供します。

このファイルは、アプリケーションで使用する必要があるJavaScriptライブラリ(パッケージ)をフェッチして調整するため、npmの出発点として使用されます。

それぞれの属性には重要性がありますが、すべてが重要というわけではありません。

「package.json」は、Reactアプリを作成するために必要な最小限の依存関係が含まれているため、CRA(Create React App)を使用している場合は、単純なReact.jsアプリを実行することができます。

このファイルは、プログラマーがReactアプリの設定を示すために使用されます。

したがって、このファイルは、Reactアプリケーションの構成に関するすべての情報を提供します。

React(CRA)package.jsonの中身

CRAでのpackage.jsonのデフォルト構成となります。


{
"name": "my-app", 
"version": "0.1.0",  
"private": true,
"dependencies": {  
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3"
  },

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

  },
"eslintconfig":  {
"extends": "react-app"
 },
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"

]

}

上から順番にいきましょう

1.【name】

プロジェクトの名前を表します。

この名前は、プロジェクトを識別するために使用されます。

npmに公開する場合、一意の名前である必要があります。

気を付けるべき点は『小文字』で決めていきます。

※アプリケーションの名前にはハイフンやアンダースコアが含まれる事があります。

2.【version】

プロジェクトのバージョンを表します。

バージョン番号は、開発者やユーザーがプロジェクトのバージョン管理に使用する重要な情報です。

セマンティックバージョニングに従って、メジャーバージョン、マイナーバージョン、パッチバージョンの3つの数字で構成されます。

Create-React-Appのデフォルトでは0.1.0として初期化をします。

3.【private】

このフラグが設定されている場合、npmにプロジェクトを公開できません。

プロジェクトが個人的な用途でのみ使用される場合、このフラグを使用して公開を防ぐことができます。

つまりプライベートリポジトリの公開を防ぐ方法の設定となります。

4.【dependencies】

dependenciesは和訳すると『依存関係』となります

プロジェクトが依存するパッケージのリストです。

ここでは、ReactやReactDOM、react-scriptsなど、プロジェクトを実行するために必要なパッケージが列挙されています。

^を含めた範囲指定を使用することで、指定したバージョンよりも新しいバージョンを使用できるようになります。

5.【scripts】

プロジェクトを実行するためのスクリプトが定義されています。

ここでは、プロジェクトを開始するためのstart、ビルドするためのbuild、テストするためのtest、そしてejectスクリプトが含まれています。

startスクリプトは、開発用のローカルサーバーを起動します。

buildスクリプトは、プロダクションビルドを実行し、最適化された静的ファイルを生成します。

testスクリプトは、テストを実行します。

ejectスクリプトは、Create React Appの設定をカスタマイズするために使用されます。

6.【eslintConfig】

JavaScriptプロジェクトに最適なLintツールの1つはESLintです。

ESLintの設定を定義するためのオブジェクトです。

ここでは、Reactアプリ用に作成されたデフォルトの設定である"extends": "react-app"が指定されています。

ESLintは、JavaScriptの文法エラーや潜在的な問題を検出するための静的解析ツールです。

Create-React-AppではカスタムesLint構成は必要ありません、それはCRAではesLintがすでに統合されているためです。

 "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

7.【browserslist】

プロジェクトがサポートするブラウザの一覧です。

この設定は、ビルドプロセスで自動的に使用され、各ブラウザの最新バージョンと、グローバルのユーザーエージェント統計から決定されたシェア上位のバージョンをサポートすることを目的としています。

この設定により、ビルドプロセスがブラウザごとに最適化されたコードを生成できます。

8.【devDependancies】

デフォルトではありませんがdevDependanciesという設定もございます。

補足として解説します。

devDependanciesは開発時にのみ必要なパッケージの一覧です。

例えば、ESLintやBabelなどの開発ツールや、テストランナーやカバレッジ計測ツールなどが含まれます。

これらのパッケージは、プロダクション環境での実行には必要ありませんが、開発中のコードの品質向上や、効率的な開発作業を行うために必要なものです。

例えば、以下のように記述されます。

"devDependencies": {
  "eslint": "^7.28.0",
  "eslint-plugin-react": "^7.24.0",
  "react-testing-library": "^11.2.7",
  "jest": "^27.0.4"
}

ここで、eslinteslint-plugin-reactは、コードの静的解析ツールであるESLintの設定やプラグインです。

react-testing-library(以下RTL)jestは、Reactアプリケーションのテストを行うためのツールです。

これらのツールは、開発者がコードの品質を維持し、不具合を早期に発見するために欠かせないものとなっています。

以上が、Create React Appで生成されるデフォルトのpackage.jsonファイルの各項目の目的と用途の説明です。

せっかくですので、「node_modules」についても解説致します。

node_modules

Node.jsプロジェクトを作成するとき、プロジェクトルートにnode_modulesというフォルダが作成されます。

このフォルダには、プロジェクトで使用する必要のあるモジュールが含まれます。

npm installコマンドを実行すると、package.jsonにリストされたすべてのモジュールがnode_modulesにダウンロードされます。

node_modulesフォルダは非常に大きく、多くのファイルとフォルダを含みます。

GitHubなどのリポジトリにコミットする必要はありません。

なぜなら、依存関係はpackage.jsonにリストされており、誰でもnpm installを実行することで簡単に再作成できるからです。

また、本番環境ではnode_modulesフォルダは不要です。

これは、アプリケーションがビルドされた後に必要なすべてのファイルが静的または動的ビルドに含まれているためです。

したがって、node_modulesフォルダが含まれていると、Webサイトの読み込み時間が長くなります。

Reactの場合、node_modulesフォルダには、Reactを実行するために必要なコードが含まれています。

このフォルダを削除すると、再度npm installコマンドを実行する必要があります。

最近の開発では、CDNからライブラリを取得して使用することが一般的です。

これにより、node_modulesフォルダに依存する必要がなく、Webサイトの読み込み時間を短縮できます。

ただし、必ずしもすべてのライブラリがCDNで利用可能なわけではありません。

その場合は、node_modulesフォルダを保持する必要があります。

Node.jsプロジェクトでは、package.jsonに記載されたスクリプトを使用して、ビルドやテスト、デプロイなどのタスクを自動化できます。

Create React Appでは、これらのスクリプトがデフォルトで提供されているため、開発者がすぐに使い始めることができます。

ただし、必要に応じて、自分でスクリプトを追加したり、独自のスクリプトを作成することもできます。

以上が、Node.jsプロジェクトのnode_modulesフォルダに関する基本的な情報になります。

これらのように、Reactプロジェクトにおいては、適切に依存関係を管理し、CDNを使用することでWebサイトの読み込み速度を向上させることが重要です。

最後に

Reactアプリケーションを作成する際には、多くの設定が必要となります。

しかし、Create-React-Appというツールを利用することで、開発者は簡単にReactアプリケーションを構築できます。

Create-React-Appには、Reactアプリケーションの構成に必要なすべての設定が提供されます。

開発者は、react-scriptsというスクリプトコマンドを利用することで、環境変数を設定し、Reactアプリケーションの高度な構成を行うことができます。

環境変数には、Reactアプリケーションの様々な設定を簡単に行うことができるものがあります。

これらの設定を理解することで、開発者はより高度なReactアプリケーションを作成することができます。

初心者にとっては、環境変数の理解が難しいかもしれませんが、これらの設定を理解することで、Reactアプリケーションをより効率的に作成することができます。

よって、Reactアプリケーションを開発する際には、環境変数の理解が欠かせない重要なスキルであると言えます。

本日は以上となります。

最後までこの記事を読んで頂きありがとうございます。

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

プライバシーポリシー

© 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].