package.jsonってちゃんと見たことありますか？
自分はアプリケーションの開発だけに意識が向いていたので、あんまりpackage.jsonをじっくり眺めたことないんですよねー😅
なのでこの記事ではNext.jsとか Reactなどをinitしたとき勝手に作られるpackage.jsonってなに？どんなことが記載されているの？を実際のコードを用いて備忘録的に書いていきます！
そもそもpackage.jsonって何？
package.jsonは プロジェクトの「取扱説明書」 のようなもので、そのプロジェクトが何で、何が必要で、どう動かすかを教えてくれるようなものです
以下の内容がpackage.jsonには含まれています。
- プロジェクトの基本情報（名前、バージョンなど）
- 使用するライブラリの一覧（ReactやNext.jsなど）
- よく使うコマンドの定義（開発サーバー起動など）
- プロジェクトの設定（TypeScriptの設定など）
実際のNext.js package.jsonを見てみよう
実際のNext.jsプロジェクトのpackage.jsonが以下です（initして直後のものではないです）
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "WATCHPACK_POLLING=true next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
},
"dependencies": {
"@conform-to/react": "^1.4.0",
"@conform-to/zod": "^1.4.0",
"@radix-ui/react-checkbox": "^1.2.3",
"@radix-ui/react-label": "^2.1.4",
"@tanstack/react-query": "^5.74.3",
"axios": "^1.8.4",
"next": "15.2.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"zod": "^3.24.2"
},
"devDependencies": {
"@biomejs/biome": "1.9.4",
"@storybook/nextjs": "^8.6.11",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"typescript": "^5",
"vitest": "^3.1.1"
}
}
ずら～っといろいろ書いてありますねー
一つずつ見ていきましょう 
基本情報
プロジェクトの身分証明書的なもの
{
"name": "frontend",
"version": "0.1.0",
"private": true
}
| 項目 | 意味 | 例 |
|---|---|---|
name |
プロジェクト名 | "frontend" |
version |
バージョン |
"0.1.0"（大きな変更.機能追加.バグ修正） |
private |
npm公開するか |
trueなら非公開 |
普通のWebアプリならprivate: trueにしておけばOKです
「scripts」よく使うコマンド集
開発でよく使うコマンドがまとまっています
"scripts": {
"dev": "WATCHPACK_POLLING=true next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"storybook": "storybook dev -p 6006"
}
開発でよく使うコマンドがエイリアスのように設定されています
| コマンド | 用途 | 実行方法 |
|---|---|---|
dev |
開発サーバー起動 | npm run dev |
build |
本番用ファイル作成 | npm run build |
start |
本番サーバー起動 | npm run start |
lint |
コードチェック | npm run lint |
実際の使い方
# 開発サーバーを立てる
npm run dev
開発中はnpm run devを実行するだけで、ファイルを変更するたびに自動でページが更新されます！便利ですよねー 
「dependencies」アプリに必要なライブラリ
本番環境でも必要なライブラリたちです。
ここにプロジェクトが動作するために必要な外部ライブラリが記載されます
"dependencies": {
"@conform-to/react": "^1.4.0",
"@tanstack/react-query": "^5.74.3",
"axios": "^1.8.4",
"next": "15.2.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"zod": "^3.24.2"
}
バージョンの記号は何？
"react": "^19.0.0" // ^マークの意味は？
| 記号 | 意味 | 例 |
|---|---|---|
^1.4.0 |
1.4.0以上、2.0.0未満 | 新機能は受け入れるけど、大きな変更はNG |
~1.4.0 |
1.4.0以上、1.5.0未満 | バグ修正のみ受け入れ |
1.4.0 |
厳密に1.4.0のみ | 全く変更したくない |
基本的に^が使われていて、バグ修正や新機能は自動で取り込まれます
「devDependencies」開発時のみ必要なツール
開発中だけ使うツールたちです
"devDependencies": {
"@biomejs/biome": "1.9.4",
"@storybook/nextjs": "^8.6.11",
"@types/node": "^20",
"@types/react": "^19",
"typescript": "^5",
"vitest": "^3.1.1"
}
新しいライブラリを追加したい時
# 本番でも使うライブラリ
npm install ライブラリ名
# 開発時のみ使うツール
npm install --save-dev ツール名
まとめ
package.jsonは最初は難しく見えますが、実は
- 基本情報：プロジェクトの名前とバージョン
- scripts：よく使うコマンドのまとめ
- dependencies：アプリに必要なライブラリ
- devDependencies：開発時のみ必要なツール
↑を一旦覚えておけば良さそうです。
今度package.jsonを見る時は、「あ〜、これは開発コマンドがまとまってるところね」「ここにアプリで使うライブラリが書いてあるのね」と思えるはずです！