はじめに
今回は、プロジェクトを始めるにあたって、なぜ最初に npm install を実行するのかという理由について簡単にまとめます。
npm installとは？
npm install は、プロジェクトを動かすために必要なパッケージをインストールするコマンドです。
Next.jsのプロジェクトなら、Next.jsやReactをはじめ、開発で使用しているさまざまなライブラリが必要になります。
どのパッケージが必要なのかは、主に package.json に記載されています。
例えば、
{
"dependencies": {
"next": "...",
"react": "...",
"react-dom": "..."
}
}
と書かれていれば、このプロジェクトではNext.jsやReactなどを使用していることが分かります。
なぜcloneしただけでは動かないの？
通常、GitHubには node_modules をアップロードしません。
node_modules にはインストールされた大量のパッケージが入っており、ファイル数や容量が非常に大きくなるためです。
その代わりに、
package.json
package-lock.json
などをGitで管理します。
つまりGitHubからcloneした直後は、
「必要なパッケージの情報はあるけれど、パッケージ本体がまだPCにない」
という状態です。
そこで、
npm install
を実行します。
すると必要なパッケージがダウンロードされ、node_modules が作成されます。
開発を始めるまでの流れ
GitHubからNext.jsプロジェクトを取得した場合は、例えば以下のような流れになります
GitHubからコードを取得
↓
npm install
↓
必要なパッケージを揃える
↓
node_modulesが作られる
↓
npm run dev
↓
開発環境が起動
package.jsonとpackage-lock.jsonの違い
ここも最初は少し分かりにくいポイントです。
package.json は、プロジェクトでどんなパッケージを使用するのかを定義するファイルです。
一方、package-lock.json は、実際にインストールするパッケージのバージョンや依存関係をより具体的に記録するファイルです。
チーム開発では、この package-lock.json もGitで管理することで、メンバー間で環境の差が生まれにくくなります。
npm installとnpm ciの違い
package-lock.json が存在するプロジェクトでは、
npm ci
というコマンドを使うこともあります。
npm ci は package-lock.json に従ってクリーンな状態からインストールするため、CI/CDや環境をきっちり再現したい場面でよく利用されます。
普段の開発では、
npm install
を使うことが多く、新しいパッケージを追加するときにも使用します。
まとめ
npm install を最初にする理由は、プロジェクトを動かすために必要なパッケージを自分のPCに用意するためです。
GitHubからcloneしただけでは通常 node_modules は存在しません。
そのため、
git clone
↓
npm install
↓
npm run dev
という流れで開発環境を準備します。
最初はなんとなく実行していたコマンドでも、「何をしているのか」が分かると、エラーが起きたときにも原因を追いやすくなります。