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

生徒

「Next.jsのプロジェクトを作ったら、package.jsonっていうファイルが出てきました。これって何ですか？」

先生

「package.jsonは、Next.jsプロジェクトの設計図のような大事なファイルです。」

生徒

「文字がたくさん書いてあって、どこを見ればいいのかわかりません…」

先生

「大丈夫です。初心者の方でも読めるように、順番に意味を解説していきましょう。」

1. package.jsonとは何か？Next.jsでの役割

package.jsonとは、Next.jsプロジェクトで使う設定情報をまとめたファイルです。人で例えると、名前や年齢、持っている道具を書いたプロフィール帳のような存在です。 Next.jsだけでなく、JavaScriptやReactの開発でも必ず登場します。

このファイルを見ることで、「どんなライブラリを使っているのか」「どうやってアプリを起動するのか」といった情報が一目でわかります。

2. nameとversion：プロジェクトの基本情報

package.jsonの最初に書かれていることが多いのが、nameとversionです。 nameはプロジェクトの名前、versionはアプリのバージョン番号を表します。

バージョン番号は、アプリがどれくらい更新されているかを示す目印です。初心者のうちは、「これは名前と番号なんだな」と理解できれば十分です。

scriptsは、コマンドをまとめた場所です。難しく聞こえますが、「この命令を実行すると、これが動く」という対応表だと思ってください。


{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

「npm run dev」を実行すると、開発用のNext.jsサーバーが起動します。

devは開発中に使うもの、buildは本番用の準備、startは完成したアプリを動かすための命令です。

dependenciesは、このNext.jsアプリが動くために必要な部品のリストです。ゲーム機で例えると、本体に加えて必要なカセットの一覧のようなものです。


{
  "dependencies": {
    "next": "14.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

Next.jsはReactを使って作られているため、reactやreact-domも一緒に書かれています。

devDependenciesは、アプリを作っている最中だけ使う道具です。完成したアプリを使う人には関係ありません。


{
  "devDependencies": {
    "eslint": "8.56.0"
  }
}

eslintは、コードの書き方をチェックしてくれる先生のような存在です。初心者でもミスに気づきやすくなります。

privateは、このプロジェクトを外部に公開するかどうかを決める項目です。 trueになっている場合、誤って公開されるのを防げます。

学習用や個人開発のNext.jsプロジェクトでは、trueにしておくことが多いです。

enginesは、どのバージョンのNode.jsで動かすかを指定します。 Node.jsとは、JavaScriptをパソコンで動かすための土台です。


{
  "engines": {
    "node": ">=18.0.0"
  }
}

バージョンをそろえることで、「自分の環境では動かない」というトラブルを防げます。

package.jsonを読めるようになると、Next.jsプロジェクトの全体像が見えてきます。どんな機能があり、どうやって起動し、何を使って作られているのかが理解できます。

最初はすべてを覚える必要はありません。「scripts」「dependencies」「devDependencies」を中心に、少しずつ慣れていきましょう。