TL;DR

フロントエンドエンジニアの方々にとって、npm コマンドは日常的に使用されるツールだと思います。

Next.js を用いたプロジェクトでは、npm コマンドを活用して開発作業を効率化する場面が多く、修正やバージョンアップにも役立ちます。この記事では、Next.js プロジェクトで頻繁に使われる npm コマンドを一覧で紹介し、各コマンドがどのような状況で活躍するのか、使いどころを解説します。

予備知識

npm コマンドを扱う上での予備知識を簡単に解説します。

npm について

npm（Node Package Manager）は、Node.js のパッケージマネージャーで、JavaScript のコードやライブラリを管理するためのツールです。npm は、公式の npm レジストリからパッケージをダウンロードしたり、自分自身で作成したパッケージを公開したりすることができます。これによって、開発者はコードの再利用、共有、管理が容易になります。

package.json について

package.json ファイルは、Node.js プロジェクトの設定ファイルです。プロジェクトのメタデータ（名前、バージョン、説明など）や依存関係（ライブラリやツール）、スクリプト（ビルド、テスト、デプロイなど）が定義されています。

npm のバージョンをチェック

npm -v

npm の現在のバージョンを表示する。

使いどころ

• 使用している npm のバージョンを確認する
• アップデートが必要かどうかを判断する際に役立つ

インストール済のパッケージ一覧表示

npm list

インストールされたパッケージとその依存関係を一覧表示する。

使いどころ

• プロジェクトにインストールされたパッケージを確認する
• パッケージの依存関係を視覚的に理解する
• トラブルシューティングや依存関係の管理に役立つ

アップデート

npm update

アップデート可能なパッケージを最新バージョンに更新する。

使いどころ

• プロジェクトのすべてのパッケージを一括で更新
• 依存関係も適切に更新される
• セキュリティの問題修正やパフォーマンスの改善に寄与する場合がある

キャッシュの整合性を確認

npm cache verify

キャッシュの整合性を確認する。

使いどころ

• キャッシュに格納されたデータが破損していないかをチェックする
• 不要なデータや破損したデータがあれば報告する
• キャッシュの健全性を維持し、問題がある場合は修復の指針を提供する

npm のキャッシュをクリア

npm cache clean -f

npm のキャッシュを強制的に削除する。

使いどころ

• インストールの問題解消に役立つ場合がある
• ディスクスペースを解放する
• -f オプションで強制的にキャッシュを削除する

プロジェクトをローカルで実行

npm run dev

開発モードでプロジェクトをローカル環境で実行する。

使いどころ

• 開発中にリアルタイムで変更を反映させることが多い
• デバッグやエラーの確認が容易

ビルドプロセスを実行

npm run build

プロジェクトをビルドする。

使いどころ

• プロダクション用にコードを最適化する
• CSS、JavaScript、画像などの資源をバンドルする
• コンパイルやトランスパイル（TypeScript を JavaScript に変換するなど）を行う

ビルドしたプロジェクトをスタート

npm start

ビルドされたプロジェクトをローカル環境で実行する。

使いどころ

• ビルドされたプロジェクトをローカルで実行する
• 通常、本番環境と同じ条件でアプリケーションを動かす
• ビルド成功後に自動的にサーバーを立ち上げる場合もある

プロジェクトの依存関係をインストール

npm install

プロジェクトが依存しているパッケージをインストールする。

使いどころ

• package.json ファイルにリストされている依存パッケージをインストールする
• オプションとしてパッケージ名を指定することで、特定のパッケージをインストールできる
• 開発依存性（devDependencies）も含めてすべての依存性がインストールされます

特定のパッケージをインストール

npm install package-name

特定のパッケージをアンインストール

npm uninstall package-name

開発環境に特定のパッケージをインストール

npm install package-name --save-dev

特定のパッケージをプロジェクトの開発依存関係としてインストールする。

使いどころ

• テストライブラリ、ビルドツール、リンターなどの開発時にのみ必要なパッケージをインストールする
• 本番環境にはインストールされない
• package.json に依存関係を記録し、他の開発者と簡単に共有できる

グローバルにパッケージをインストール

npm install -g package-name

特定のパッケージをシステム全体で利用可能にするためにグローバルにインストールする。

使いどころ

• コマンドラインツールやビルドツールなど、プロジェクト固有でないパッケージをインストールする
• システム全体で利用可能になる
• プロジェクトの package.json には影響を与えない

パッケージを特定のバージョンでインストール

npm install package-name@version

特定のバージョンの npm パッケージをインストールする。

使いどころ

• 特定のバージョンのパッケージを明示的にインストールする
• バージョンの違いによる不具合を避けるために使用する
• プロジェクトが依存する特定のバージョンのパッケージを管理

依存関係を再インストール

rm -rf node_modules package-lock.json
npm install

依存関係とロックファイルを削除後、再インストールします。

使いどころ

• node_modules と package-lock.json の両方をクリアして依存関係をリセットする
• 依存関係に問題が生じた場合のトラブルシューティング
• 新たな環境で依存関係を一から確立する場合

ローカルプロジェクトでの npm パッケージをアウトデート

npm outdated

プロジェクトで使用されている npm パッケージが最新版であるかどうかを確認する。

使いどころ

• プロジェクトにインストールされているパッケージの現在のバージョンと、利用可能な最新バージョンを比較する
• 更新が必要なパッケージを特定し、必要に応じて更新作業を行う
• セキュリティリスクの低減や新機能の利用につながる

ローカルプロジェクトの特定のパッケージをアップデート

npm update package-name

指定されたパッケージを最新バージョンに更新する。

使いどころ

• 特定のパッケージだけを最新バージョンに更新する
• 依存関係も適切に更新されます
• セキュリティの問題修正やパフォーマンスの改善に寄与する場合があります

プロジェクトに関するセキュリティの脆弱性をチェック

npm audit

プロジェクトの依存関係に存在するセキュリティの脆弱性を探す。

使いどころ

• セキュリティの脆弱性を特定する
• 対応策を提案する場合がある
• 修正の必要性や重要度を評価する

セキュリティの脆弱性を自動修正

npm audit fix

npm audit で検出された脆弱性を自動で修正する。

使いどころ

• セキュリティの脆弱性を修正する
• 修正可能な依存関係を自動で更新する
• 手動での対処が必要な場合も指摘する

未使用の依存関係を削除

npm prune

未使用の依存関係をnode_modulesから削除する。

使いどころ

• プロジェクトをクリーンに保つ
• ディスク容量を節約する
• 開発環境と本番環境の整合性を高める

npm の設定リストを表示

npm config list

設定されている npm の全ての設定項目をリストする。

使いどころ

• npm の設定項目を確認する
• トラブルシューティングや設定変更に役立つ

特定のパッケージの詳細情報を表示

npm info package-name

指定したパッケージに関する詳細情報を表示する。

使いどころ

• バージョン、依存関係、レポジトリなどの情報を提供する
• パッケージ選定やバージョン管理に役立つ

npm レジストリでパッケージを検索

npm search package-name

指定した名前に一致または関連するパッケージを npm レジストリから検索する。

使いどころ

• 既存のパッケージを探す
• 機能や用途に応じたパッケージを見つける
• パッケージの人気や評価を確認する

npm のルートディレクトリを表示

npm root

インストールされたパッケージが格納されているディレクトリ（通常は node_modules ディレクトリ）の絶対パスを表示する。

使いどころ

• パッケージがインストールされた場所を特定する
• パッケージの管理や移動に役立つ
• node_modules ディレクトリの位置を確認する

npm のグローバルルートディレクトリを表示

npm root -g

グローバルにインストールされたパッケージが格納されているディレクトリの絶対パスを表示する。

使いどころ

• グローバルにインストールされたパッケージの場所を特定する
• グローバルパッケージの管理や移動に役立つ
• グローバルにインストールされたnode_modulesディレクトリの位置を確認する