npmとは?JavaScriptの開発に欠かせないパッケージ管理ツールを徹底解説

JavaScript

JavaScriptでWebサイトやアプリを作ろうとした時、「全部のコードを自分で書かなきゃいけないの?」と思ったことはありませんか?

実は、世界中の開発者が作った便利なプログラム部品(パッケージ)を、簡単に自分のプロジェクトに組み込める仕組みがあるんです。それが今回紹介するnpmという道具になります。

npmを使えば、数行のコマンドを入力するだけで、必要な機能を一瞬で追加できます。車輪の再発明をせず、既に完成している優れたコードを活用できるので、開発スピードが劇的に上がるんです。

この記事では、npmの基本から実践的な使い方まで、初心者の方にも分かりやすく解説していきます。


スポンサーリンク
  1. npmって何?基本をサクッと理解しよう
    1. パッケージって何?
    2. npmの3つの顔
  2. なぜnpmが必要なの?
    1. 依存関係の管理
    2. バージョン管理
    3. チーム開発での共有
  3. Node.jsとnpmの関係
    1. Node.jsとは?
    2. セットでインストールされる
  4. package.json:プロジェクトの設計図
    1. package.jsonの中身
    2. 重要な項目を解説
    3. package.jsonの作成方法
  5. npmの基本コマンド
    1. パッケージのインストール
    2. パッケージのアンインストール
    3. パッケージの更新
    4. インストール済みパッケージの一覧表示
    5. 古いパッケージのチェック
  6. グローバルとローカルのインストール
    1. ローカルインストール(デフォルト)
    2. グローバルインストール
  7. node_modulesフォルダの謎
    1. なぜこんなに大きいの?
    2. Gitには含めない
  8. package-lock.json:正確なバージョン管理
    1. なぜ2つ必要なの?
    2. なぜ必要?
    3. Gitに含める
  9. バージョン番号の読み方:セマンティックバージョニング
    1. 基本形式
    2. バージョン指定の記号
  10. npm scriptの活用
    1. 基本的な使い方
    2. 複数のコマンドを連結
  11. npxコマンド:インストール不要で実行
    1. 使い方
    2. メリット
  12. npmの代替ツール
    1. Yarn
    2. pnpm
    3. どれを使うべき?
  13. セキュリティの注意点
    1. 脆弱性のチェック
    2. 信頼できるパッケージを選ぶ
    3. package-lock.jsonを確認
  14. よくあるトラブルと解決法
    1. EACCES権限エラー
    2. node_modulesが壊れた
    3. キャッシュのクリア
    4. バージョンの不一致
  15. まとめ:npmでJavaScript開発をもっと快適に

npmって何?基本をサクッと理解しよう

npm(エヌピーエム)は、「Node Package Manager」の略で、JavaScriptのパッケージ管理ツールのことです。

パッケージって何?

パッケージとは、特定の機能を持ったプログラムのまとまりのこと。「ライブラリ」や「モジュール」とも呼ばれます。

例えば:

  • 日付を扱いやすくする「Moment.js」
  • Webサーバーを簡単に作れる「Express」
  • 画像を加工できる「Sharp」

こうした便利な道具が、パッケージとして世界中に公開されているんです。

npmの3つの顔

npmには、実は3つの役割があります。

1. コマンドラインツール
ターミナル(コマンドプロンプトやターミナルアプリ)で使う、パッケージをインストールしたり管理したりするためのプログラムです。

2. パッケージレジストリ
世界中のパッケージが登録されている巨大な倉庫。npmjs.comというウェブサイトで、200万以上のパッケージが公開されています。

3. Webサイト
パッケージを検索したり、使い方を調べたりできるサイト(https://www.npmjs.com)です。


なぜnpmが必要なの?

「パッケージなんて、自分でダウンロードすればいいじゃん」と思うかもしれません。でも、手動で管理するのは大変なんです。

依存関係の管理

パッケージAを使いたいとします。でも実は、パッケージAは内部でパッケージBとCを使っています。さらに、パッケージBはパッケージDを使っていて…

このように、パッケージが他のパッケージに依存している関係を「依存関係」と言います。手動で全部を把握して管理するのは、ほぼ不可能ですよね。

npmは、この複雑な依存関係を自動的に解決してくれるんです。

バージョン管理

パッケージは日々更新されます。バグ修正や新機能の追加、セキュリティパッチなど、様々な理由でバージョンが上がっていくんです。

npmを使えば、プロジェクトごとに適切なバージョンを管理できます。「プロジェクトAでは古いバージョン、プロジェクトBでは最新版」といった使い分けも簡単です。

チーム開発での共有

複数人で開発する時、「自分の環境では動くのに、他の人の環境では動かない」という問題がよく起きます。

npmを使えば、プロジェクトで使うパッケージのリストを共有できるので、全員が同じ環境を簡単に再現できるんです。


Node.jsとnpmの関係

npmを理解するには、Node.jsも知っておく必要があります。

Node.jsとは?

Node.js(ノード・ジェイエス)は、JavaScriptをブラウザの外でも実行できるようにした実行環境のことです。

元々JavaScriptは、Webブラウザの中だけで動く言語でした。でもNode.jsの登場で、サーバー側のプログラムやコマンドラインツールもJavaScriptで書けるようになったんです。

セットでインストールされる

Node.jsをインストールすると、npmも一緒についてきます。つまり、Node.jsを入れれば、自動的にnpmも使えるようになるんですね。

確認方法は簡単。ターミナルで次のコマンドを打ってみましょう。

node -v
npm -v

バージョン番号が表示されれば、正しくインストールされています。


package.json:プロジェクトの設計図

npmを使うプロジェクトには、必ずpackage.jsonというファイルがあります。これは、プロジェクトの情報とパッケージの依存関係を記録した設計図のようなものです。

package.jsonの中身

基本的な構造はこんな感じです。

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "私のプロジェクト",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.0",
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "jest": "^29.0.0"
  }
}

重要な項目を解説

name / version
プロジェクトの名前とバージョン番号。自分のパッケージを公開する場合は必須です。

dependencies
プロジェクトの実行に必要なパッケージのリスト。本番環境でも使うパッケージをここに書きます。

devDependencies
開発中だけ必要なパッケージのリスト。テストツールやビルドツールなど、本番環境には不要なものをここに書きます。

scripts
よく使うコマンドを短い名前で登録できます。npm startnpm testで実行可能です。

package.jsonの作成方法

新しいプロジェクトを始める時は、次のコマンドで対話形式で作成できます。

npm init

全部デフォルト設定で作りたい場合は、こちらが便利です。

npm init -y

npmの基本コマンド

実際にnpmを使う時の主要なコマンドを紹介します。

パッケージのインストール

基本形

npm install パッケージ名

省略形もあります(よく使われます)。

npm i パッケージ名

例えば、Expressをインストールする場合:

npm install express

これだけで、Expressと、それが依存している全てのパッケージが自動的にインストールされます。

複数まとめてインストール

npm install express lodash axios

開発用パッケージとしてインストール

npm install --save-dev jest

または短縮形:

npm i -D jest

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

不要になったパッケージは削除できます。

npm uninstall パッケージ名

パッケージの更新

インストール済みのパッケージを最新バージョンに更新します。

npm update

特定のパッケージだけ更新する場合:

npm update パッケージ名

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

どんなパッケージがインストールされているか確認できます。

npm list

階層が深すぎて見づらい場合は、深さを指定します。

npm list --depth=0

古いパッケージのチェック

更新可能なパッケージを確認できます。

npm outdated

グローバルとローカルのインストール

npmには、2つのインストール方法があります。

ローカルインストール(デフォルト)

プロジェクトのディレクトリ内だけで使えるインストール方法です。通常はこちらを使います。

npm install express

パッケージはnode_modulesというフォルダに保存されます。

メリット:

  • プロジェクトごとに異なるバージョンを使える
  • チーム開発で環境を統一しやすい
  • プロジェクトを削除すれば、パッケージも一緒に消える

グローバルインストール

パソコン全体で使えるようにインストールする方法です。

npm install -g パッケージ名

例えば、コマンドラインツールをインストールする場合:

npm install -g typescript

これで、どのディレクトリからでもtscコマンドが使えるようになります。

使い分けのポイント:

  • ライブラリ → ローカルインストール
  • コマンドラインツール → グローバルインストール

node_modulesフォルダの謎

パッケージをインストールすると、プロジェクトにnode_modulesというフォルダができます。

なぜこんなに大きいの?

node_modulesを開くと、びっくりするほど大量のフォルダがあります。「1つしかインストールしてないのに、なんでこんなに?」と思うかもしれません。

これは、依存関係の連鎖があるからです。あなたがインストールしたパッケージが別のパッケージに依存していて、そのパッケージがまた別のパッケージに依存していて…という形で、数珠つなぎに増えていくんです。

Gitには含めない

node_modulesは、基本的にGitなどのバージョン管理システムには含めません。

.gitignoreファイルに次の行を追加します。

node_modules/

理由:

  • ファイル数が多すぎてリポジトリが重くなる
  • package.jsonがあれば、誰でも再現できる
  • 環境によって微妙に内容が変わることがある

他の人がプロジェクトをクローンした後、npm installを実行すれば、package.jsonに基づいて全パッケージが再インストールされるので問題ありません。


package-lock.json:正確なバージョン管理

npm installを実行すると、package.jsonと一緒にpackage-lock.jsonというファイルができます。

なぜ2つ必要なの?

package.json
大まかなバージョン範囲を指定します(例:^4.18.0は「4.18.0以上、5.0.0未満」を意味します)。

package-lock.json
実際にインストールされた正確なバージョンを記録します。依存関係の依存関係まで、すべてのパッケージのバージョンが細かく書かれているんです。

なぜ必要?

例えば、あなたが今日インストールして動いたバージョンと、同僚が来週インストールするバージョンが微妙に違うことがあります。すると、「自分の環境では動くのに、他の人の環境では動かない」という問題が起きるんです。

package-lock.jsonがあれば、全員が完全に同じバージョンをインストールできます。

Gitに含める

package-lock.jsonは、Gitにコミットすべきファイルです。チーム全員で同じバージョンを使うために重要なんですね。


バージョン番号の読み方:セマンティックバージョニング

npmのパッケージは、セマンティックバージョニング(SemVer)という規則に従ってバージョン番号を付けています。

基本形式

メジャー.マイナー.パッチ

例:4.18.2

メジャーバージョン(4)
互換性のない大きな変更がある時に上がります。

マイナーバージョン(18)
後方互換性を保ちながら、新機能を追加した時に上がります。

パッチバージョン(2)
バグ修正など、小さな変更の時に上がります。

バージョン指定の記号

package.jsonでよく見る記号の意味:

^(キャレット)

"express": "^4.18.0"

「4.18.0以上、5.0.0未満」という意味。マイナーバージョンとパッチバージョンの更新は許可しますが、メジャーバージョンは固定します。最も一般的な指定方法です。

~(チルダ)

"express": "~4.18.0"

「4.18.0以上、4.19.0未満」という意味。パッチバージョンの更新だけを許可します。

バージョン固定

"express": "4.18.0"

完全に固定。このバージョンしか許可しません。


npm scriptの活用

package.jsonのscriptsセクションは、とても便利な機能です。

基本的な使い方

{
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest",
    "build": "webpack"
  }
}

これらは、次のように実行できます。

npm start
npm run dev
npm test
npm run build

starttestは特別扱いされていて、runを省略できます。

複数のコマンドを連結

順番に実行(&&)

"build": "tsc && webpack"

左のコマンドが成功したら、右のコマンドを実行します。

並行実行(&)

"dev": "webpack & nodemon"

両方のコマンドを同時に実行します(クロスプラットフォーム対応にはnpm-run-allパッケージの使用をおすすめします)。


npxコマンド:インストール不要で実行

npxは、パッケージをインストールせずに一時的に実行できるツールです。npm 5.2.0以降に付属しています。

使い方

npx create-react-app my-app

これは、create-react-appをグローバルにインストールすることなく、一時的にダウンロードして実行します。実行後は自動的に削除されるので、パソコンを汚しません。

メリット

  • 常に最新版を使える
  • グローバル環境を汚さない
  • 試しに使ってみたい時に便利

npmの代替ツール

npmの他にも、パッケージ管理ツールがいくつかあります。

Yarn

Facebookが開発したパッケージマネージャー。npmより高速で、セキュリティが強化されています。

基本的な使い方はnpmと似ています。

yarn add express
yarn install
yarn remove express

pnpm

ディスク容量を節約できる新しいパッケージマネージャー。パッケージを共有ストレージに保存して、シンボリックリンクで参照する仕組みです。

pnpm add express
pnpm install

複数のプロジェクトで同じパッケージを使う場合、ディスク使用量を大幅に削減できます。

どれを使うべき?

npm
標準で付属しているので、特別な理由がなければこれで十分です。

Yarn
大規模プロジェクトや、チームで統一したい場合に選択肢となります。

pnpm
ディスク容量が気になる場合や、多数のプロジェクトを扱う場合におすすめです。


セキュリティの注意点

npmは便利ですが、セキュリティにも注意が必要です。

脆弱性のチェック

インストール済みのパッケージに既知の脆弱性がないかチェックできます。

npm audit

問題が見つかった場合、自動修正を試みることも可能です。

npm audit fix

信頼できるパッケージを選ぶ

npmには誰でもパッケージを公開できます。そのため、中には悪意のあるコードが含まれている可能性も。

チェックポイント:

  • 週間ダウンロード数が多いか
  • 最終更新日が最近か
  • GitHubのスター数やissue対応状況
  • メンテナーの信頼性

package-lock.jsonを確認

予期しないパッケージの追加や変更に気づけるよう、package-lock.jsonの変更内容をレビューする習慣をつけましょう。


よくあるトラブルと解決法

npmを使っていると、時々問題に遭遇します。

EACCES権限エラー

グローバルインストール時に権限エラーが出る場合があります。

解決法:
sudoを使う(推奨しません)ではなく、npmのデフォルトディレクトリを変更するのがベストプラクティスです。

node_modulesが壊れた

「動いていたのに突然エラーが出る」という場合、node_modulesを削除して再インストールします。

rm -rf node_modules
npm install

Windowsの場合:

rmdir /s node_modules
npm install

キャッシュのクリア

npmのキャッシュが原因で問題が起きることもあります。

npm cache clean --force

バージョンの不一致

プロジェクトが要求するNode.jsのバージョンと、インストールされているバージョンが合わない場合があります。

nvm(Node Version Manager)を使えば、複数のNode.jsバージョンを切り替えられます。


まとめ:npmでJavaScript開発をもっと快適に

npmは、JavaScriptやNode.jsの開発に欠かせないパッケージ管理ツールです。

この記事のポイント:

  • npmはNode Package Managerの略で、パッケージ管理ツール
  • Node.jsをインストールすると一緒についてくる
  • package.jsonでプロジェクトの依存関係を管理
  • npm installでパッケージをインストール
  • ローカルとグローバルの2つのインストール方法がある
  • package-lock.jsonで正確なバージョンを固定
  • npm scriptで頻繁に使うコマンドを短縮できる
  • npxで一時的にパッケージを実行可能
  • Yarn、pnpmなどの代替ツールもある
  • セキュリティチェックを定期的に実行すべき

世界中の開発者が作った便利なパッケージを活用することで、開発スピードは劇的に向上します。npmの使い方をマスターして、効率的なJavaScript開発を楽しんでください!

コメント

タイトルとURLをコピーしました