JavaScriptやReactの学習をしていると、チュートリアルや教材でよく出てくるのが npm install(エヌピーエム インストール) というコマンドです。
なんとなく「とりあえず実行するもの」というイメージを持っている人も多いですが、npm installにはしっかり役割があります。
この記事では、npm installの意味 と なぜ必要なのか を初心者向けにわかりやすく解説します。
npm installとは何をするコマンド?
npm installは、プロジェクトで使う必要がある パッケージ(便利な機能のまとまり) をまとめてインストールするコマンドです。
たとえばReactの開発では、React本体だけでなく、開発を進めるために必要なツールがたくさんあります。
npm installを実行することで、それらを自動で揃えてくれる というイメージです。
npm installでインストールされるもの
npm installを実行すると、基本的に次のものが準備されます。
node_modulesフォルダ
インストールされたパッケージが実際に入る場所です。
プロジェクトで必要なファイルが大量に入るため、サイズがかなり大きくなります。
package-lock.jsonファイル
「どのバージョンのパッケージを入れたか」を記録するファイルです。
これがあることで、別のパソコンや別の人が同じプロジェクトを動かすときに、同じ環境を再現しやすくなります。
package.jsonが超重要
npm installが何をインストールするかは、package.json というファイルを元に決まります。
package.jsonには、プロジェクトに必要なパッケージの情報が書いてあります。
つまりnpm installは、
package.jsonに書かれているパッケージを読み取り、必要なものをインストールする
という動きをしています。
npm installしないと動かないのはなぜ?
ReactやViteなどのプロジェクトは、作成した直後の状態では package.jsonはあるのに、必要なパッケージがまだ揃っていない ことがあります。
そのため、npm installを実行しないと次のような状態になります。
必要なパッケージが入っていない
node_modulesが存在しない
開発サーバーが起動できない
この状態で動かそうとすると、よくあるエラーとして
「〇〇が見つかりません」
「モジュールが存在しません」
といった表示が出て止まります。
npm installしなくても動くことがある理由
「npm installって毎回やらなくても動いてる気がする」ということもあります。
これは単純に、すでにnode_modulesが入っている状態で作業しているから です。
過去に一度npm installを実行していれば、必要なパッケージは揃っているので、そのまま開発を続けられます。
逆に次のような場合は、ほぼ確実にnpm installが必要になります。
新しいパソコンで開発を始めた
GitHubからプロジェクトをクローンしてきた
他の人からもらったプロジェクトを動かそうとしている
npm installはいつやればいい?
npm installを実行するタイミングは、ざっくり言うと次の通りです。
プロジェクトを新しく作ったとき
ReactやViteで新しい環境を作ったら、基本的に最初に実行します。
別の場所からプロジェクトを持ってきたとき
GitHubなどから落としてきたプロジェクトは、node_modulesが入っていない状態になっていることが多いです。
まずnpm installを実行して、環境を揃える必要があります。
package.jsonが更新されたとき
新しいパッケージを追加したり、構成が変わった場合はnpm installを実行して差分を反映させます。
npm installとnpm iの違い
npm installは、省略して npm i と書くこともできます。
意味は同じで、どちらも インストールを行うコマンド です。
初心者のうちはnpm installのまま使っても全く問題ありません。
よくある勘違い:npm installはReactを入れるコマンド?
npm installは「Reactをインストールするコマンド」と思われがちですが、正確には少し違います。
npm installは、Reactだけでなく、そのプロジェクトが動くために必要なパッケージをまとめて揃えるコマンド です。
その結果として、開発環境が完成し、プロジェクトが動くようになります。
まとめ:npm installは「開発に必要な道具を揃える」コマンド
npm installの意味を一言でまとめると、
プロジェクトに必要なパッケージをまとめてインストールするコマンド
です。
もしReactやViteのプロジェクトで動かないときは、まず
npm installを実行したかどうか
を確認してみてください。
初心者がつまずきやすいポイントですが、ここを理解すると開発がかなりスムーズになります。