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/*'

引用・参考リンク

Related Cheatsheets

Related Goods

  • ケーブルに取り付け可能なTypeCとLightningの変換アダプタです。 スタイリッシュなデザインで、Apple製品との相性抜群です。
    ケーブルに取り付け可能なTypeCとLightningの変換アダプタです。 スタイリッシュなデザインで、Apple製品との相性抜群です。
    詳細をみる
  • お気に入りのサウンドデバイスをすぐ取り出せる位置にディスプレイさせておくことができます。
    お気に入りのサウンドデバイスをすぐ取り出せる位置にディスプレイさせておくことができます。
    詳細をみる

WebTerm - Recommended tools

WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。

WebTerm Logo

WebTerm

Browser Terminal Sandbox for Learning CLI

開く

All Cheatsheets

エンジニア・プログラマー向けの便利なチートシートを多数まとめています(SP/Tablet/PC対応)
すべてのチートシートを見る