2-2. ライブラリの導入方法（npm）

更新日：2025年12月7日

2-2. ライブラリの導入方法（npm）について解説します。
実践編：ライブラリ

※画像は生成AIによるイメージです。

npmを使ったライブラリの導入は、モダンなJavaScript開発の標準的な方法です。 初期設定は必要ですが、依存関係の管理やバージョン管理が確実に行えます。

事前準備

  1. Node.jsのインストール：nodejs.orgから最新のLTS版をダウンロード
  2. インストール確認：ターミナルで以下のコマンドを実行
# バージョン確認
node -v    # v18.16.0 のように表示される
npm -v     # 9.5.0 のように表示される

プロジェクトの初期化

# プロジェクトフォルダを作成
mkdir my-project
cd my-project

# package.jsonを作成（対話形式）
npm init

# またはデフォルト設定で作成
npm init -y

これでpackage.jsonファイルが作成され、プロジェクトの設定が記録されます。

ライブラリのインストール

基本的なインストール

# lodashをインストール
npm install lodash

# 省略形
npm i lodash

# 複数同時インストール
npm install axios moment chart.js

バージョン指定インストール

# 特定バージョン
npm install lodash@4.17.21

# メジャーバージョン指定
npm install lodash@4

# 最新版（非推奨）
npm install lodash@latest

依存関係の種類

コマンド 保存先 用途
npm install dependencies 本番環境で必要
npm install --save-dev devDependencies 開発時のみ必要
npm install -g グローバル システム全体で使用 
# 本番用（通常）
npm install express

# 開発用
npm install --save-dev webpack
npm install -D eslint  # 省略形

# グローバル
npm install -g typescript

package.jsonの構造

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "プロジェクトの説明",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "build": "webpack",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.2",
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "webpack": "^5.88.0",
    "jest": "^29.5.0"
  }
}

使用方法（ES6 import）

// ライブラリ全体をインポート
import _ from 'lodash';

// 特定の機能のみインポート
import { debounce, throttle } from 'lodash';

// 名前を変更してインポート
import { cloneDeep as clone } from 'lodash';

// 使用例
const arr = [1, 2, 3, 4];
const doubled = _.map(arr, n => n * 2);

使用方法（CommonJS require）

// ライブラリ全体を読み込み
const _ = require('lodash');

// 特定の機能のみ
const { debounce } = require('lodash');

// 使用例
const arr = [1, 2, 3, 4];
const doubled = _.map(arr, n => n * 2);

npm scripts

package.jsonのscriptsセクションに、よく使うコマンドを登録できます。 

{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "build": "webpack --mode production",
    "test": "jest",
    "lint": "eslint src/**/*.js"
  }
}
# 実行方法
npm run start
npm run build
npm test      # testは run 不要

package-lock.json

  • 正確なバージョンを記録
  • 依存関係の依存関係も含む
  • チーム開発で同じ環境を再現
  • Gitに含める必要あり

重要

package-lock.jsonは手動で編集せず、必ずGitに含めてください。

よく使うnpmコマンド

コマンド 機能
npm list インストール済みパッケージ一覧
npm outdated 更新可能なパッケージ確認
npm update パッケージ更新
npm uninstall パッケージ削除
npm audit セキュリティ脆弱性チェック
npm audit fix 脆弱性の自動修正

.npmrcファイル

プロジェクトごとのnpm設定を記録するファイルです。 

# レジストリの設定
registry=https://registry.npmjs.org/

# プロキシ設定（企業内など）
proxy=http://proxy.example.com:8080

# ログレベル
loglevel=warn

トラブルシューティング

# キャッシュクリア
npm cache clean --force

# node_modules再インストール
rm -rf node_modules package-lock.json
npm install

# 権限エラーの解決（Mac/Linux）
sudo npm install -g パッケージ名

# Windowsの場合は管理者権限で実行

まとめ

npmによる管理は初期設定が必要ですが、大規模プロジェクトでは必須のツールです。 依存関係の管理、バージョン管理、スクリプトの自動化など、開発効率を大幅に向上させます。 次のページでは、APIの使い方とキー管理について学習します。

免責事項
本コンテンツは2025年12月時点の情報に基づいて作成されている。最新の情報については公式ドキュメントを参照されたい。