先生と生徒の会話形式で理解しよう

生徒

「Reactで作ったプロジェクトって、どこでバージョンとか管理するんですか？」

先生

「Reactのプロジェクトには、package.jsonという大事なファイルがあります。これがプロジェクトの説明書みたいな役割をしているんですよ。」

生徒

「説明書？それって何が書いてあるんですか？」

先生

「プロジェクトの名前やバージョン、Reactのバージョン、必要なライブラリなどが一覧で記録されています。だからバージョン管理の基礎を知るには、このファイルを読むことが大切なんです。」

1. package.jsonとは何か？

Reactのプロジェクトを作ると、自動的にpackage.jsonというファイルが作成されます。このファイルは、まるで「家の設計図」のようなもので、プロジェクトに必要な情報を整理して記録しています。具体的には以下のような情報が含まれます。

これらを正しく理解すると、Reactプロジェクトのバージョン管理がぐっと分かりやすくなります。

2. nameとversionの意味

nameにはプロジェクトの名前が、versionにはそのプロジェクト自体のバージョンが記録されています。たとえばアプリが「1.0.0」から始まり、機能が追加されると「1.1.0」、バグ修正なら「1.0.1」といった形で番号が変わります。

この数字の並びは「セマンティックバージョニング（Semantic Versioning）」と呼ばれます。3つの数字はそれぞれ次の意味を持っています。

たとえば「2.3.1」というバージョンなら、「2」がメジャー、「3」がマイナー、「1」がパッチの意味です。

dependenciesには、ReactやReact DOMなど「アプリを動かすのに必要なソフト」が記録されています。これがないとアプリは動きません。つまり、この項目はプロジェクトの「必須パーツリスト」です。

例えばReactをインストールしたときには、次のように書かれています。


"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

「^」という記号は、「このバージョン以上であれば互換性がある」という意味です。細かい数字の違いがあっても安心してアップデートできるように工夫されています。

devDependenciesには、開発中だけに必要なツールが記録されます。たとえばコードをチェックする「ESLint」や、テストをするためのツールなどです。アプリを本番で動かすときには不要なので、dependenciesとは区別されています。

これにより、本番環境では余計なものを入れずに、動作に必要なものだけを残すことができます。

scriptsには「npm start」や「npm run build」といったコマンドの内容がまとめられています。これは、よく使う命令をボタンのショートカットのように登録しているイメージです。


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

例えばnpm startを実行すると、自動的に「react-scripts start」が呼び出され、開発用のサーバーが起動します。初心者でも迷わず開発を進められる工夫ですね。

もしこのファイルがなかったら、どのバージョンのReactを使っていたのか、どんなツールが必要なのか分からなくなってしまいます。package.jsonがあることで次のメリットがあります。

つまり、プロジェクトを長く安定して使い続けるために欠かせない仕組みなのです。

Reactで作成したプロジェクトフォルダを開き、package.jsonをテキストエディタで表示すると、ずらりと情報が並んでいます。最初は意味が分かりにくいですが、今まで学んだポイントを照らし合わせると一気に理解しやすくなります。

初心者は特に「name」「version」「dependencies」の3つをまずチェックすると良いです。これらを確認するだけでも、自分のReact環境がどんな状態なのか把握できます。