🕌

⚡ React開発者のためのCLI＆ターミナル活用術まとめ

に公開
Git
GitHub
Next.js
React
tech

ReactやNext.jsで開発していると、毎回ポートを閉じたり、ターミナルを再起動したりするのが面倒に感じることがありますよね。
この記事では、CLI（コマンドライン）で知っておくと超便利な小技・ショートカット集をまとめました！

🧩 1️⃣ 基本のターミナル操作

ショートカット 機能 説明
Ctrl + C 実行中のプロセス停止 React開発サーバーなどを終了する定番操作
Ctrl + L 画面クリア clearと同じ効果で、コンソールを整理
Ctrl + A / E 行の先頭・末尾へ移動 長いコマンドを編集する時に便利
↑ / ↓ 履歴のコマンドを呼び出し 直前に実行したコマンドを再利用
Tab 自動補完 ファイル名・フォルダ名を補完してくれる

💡 Tip:
コマンド入力中に間違えたら Ctrl + U で行全体を削除できます。

⚙️ 2️⃣ React / Next.js開発で便利なコマンド

コマンド 説明
npm run dev 開発サーバーを起動
npm run build 本番用にビルド
npm run start ビルド後のアプリを起動
npm run lint ESLintでコードチェック
npm run format Prettierでコード整形

💡 Tip:
package.jsonに独自スクリプトを追加しておくと、ワンコマンドで色々できます 👇

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "clean": "rm -rf .next node_modules && npm install"
}

これで npm run clean と打つだけでキャッシュと依存関係を一括クリア 💨

🧠 3️⃣ ポート・プロセス関連の便利技

Reactアプリを終了し忘れて、Port 3000 already in use と出ることありませんか？

コマンド 説明
lsof -i :3000 3000番ポートを使用しているプロセス確認
`lsof -ti :3000 xargs kill -9`
`ps aux grep node`
killall node Node.jsプロセスを全部終了

💡 Tip:
zshなどの設定ファイル(~/.zshrc)に以下を登録👇

alias kill3000='lsof -ti :3000 | xargs kill -9'

これで次回からは kill3000 と打つだけでOK！🔥

🌈 4️⃣ VS Code / Cursor での便利ショートカット

ショートカット 機能
Ctrl + ` ターミナル表示/非表示
Ctrl + / コメント切り替え
Alt + ↑ / ↓ 行を上下に移動
Shift + Alt + ↓ 行をコピー
Ctrl + K + F 選択範囲の自動整形

💡 Tip:
VSCodeのターミナルは「Split Terminal」で複数のサーバーを同時起動することも可能です。

⚡ 5️⃣ Gitと連携する小技

コマンド 説明
git status 変更内容を確認
git diff コードの差分を確認
git add . && git commit -m "msg" && git push 一発コミット＋プッシュ
git log --oneline コンパクトな履歴表示
git commit --allow-empty -m "trigger vercel deploy" 空コミットでVercel再デプロイをトリガー

🪄 6️⃣ 開発効率を上げる実用コンボ

コマンド 内容
Ctrl + C 実行中サーバー停止（最も安全）
npm run dev -- --port 4000 別ポートで起動（衝突回避）
Ctrl + L ターミナルを即クリア
npm run clean && npm run dev キャッシュを消して再起動

✅ まとめ

カテゴリ コマンド/ショートカット 説明
サーバー停止 Ctrl + C 現在のプロセスを安全に終了
ポート解放 `lsof -ti :3000 xargs kill -9`
ターミナル整理 Ctrl + L 画面をきれいにリセット
Git操作 git add . && git commit -m "msg" && git push ワンライナーでコミット
キャッシュ削除 npm run clean 不要なビルドデータ削除

🎯 おまけ：習慣化すると開発が速くなる３つのコツ

  1. 毎回起動前にポートを確認 → lsof -i :3000
  2. キャッシュ関連の問題は即リセット → npm run clean
  3. 無駄な手動操作はalias化 → 頻出コマンドを短縮登録

💬 この記事が役に立ったら、Zennで「いいね」＆フォローをお願いします！
続編では「Next.jsでの環境変数の安全管理術」も公開予定です 🔐

Discussion