Node.jsやReactのプロジェクトでよく見かける”package.json”。最初に見たとき、「なにこのカッコだらけのファイル……？」と思った人も多いはず。この記事では、そんなpackage.jsonの中身や役割、よく使う項目をわかりやすく紹介していきます。初めてでも大丈夫。ざっくりイメージが掴めるように解説します！
目次
package.jsonってなに？
JavaScriptプロジェクトの「設定ファイル」みたいなものです。 具体的には：
- 使用しているパッケージの一覧
- スクリプトの定義（
npm runで使うやつ） - プロジェクトの名前やバージョン
- 必要なNode.jsのバージョン
などが記載されています。
✅ ざっくり言うと
「このプロジェクトは、こういう環境とツールで動いてます！」を表すファイルです。
よく使う項目まとめ
| キー名 | 説明 |
|---|---|
name | プロジェクト名（英数字で） |
version | バージョン番号（例：1.0.0） |
scripts | よく使うコマンドの定義（例：npm start） |
dependencies | 本番でも必要なパッケージ一覧 |
devDependencies | 開発時だけ必要なパッケージ一覧 |
engines | 対応するNode.jsのバージョンなど |
dependenciesとdevDependenciesの違い
これは初心者が一番つまずくポイントかも。
dependencies- 本番環境でも使うもの（例：React本体、axiosなど）
devDependencies- 開発中だけ使うもの（例：ESLint、Prettier、テストツールなど）
✔ 見分け方
「アプリの本番公開に必要？」→YESならdependencies、NOならdevDependencies。
scriptsってなに？
scriptsは「よく使うコマンド」をまとめて登録できる便利ゾーン。
"scripts": {
"start": "node app.js",
"dev": "vite",
"lint": "eslint ."
}例えば npm run dev と打つと vite が実行されます。
よくある疑問と答え
- Q. 編集しても壊れない？ → 基本OK。ただしカンマや記法に注意（JSON形式なので）
- Q. 手動で追加する？自動で？ → パッケージを
npm installすると自動で追記されます - Q.
package-lock.jsonって必要？ → これは依存関係のバージョンを固定するファイル。これも大事なので消さないように！
まとめ
package.jsonはプロジェクトの設定・依存情報が書かれたファイルdependenciesとdevDependenciesは使い分けが大事- よく使うコマンドは
scriptsにまとめておくと便利
最初はとっつきにくく感じるかもしれませんが、一度わかれば「あの謎ファイル、意外と味方だったんだな」と思えてくるはずです。
コメント