CheatSheet
日本語 icon日本語English iconEnglish
チートシートとはカンニングペーパーのことです。それが転じて、本来覚えることをまとめておいたものです。
要点をすぐに参照できるようにまとめてみました。

パッケージマネージャー

エンジニアのためのWebチートシート

npm、yarn、pnpmの3つのJavaScriptパッケージマネージャーのコマンド比較チートシートです。 インストール、アップデート、削除など、日常的に使うコマンドを対比表形式でまとめました。

初期化

プロジェクト初期化

  • package.jsonを作成してプロジェクトを初期化します。

    # npm
npm init
npm init -y          # デフォルト設定

# yarn
yarn init
yarn init -y

# pnpm
pnpm init

全依存関係のインストール

  • package.jsonに記載された依存関係をすべてインストールします。

    # npm
npm install
npm ci               # クリーンインストール

# yarn
yarn install
yarn install --frozen-lockfile

# pnpm
pnpm install
pnpm install --frozen-lockfile

依存関係管理

依存関係の追加

  • 本番用の依存関係を追加します。

    # npm
npm install react
npm install react@18.2.0    # バージョン指定

# yarn
yarn add react

# pnpm
pnpm add react

開発依存関係の追加

  • 開発環境のみで使う依存関係を追加します。

    # npm
npm install -D typescript

# yarn
yarn add -D typescript

# pnpm
pnpm add -D typescript

パッケージの削除

  • インストール済みのパッケージを削除します。

    # npm
npm uninstall react

# yarn
yarn remove react

# pnpm
pnpm remove react

パッケージの更新

  • パッケージを最新バージョンに更新します。

    # npm
npm update
npm update react

# yarn
yarn upgrade
yarn upgrade react

# pnpm
pnpm update
pnpm update react

グローバルインストール

  • システム全体で使えるようにインストールします。

    # npm
npm install -g typescript

# yarn
yarn global add typescript

# pnpm
pnpm add -g typescript

一覧 & 古いパッケージ

  • インストール済みパッケージの確認コマンドです。

    # インストール済みパッケージ一覧
npm list             # npm
yarn list            # yarn
pnpm list            # pnpm

# 古いパッケージの確認
npm outdated         # npm
yarn outdated        # yarn
pnpm outdated        # pnpm

スクリプト実行

スクリプト実行

  • package.jsonのscriptsに定義されたコマンドを実行します。

    # npm (run は省略可能なものもある)
npm run dev
npm run build
npm start            # "start" は run 不要
npm test             # "test" は run 不要

# yarn
yarn dev
yarn build

# pnpm
pnpm dev
pnpm build

npx / dlx

  • パッケージをインストールせずに一時的に実行します。

    # npm (npx)
npx create-next-app@latest my-app
npx tsx script.ts

# yarn (dlx)
yarn dlx create-next-app@latest my-app

# pnpm (dlx)
pnpm dlx create-next-app@latest my-app

よく使うスクリプト

  • package.jsonでよく定義されるスクリプトです。

    {
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint .",
    "format": "prettier --write .",
    "test": "vitest",
    "typecheck": "tsc --noEmit"
  }
}

バージョン管理

バージョン範囲

  • セマンティックバージョニングの範囲指定です。

    1.2.3      → 完全一致
^1.2.3     → >=1.2.3 <2.0.0 (minor/patch更新OK)
~1.2.3     → >=1.2.3 <1.3.0 (patch更新のみOK)
>=1.2.3    → 1.2.3以上
*          → 任意のバージョン
1.x        → 1.0.0以上2.0.0未満

# Semantic Versioning
MAJOR.MINOR.PATCH
1.     2.    3
│      │     └─ バグ修正（後方互換）
│      └─── 機能追加（後方互換）
└────── 破壊的変更

ロックファイル

  • 各パッケージマネージャのロックファイルです。

    npm   → package-lock.json
yarn  → yarn.lock
pnpm  → pnpm-lock.yaml

※ ロックファイルはGitにコミットすること
※ 手動で編集しないこと

ワークスペース

ワークスペース設定

  • モノレポでのワークスペース設定です。

    // package.json (npm / yarn)
{
  "workspaces": [
    "packages/*",
    "apps/*"
  ]
}

// pnpm-workspace.yaml (pnpm)
// packages:
//   - 'packages/*'
//   - 'apps/*'