create-react-appの中身の概要（package.json,eslintcahe）をまとめてみた

はじめに

Reactを学習するにあたって、create-react-appをインストールした際に、package.jsonやpackage-lock.json、eslintcacheが入っており、「なんだこれ？」と疑問がわいた方がいると思います。

実際、僕もReactを学習するにあたり、以上の３つがどんな役割なのかすっ飛ばしていたので、軽くまとめてみました。

package.jsonとは

パッケージ（ライブラリなどの関連ファイル）の管理や設定情報の編集が可能なファイル。

そのpackage.jsonの中身を見ると、何が書いてあるか最初はつまづきますよね笑
JSON（JavaScript Object Notation）で記述されており、JavaScriptでデータを表現し、コンピュータに伝える記法だそうです。

では、そのJSONで記述されているpackage.jsonの中身を少し詳しくみていきましょう。

name

package.json

 "name": "react-app",

パッケージ名（アプリ名）
※先頭に.ドットや_アンダースコアをつけてはならず、nodeやjsは入れてはいけない。

version

package.json

 "version": "0.1.0",

npmと依存関係にあるセマンスティックバージョン（node-semver）の初期の開発フェーズにより、定められている、バージョン。

private

package.json

 "private": true,

偶発的な公開を防ぐための設定

dependencies

package.json

"dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "react-dom": "^17.0.1",
    "react": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },

パッケージについての説明、実行に必要なパッケージの定義。
npm install 〇〇（パッケージ）でインストールされたのが"name":"version"で定義されますね。

dependenciesの中身についてもまとめてみました。

モジュール名	用途
"@testing-library/jest-dom"	jestのカスタムDOM要素が提供するライブラリ
"@testing-library/react"	Reactコンポーネントをテストするためのソリューション。テスト方法は公式ドキュメントに記載されています。
"@testing-library/user-event"	ユーザーがブラウザを操作する時、ブラウザ上でテスト実装が可能
"react-dom"	DOM固有のメソッドが用意されている。よく使うのだと、render()ですね。その他にも、hydrate()、unmountComponentAtNode()などなど
"react"	シングルページアプリケーションの構築
"react-scripts"	特定のディレクトリやファイルの呼び出し
"web-vitals"	Web UX（ユーザー体験）向上にむけた、測定ツール

scripts

package.json

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

npmでプログラムを実行出来る仕組み。npm「"スクリプト名"」で実行可能。
実際にどんな働きをしているか簡単にまとめてみました。

スクリプト名	用途
"start"	開発モードで動作
"build"	本番モードで動作（ソースコードを解析し、問題がなければ実行）
"test"	jest（JavaScriptのテスト用フレームワーク）に繋がる
"eject"	すべての構成とビルドの依存関係がプロジェクトに直接移動される

eslintConfig

package.json

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

ESLintの拡張機能の設定。
中身は、create-react-app共有可能な構成とjestの拡張機能が含まれています

browserslist

package.json

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

異なるフロントエンドツール（babelなど）を開発対象ブラウザに共有するライブラリ。
また、コードとブラウザとの互換性をJavaScriptが制御する。

browserslistの中に、"production"と"development"の２つがありますね。
・"production"はnpm buildを実行した際に、本番環境を作成する時に使用され、
・"development"はnpm startをした時に、使用される。

package-lock.jsonとは

依存しているパッケージの全てのバージョン情報を管理してる。

用途と致しましては、package.json単体ですと、最新のバージョンだけを表しており、バージョンの先頭に^キャレットや~チルダの記法を用いることで、バージョンの範囲を示しています。

また、npm installをする際に、package-lock.jsonの内容を元にインストールするので、同じパッケージ環境を再現することが出来る。

.eslintcacheとは

変更されたファイルを操作するために、処理されたファイルに関する情報を保存する。
そもそもESLintというのは、静的検証ツールの一つで、JavaScriptのコードの問題を検出するコード解析ツール。

このオプションを有効にすることにより、変更されたファイルのみがリント（問題解析）することで、ESLintの実行時間を劇的に短縮することが出来る。

実際に中身を覗くと、修正した箇所のファイルの内容が記載されていますね。
一行で構成されていて見えづらいですが、。

感想

今まで、create-react-appで今まで済んでいたので、気にかけていなかったですが、Package.jsonやESLintの設定は開発効率をあげるためには、必須だと思いました。
まだまだ、機能が幅広いので、今後も勉強していきたいところです。

参考にさせていただいたサイト

https://phiary.me/node-js-package-manager-npm-usage/
http://liberty-technology.biz/PublicItems/npm/package.json.html
https://create-react-app.dev/