Node.jsの機能を使用する際にはnpmを使用する。
一方、Angularの機能を使用する際にはngコマンドを使用するが、こちらはあまり意識して使うことは無いかもしれない。
npmコマンド基礎
予約されている（はじめから使用できる）npmコマンドは以下。
- npm install：カレントディレクトリにnodeをインストールする
- npm test：UTを実行する
- npm start：アプリケーションを起動する
その他は、npm run <script> で、グローバルの設定に依存せず、プロジェクトフォルダのpackage.jsonに記載されているscript欄のコマンドを実行する。
ngxコマンド
npxはnpmに同梱されているコマンドで、開発フォルダのnode_modules/.binに含まれる実行ファイルを一時的に呼び出す。
例えば、ngコマンドを使用したいとき、直接『ng ●●』と打つと、プロジェクトではなくグローバルのnode_modulesのngコマンドを参照する。
プロジェクトでAngular-CLIを使用していても、グローバルに存在しない場合、『用語’ng’は、コマンドレット、関数、スクリプトファイル、または操作可能なブログラムの名前として認識されません』エラーとなる。
以下のようにnpxコマンドに続けて実行すれば、ローカルのAngular-cliを参照するため、実行できるようになる。
npx ng buildnpm run <script>に引数を渡す
package.jsonのscript欄に以下の記載があるとする。
"mytest": "npm run test --code-coverage"つまり、npm run mytest を実行すれば、カバレッジ付きのテストが実行される。
このとき、すべてのテストでなく、1つのファイルのテストを実行したい場合は、さらに-includeオプションを付与する必要がある。
しかし、npm run mytestは、package.jsonのscriptsに記載されているmytestの処理を実行せよ、という意味なので、それ自体に引数を渡すことができない。
mytestで実行される先の処理に引数を渡す場合は、以下のように『-』を２つ挟んで追加のオプションを記述する。
npm run mytest -- --include filepathnode_moduleのキャッシュ
パッケージ管理において、キャッシュを理解することは非常に重要。
package.jsonに記載したはずのパッケージが使用できなかったり、指定していたはずのバージョンで依存関係が作られていなかったりしたときに、ここを理解していないと解決が難しい。
キャッシュの優先順位
npm i を実行すると、npmはpackage.json 内で指定された必要なパッケージ（dependencies）をインストールしようとする。
npm は各所にキャッシュを持っており、必要なパッケージやバージョンが見つからなければ、最終的に Web から取得する。
参照の優先順位は以下の通り。
- ローカルキャッシュ ※ローカルPCのプロジェクトフォルダ内の node_modules。１バージョンのみ
- グローバルキャッシュ ※ローカルPCのグローバル領域にインストールされているの node_modules（C:\Users\ユーザー名\AppData\Roaming\npm-cache\）
- レジストリ ※.npmrc で指定した Nexus や自社サーバーなど
- Web ※デフォルトでは npm の公式 URL（https://registry.npmjs.org/）
優先順位の低い取得先で対象バージョンが見つかった場合は、上位にもキャッシュされる。
例えば 1、2 では見つからず、3 で Nexus から対象のパッケージが見つかると、1、2 にもそのバージョンがキャッシュされる。
Appendix
Nexus にアップロードした Angular の自作ライブラリを参照する
以下が存在し、
- Angularのメインアプリケーション
- Angularの自作ライブラリ
メインアプリが自作ライブラリを参照する構成で、ライブラリはNexusにアップロードしてどこからでも参照できるようにしているケース。
自作ライブラリは、Nexus の npm-group に、myorg というパッケージ名で登録しているものとする。
メインアプリ側のpackage.json に以下を記述する。
"dependencies": {
"myorg": "npm:myorg@x.x.x"
}Nexusでは、myorgの配下にmyorg-x.x.x.tgz、というような構成で資源を配置すると思うが、package.json上では、
- バージョンの前に@
- tgzのような拡張子は記述しない
といように書き方が異なるので注意すること。
ローカルで参照したい場合
自作ライブラリは、ローカルでビルドして、ローカル内で参照したい場合。
自作ライブラリのルートフォルダへ移動してからビルド
npm run buildビルドで生成された成果物に移動する。
cd ./dist/my-libパックする。
npm packすると、my-lib-x.x.x.tgz が作成される。
自作ライブラリを使用する側のリポジトリに移動し、package.json に以下を記述する。
"dependencies": {
"my-lib": "file:C:/.../my-lib-x.x.x.tgz"
}npmコマンド集
冒頭で紹介した以外に良く使用するnpmコマンド
パッケージ一覧
npm listパッケージが使用している、さらに下位の依存関係まで表示する場合は -a オプションを使用する
パッケージのバージョン依存関係の確認
使用しているパッケージの依存関係で、必要なバージョンを満たしているかを一覧で確認する。
npm outdatedCURRENT カラムが MISSING となっている場合は、パッケージをインストールしていない状態なので、先に npm i を実行する。
node_moduleのインストール場所を確認
グローバルで使用されているnode_modulesの場所を調べる。
npm root -gNodeバージョン管理
EOL対応などで、Nodeの複数バージョンを使いまわしたいタイミングはしばしばある。
nvmを使用して、nodeのバージョンを複数インストールして使いまわすことができる。
nvmの公式のGithubからインストーラーをダウンロードする。
nvm-setup.exe をダウンロードして実行する。
コマンドで必要なバージョンをインストールする。
nvm install 18インストールしたバージョンに切り替える。
nvm use 18バージョンが切り替わったか確認する。
node -vdependenciesとdevDependenciesの違い
dependencies と devDependencies はどちらも 同じようにインストール可能な npm パッケージ ですが、「どの環境で使われるか」 によって区別されています。
dependencies：アプリが「本番（production）」で実行されるときに必要なパッケージ（React、Express、axios など）
devDependencies：開発中・テスト中だけ必要なパッケージ（Playwright、ESLint、TypeScript、Jest など）
どちらが使用されるかはどのように決まる？
npm は、インストール時に以下の環境変数を見ています。
- NODE_ENV=production → dependencies のみインストール
- NODE_ENV=development（または未設定）→ 両方（dependencies + devDependencies）をインストール
npm installは通常、開発環境では両方インストールされます。
一方、CI や本番デプロイなどで、NODE_ENV=production npm installとすると、devDependencies はスキップ されます。
npm そのものは「どっちを使うか」を決めません。実際に「コードがどの環境で実行されるか」で決まります。
- Webアプリのサーバーコード（npm start など）で必要 → dependencies
- テスト・ビルド・リンター・型チェックなどのツール → devDependencies
CI/CDやクラウド環境ではどうなるか
多くのクラウドサービス（Vercel、Heroku、Renderなど）では、本番ビルド時に NODE_ENV=production を自動で設定します。
そのためdependencies に入っているパッケージだけが本番で利用されます。
devDependenciesへのインストール方法
もちろん手書きでもOKだが、パッケージをインストールする際にDオプションを付与することでdevDependenciesへインストールされる。
npm install -D [packagename]
コメント