package.jsonの読み方

package.jsonは、npmを使うプロジェクトの取扱説明書です。開いて読めるようになると、初めて見るプロジェクトでも「何の部品を使い、どんなコマンドで動かすのか」が分かります。見るべき場所は実は3つだけ——dependencies・scripts・バージョン表記です。

まずは全体像

小さなプロジェクトのpackage.jsonは、たとえばこんな姿です。

{
  "name": "my-site",
  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build"
  },
  "dependencies": {
    "astro": "5.1.0"
  },
  "devDependencies": {
    "prettier": "3.4.2"
  }
}

上から、プロジェクト自身の名前とバージョン、実行できる作業（scripts）、必要な部品リスト（dependencies系）。npm installはこのファイルを読んで部品を取り寄せます。

dependencies——本番でも使う部品

dependenciesは、完成したサイトやアプリが動くために必要な部品のリストです。npm install <名前>で部品を入れると、ここに自動で追記されます。

devDependenciesは、開発作業のときだけ使う道具。コードをきれいに整形するprettier、テストツールなど、完成品には入らないものはこちらに入れます（npm install -D <名前>で追記）。

初心者のうちは、この区別を厳密に覚えなくて大丈夫。「dependencies系＝npm installで入る部品リスト」とだけつかんでおき、入れる場所はチュートリアルの指示に従えばOKです。

scripts——このプロジェクトの「作業メニュー」

scriptsは、よく使うコマンドに短い名前を付けたメニューです。npm run <名前>で実行します。

"scripts": {
  "dev": "astro dev",      // npm run dev → 開発サーバー起動
  "build": "astro build"   // npm run build → 公開用ファイルを生成
}

チュートリアルが「npm run devを実行してください」と言ったら、実際に動くのは右側に書かれたコマンド。知らないプロジェクトを触るときは、まずscriptsを見る——これだけで「何ができるプロジェクトか」の見当がつきます。

バージョン表記——「^」の意味を知っておく

"astro": "5.1.0"のようなバージョンには、記号付きの書き方があります。

^（キャレット）はnpm install <名前>をしたときに自動で付く、いわば標準の書き方です。「不具合修正が入った新しい版を自動で使える」のが利点。ただし裏を返せば、インストールする日によって入る中身が変わるということでもあります。この性質はセキュリティの話にもつながるので、次の記事で詳しく扱います。

表の最後の>=・*・latestは上限を決めない書き方で、実務では避けられることが多いです。「今日入った中身を、明日も同じように再現できるか」という視点で見ると、バージョン表記の意味がつかみやすくなります。

package-lock.json——「実際に何が入ったか」の記録

package.jsonの隣にできるpackage-lock.jsonは、実際にインストールされた全部品の正確なバージョンの記録です。買い物リスト（package.json）に対する、レシートだと思ってください。

• 消さない・手で編集しない——npmが自動で管理します
• Gitに入れる——このレシートがあると、チーム全員・未来の自分がまったく同じ部品構成を再現できます

このレッスンのまとめ

1. package.jsonはプロジェクトの取扱説明書——見るのはdependencies（部品リスト）とscripts（作業メニュー）
2. npm run devの正体はscripts欄に書いてある——初見のプロジェクトはまずscriptsを読む
3. ^1.2.3は「範囲内で最新を入れてよい」の印。package-lock.jsonは実際の記録なので消さずにGitへ

この1ファイルが読めるだけで、GitHubで見かけたプロジェクトの「動かし方」が自力で分かるようになります。