Web制作の次の一歩に進むと、チュートリアルに突然npm installという呪文が出てきます。npmは「プログラム部品の宅配サービス」。この記事では、npmが何者で、npm installの瞬間に何が起きているのかを解きほぐします。
npm＝部品を取り寄せる宅配サービス
世界中の開発者が、便利なプログラムをパッケージという部品の形で公開しています。日付をきれいに表示する部品、スライドショーを作る部品、サイトの土台まるごと（AstroやReact）——その数200万個以上。
npm（Node Package Manager）は、この部品をコマンド1つで取り寄せて管理する仕組みです。Node.jsをインストールすると、npmも一緒に付いてきます。
npm installがやっていること
プロジェクトのフォルダでnpm installを実行すると、次の3つが起こります。
package.jsonを読む——「このプロジェクトに必要な部品リスト」が書いてあるファイル- 部品をダウンロード——リストの部品と、その部品が必要とする部品（依存の依存）もまとめて取り寄せる
node_modulesフォルダに並べる——取り寄せた部品の置き場所
たとえるなら、package.jsonは買い物リスト、npm installは注文ボタン、node_modulesは届いた段ボールの山です。
npm install # package.jsonのリストを全部取り寄せる
npm install astro # astroという部品を追加で取り寄せる（リストにも追記される）node_modulesはなぜあんなに巨大なの？
node_modulesを開くと、入れた覚えのないフォルダが何百と並んでいて驚きます。これは部品が部品を必要とする連鎖のせいです。あなたが頼んだのは1個でも、その部品が10個の部品に頼り、その10個がさらに——と芋づる式に増えていきます。
でも、こわがらなくて大丈夫。node_modulesの中身を自分で触ることはありません。段ボールの山は、開けずに置いておくものです。
よく見るnpmコマンド早見表
| コマンド | 意味 |
|---|---|
npm install | package.jsonの部品を全部取り寄せる |
npm install <名前> | 部品を追加で入れる（リストにも追記） |
npm uninstall <名前> | 部品を外す |
npm run dev | package.jsonに書かれたdevという作業を実行（開発サーバー起動が定番） |
npm -v | npm自体のバージョンを表示（動作確認に） |
npx <名前> | インストールせずに、その場だけそのパッケージを実行 |
チュートリアルでnpm run devと出てきたら、「このプロジェクトに用意されたdevという名前の作業を実行して」という意味です。中身はpackage.jsonのscripts欄に書いてあります。
表の最後のnpxは、部品を手元に残さずその場かぎりで試すコマンドです。「1回だけ使いたい」というときに便利で、npm iの打ちまちがいではありません。
便利さの裏の注意点もセットで
npmは「知らない誰かの部品を自分のPCに入れて動かす」仕組みでもあります。パッケージは審査を通った企業だけが置けるのではなく、世界中の誰でも公開できるのがnpmの自由さです。ほとんどの部品は善意で公開されていますが、まれに悪意ある部品がまぎれこむ事件も起きています。部品を入れるときの安全な習慣を、あわせて知っておきましょう。
npmnpmの怖い話——Shai-Hulud事件から学ぶ身の守り方実際に起きたShai-Hulud事件と、初心者ができる対策はこちらこのレッスンのまとめ
- npm＝プログラム部品（パッケージ）の宅配サービス。Node.jsと一緒に付いてくる
npm installはpackage.jsonの買い物リストを読んで、node_modulesに部品を並べる操作- node_modulesは触らない・消してOK・Gitに入れない——いつでもnpm installで復元できる
npm installの意味が分かれば、世の中のチュートリアルの最初の壁はもう越えています。