【初心者向け】package.jsonってちゃんと見たことある？

`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して直後のものではないです）

```json
{
  "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"
  }
}
```

ずら～っといろいろ書いてありますねー
一つずつ見ていきましょう :point_down:

## 基本情報

### プロジェクトの身分証明書的なもの
```json
{
  "name": "frontend",
  "version": "0.1.0",
  "private": true
}
```

| 項目 | 意味 | 例 |
|---|---|---|
| `name` | プロジェクト名 | `"frontend"` |
| `version` | バージョン | `"0.1.0"`（大きな変更.機能追加.バグ修正） |
| `private` | npm公開するか | `true`なら非公開 |

普通のWebアプリなら`private: true`にしておけばOKです

## 「scripts」よく使うコマンド集

開発でよく使うコマンドがまとまっています

```json
"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` |

### 実際の使い方
```bash
# 開発サーバーを立てる
npm run dev
```

開発中は`npm run dev`を実行するだけで、ファイルを変更するたびに自動でページが更新されます！便利ですよねー :sparkles:

## 「dependencies」アプリに必要なライブラリ

**本番環境でも必要**なライブラリたちです。
ここにプロジェクトが動作するために必要な外部ライブラリが記載されます

```json
"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"
}
```

### バージョンの記号は何？

```json
"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」開発時のみ必要なツール

**開発中だけ使う**ツールたちです

```json
"devDependencies": {
  "@biomejs/biome": "1.9.4",
  "@storybook/nextjs": "^8.6.11",
  "@types/node": "^20",
  "@types/react": "^19",
  "typescript": "^5",
  "vitest": "^3.1.1"
}
```

### 新しいライブラリを追加したい時
```bash
# 本番でも使うライブラリ
npm install ライブラリ名

# 開発時のみ使うツール
npm install --save-dev ツール名
```

## まとめ

`package.json`は最初は難しく見えますが、実は

- **基本情報**：プロジェクトの名前とバージョン
- **scripts**：よく使うコマンドのまとめ
- **dependencies**：アプリに必要なライブラリ
- **devDependencies**：開発時のみ必要なツール

↑を一旦覚えておけば良さそうです。

今度`package.json`を見る時は、「あ〜、これは開発コマンドがまとまってるところね」「ここにアプリで使うライブラリが書いてあるのね」と思えるはずです！

## 参考
- [Next.js公式ドキュメント - Installation](https://nextjs.org/docs/app/getting-started/installation)
- [【初心者向け】NPMとpackage.jsonを概念的に理解する](https://qiita.com/righteous/items/e5448cb2e7e11ab7d477)