npm installについてやり方を学んでみた

どうも、れいです。

プログラマーに憧れる1人情シスやってます。

今回はnpm installについて学んだことをアウトプットしていきたいと思います。

初心者知識なので、間違っている部分がありましたら教えてください。

筆者のプロフィール

• プレイ済ゲーム300以上
• 所持ハード20以上
• PC自作経験とGBASP改造経験
• インディーゲー好き
• デザイン等のクリエイティブなことが好き

よろしくね！
＠れい

npm installを学ぼうと思ったきっかけ

2026年3月31日、axiosがサプライチェーン攻撃を受けたことをきっかけに、npm installのやり方について考えてみました。

今までnpm installのことはよくわかっておらず、アプリの作り方を検索したときにnpm installをとりあえず叩け！って感じだったので、その程度の理解しかしていませんでした。

何も考えずにnpm installをやっていたので、twitterで

「今日だけはnpm installをするな！」

という投稿をみて、「え！！！どういうこと！？」と焦りに焦りました。

一歩間違えれば自分も食らっていたサイバー攻撃。

ここはnpm installをちゃんと学ぼうと思い、ここから仕組みや対策について学び始めました。

npm installを安全に行う為のフロー

ここからは自分なりにまとめた、npm installを安全に行う為のやり方です。

safe-installについては、この記事を参考にさせていただきました。

Zenn

9月に発生した npm のサプライチェーン攻撃 | 導入した最低限の対策まとめ

プロジェクト作成

プロジェクト直下で、以下のコマンドを実行します。

npm init -y

viteを使う人はこちらのコマンドを入力してください。

npm create vite@<バージョン名>

（バージョンの選び方についてはバージョンの調べ方で説明しています）

viteの場合は、Install with npm and start now? にYesで答えてしまうと、そのまま npm install されてしまいます。

ここはNoを選択しましょう。

コマンドを実行すると、package.json というファイルが生成されます。

package.jsonとは？

買い物リストのようなものです。

何かライブラリが欲しいときに、package.json にそのライブラリ等を書くとそれがインストールされます。
（vite を使用した場合には、選択したフレームワーク等が package.json に既に記述済みとなる）

.npmrcを作成

プロジェクト直下に .npmrc を作成します（手動でも可）。

type nul > .npmrc

.npmrc に記述する中身は以下の通り。

ignore-scripts=true
min-release-age=7

以降、すべてのnpmコマンドに自動適用されます。

なお、.npmrc がちゃんと効いてるか確認するには、以下のコマンドで確認します。

npm config list

safe-installを記述

package.json に以下を追記します。
既に .npmrc があるので、それと重複する内容は書かないようにします。

{
  "scripts": {
    "safe-install": "npm install --package-lock-only && npm audit --audit-level=critical && npm ci"
  }
}

以下、意味です。

依存を書く

package.json に以下を追記します。
（viteをインストールした人には既に依存関係が記述されています。追加でインストールしたいものがあれば追記しましょう。）
dependencies と devDependencies の中に、欲しいライブラリを記述しています。
例）

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "typescript": "^5.4.0"
  },

^は範囲指定です。
dependencies と devDependencies、どちらにライブラリを書くかについての判断の仕方ですが、
「ビルド・コンパイル後の成果物を動かすときに必要か？」
ということなんだそうです（これに関しては私はまだよくわかっていない）。

▶ 成果物を動かすときに必要だったら、dependencies。
▶ 成果物を動かすときに必要だったら、devDependenciesです。

以下はより具体的な例を挙げた説明です（claudeに聞いてみた）。

dependencies（本番でも動く必要がある）

• react / vue → 画面を描画するのに必要
• express → サーバーを動かすのに必要
• axios → APIを叩くのに必要

devDependencies（開発中だけ使う）

• eslint → コードのチェックツール（ユーザーには関係ない）
• prettier → コード整形ツール（同上）
• typescript → コンパイルしたら用済み
• jest / vitest → テストツール（本番では動かさない）
• vite / webpack → ビルドツール（ビルドしたら用済み）

判断がつかないうちはdependenciesで良さそうです。

また、追加でライブラリを入れたいときは、都度ライブラリを package.json に追記して、npm run safe-installを実行します（今はまだ実行しない）。

バージョンの調べ方

バージョンどうやって調べるの？っていうときは、以下のコマンド。
このコマンドでは最新の安定板のバージョンが表示されます。

npm show <ライブラリ名> version

それか、以下のサイトを使用します。
https://www.npmjs.com/package/react?activeTab=versions

コマンドで、もしくはサイトのlatestで19.2.4と表示されていれば、dependenciesに^19.0.0と入力してsafe-installすることで、

「19.x.xの範囲から7日以内にリリースされたものはインストールしないし、インストールしても即実行しないよ（.npmrcの効果）」

と、することができます。

なお、dependenciesやdevDependenciesは重複してはいけないので、必ず1つに統一すること。

究極的に面倒くさいとき

都度dependenciesやdevDependenciesへ追記するのがほんとのほんとうに面倒くさいときは

npm install <ライブラリ名>

とすることで package.json に自動で範囲指定が追加されるし、
以下だとバージョンを直接指定してインストールできます。

npm install <ライブラリ名>@<バージョン>

ただしこの方法は safe-install のフローを経ないため、 audit（脆弱性監査） のチェックをスキップしてしまいます。

基本は package.json に手動で追記して safe-install を実行するのが望ましいです。

実行

以下のコマンドで package.json に記述したライブラリ等がまとめてインストールされます。

新たに追加したいライブラリが出てきたら、package.json に追記し、都度safe-installをします。

npm run safe-install

npm rebuild <ライブラリ名>

インストールすると、node_modules（ここにライブラリ等がまとめられる）というフォルダが生成されますが、このフォルダは重くなることが予想されるため、もし github を使っている場合は .gitignore へ記載しておきます。

他の開発環境からインストールする場合

以降はこれを実行します（他の人が同じ依存環境をインストールしたい場合）。

こうするとlockの中身を見てインストールを行ってくれるので安心です。

※npm installは絶対に使わないこと。

npm ci

まとめ

1. npm init -yでプロジェクト作成
2. .npmrcを作成
3. safe-installを記述
4. 依存を書く
5. safe-installを実行

ベテランの方からしたら間違えまくっているのかもしれませんが、私の調べる力と理解力ではここまでが限界でした。

もっといい方法があれば教えてください。

以上、「npm installについてやり方を学んでみた」でした！