🎯 この記事について
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
🚀 最後に
これからも開発で「これ何だっけ？」となったコマンドを追記していく予定です。