🎯 この記事について

React / Next.js 15 を中心に、実際の開発でよく使うコマンドをまとめたチートシートです。
Drizzle ORM・Better Auth・Vitest など周辺ツールのコマンドも一部含んでいます。
自分用の備忘録として書き始めましたが、同じ技術スタックで開発している方の参考になれば幸いです。

✅ npm と npx の違い

npm （Node Package Manager）：パッケージのインストール・管理
npx （Node Package Execute）：パッケージの実行

✅ VS Code で TS言語サーバーのキャッシュ崩れ

無駄なエラーが出ているTSファイルを選択した状態で、
VSCode のコマンドパレット（Ctrl+Shift+P）で実行する

TypeScript: Restart TS Server

✅ Next.js でデバッグ実行

npm run dev

✅ Next.js でビルドと実行

npm run build
npm run start

✅ 実行環境

ポート3000が固まった場合の開放

# ポート3000を使っているプロセスを確認
lsof -i :3000
# PIDを確認してkill
kill -9 <PID>
# 一発で済ませる場合
kill -9 $(lsof -t -i :3000)

プロセスの確認・強制終了（汎用）

# プロセス名で検索
ps aux | grep node
# PIDを指定してkill
kill -9 <PID>
# プロセス名で一括kill
pkill -f "next-server"

✅ コードの確認

TypeScript型エラー

npm run build

または

npx tsc --noEmit

ESLintエラー

npm run lint

全部まとめて確認(テストも実行)

npm run lint && npx tsc --noEmit && npm run test

✅ テスト

vitest テスト実行

npm run test

vitest テスト実行（結果をブラウザで表示）

npm run test:ui

vitest カバレッジのグラフのみ作成

npx vitest run --coverage
## /coverage/index.html が作成される

playwright テスト実行

# 全テスト実行
npm run test:e2e

# レポートをブラウザで表示
npx playwright show-report

# 特定のファイルだけ実行
npm run test:e2e tests/e2e/order.spec.ts

# ブラウザを表示しながら実行（デバッグ時）
npm run test:e2e --headed tests/e2e/order.spec.ts

✅ ライブラリの脆弱性チェック

npm audit fix

✅ React / Next.js のマイナーバージョンアップ

更新コマンド

npm install next@latest react@latest react-dom@latest eslint-config-next@latest

クリーンインストール

# キャッシュと依存関係を一度削除して再構築
rm -rf .next node_modules package-lock.json
npm install

バージョン確認

npm list next
# 全パッケージのバージョン確認
npm list --depth=0
# アップデート可能なパッケージ一覧
npm outdated

✅ Vite Reactで新しいプロジェクト

cd ｛プロジェクトの親ディレクトリ｝
npm create vite@latest ｛プロジェクト名｝ -- --template react-ts
cd ｛プロジェクト名｝
npm install
npm run dev

✅ Next.jsで新しいプロジェクト

cd ｛プロジェクトの親ディレクトリ｝
npx create-next-app@latest ｛プロジェクト名｝ --yes
cd ｛プロジェクト名｝
npm run dev

✅ Tailwind CSSのインストール

npm install -D tailwindcss @tailwindcss/postcss postcss autoprefixer

src/index.css

@import "tailwindcss";
@theme {
  /* アプリ専用の変数 */
}

postcss.config.js

export default {
plugins: {
  "@tailwindcss/postcss": {},
  "autoprefixer": {},
},
}

✅ Better Authのインストール

インストール

npm install better-auth

/lib/auth.tsの作成

import { betterAuth } from "better-auth";
export const auth = betterAuth({
  //...
});

CLIでスキーマ生成

npx better-auth generate
npx drizzle-kit push

✅ Drizzle のインストール

npm i drizzle-orm
npm i -D drizzle-kit
npm i @neondatabase/serverless
npm i dotenv
npx drizzle-kit generate

✅ Drizzle のスキーマ変更の反映

npx drizzle-kit generate
npx drizzle-kit push

Drizzle Studio（ブラウザでDB確認）

npx drizzle-kit studio

✅ shadcn/ui のインストール

インストール

npx shadcn@latest init

コンポーネントの追加

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add checkbox
npx shadcn@latest add input
npx shadcn@latest add label

npx 経由での shadcn コンポーネント一括追加（地味に便利）

npx shadcn@latest add button card input label

✅ Git 操作

基本操作

# 変更をステージングして
git add .
# コミット
git commit -m "コミットメッセージ"
# プッシュ
git push origin main

ブランチ操作

# ブランチ一覧
git branch
# ブランチ作成と切り替え
git checkout -b ｛ブランチ名｝
# ブランチ切り替え
git checkout ｛ブランチ名｝
# ブランチ削除
git branch -d ｛ブランチ名｝

変更の取り消し

# 直前のコミットを取り消す（変更は残す）
git reset --soft HEAD~1
# 特定ファイルの変更を取り消す
git checkout -- ｛ファイルパス｝
# ステージングを取り消す
git restore --staged ｛ファイルパス｝

✅ npm パッケージ管理

# パッケージのインストール
npm install ｛パッケージ名｝
# 開発依存としてインストール
npm install -D ｛パッケージ名｝
# パッケージのアンインストール
npm uninstall ｛パッケージ名｝

# package-lock.jsonに基づいて厳密なバージョンで全パッケージを再インストール
npm ci

package.jsonとpackage-lock.json

項目	package.json	package-lock.json
役割	必要なパッケージの範囲を指定	インストールされた実態を記録
人間が編集	する（名前やスクリプト変更など）	基本的にしない（npmが自動更新する）
Git管理	含める	含める（超重要！）
コマンド	npm install で参照される	npm ci で厳密に参照される

✅ 環境変数

.envファイルの確認

# .envの内容を確認（値をマスクしない場合）
cat .env
# 現在のシェルで有効な環境変数を確認
printenv | grep DATABASE

✅ ログ・デバッグ

# Next.jsのビルドログを詳細表示
next build --debug
# プロセスのログをリアルタイム確認
tail -f ｛ログファイルパス｝
# ディスク使用量の確認（node_modulesが肥大化したとき）
du -sh node_modules
du -sh .next

🚀 最後に

これからも開発で「これ何だっけ？」となったコマンドを追記していく予定です。