Reactの開発サーバーが起動しない｜port番号の競合解決

みなさん、Reactで開発していてこんなエラーに遭遇したことはありませんか？

「Error: listen EADDRINUSE :::3000」
「ポート3000が既に使用されています」
「開発サーバーが起動できない」

プログラミングを始めたばかりの方にとって、このエラーはなかなか厄介ですよね。でも大丈夫です！

この記事では、React開発サーバーのport番号競合エラーを確実に解決する方法をお教えします。基本的な対処法から、今後同じ問題が起きないようにする予防策まで、わかりやすく解説していきますね。

port番号競合エラーって何？

まずは、このエラーがなぜ起こるのかを理解しましょう。難しく感じるかもしれませんが、実はとてもシンプルな仕組みなんです。

よく見るエラーメッセージ

React開発サーバーでこんなメッセージが表示されたことはありませんか？

Error: listen EADDRINUSE :::3000
    at Server.setupListenHandle [as _listen2] (net.js:1360:14)
    at listenInCluster (net.js:1401:12)

または、こんな親切なメッセージが出ることもあります。

Something is already running on port 3000.
Would you like to run the app on another port instead? (Y/n)

これらのメッセージは、**「ポート3000がすでに使われていますよ」**ということを教えてくれています。

なぜ競合が起こるの？

port番号競合が起こる主な原因はこちらです。

前回の開発サーバーが完全に終了していない
他のアプリケーションがポート3000を使用している
バックグラウンドでプロセスが動き続けている
システムの他のサービスとの競合

簡単に言うと、ポート3000という「扉」を他の誰かが使っているため、新しくサーバーを立ち上げられないという状況なんです。

ポート3000って何？

Reactの開発サーバーは、デフォルトでポート3000を使います。

{
  "scripts": {
    "start": "react-scripts start"
  }
}

ポート番号は、インターネット上での「住所の番地」のような役割をしています。多くのWebアプリケーションがポート3000を使うため、競合が発生しやすいんです。

今すぐできる！即効解決法

困った時にすぐ使える解決方法を3つご紹介します。どれも簡単なので、安心してくださいね。

方法1: プロセスを強制終了する

これが最も確実で効果的な方法です。

macOSやLinuxの場合

まず、どのプロセスがポート3000を使っているか確認しましょう。

lsof -i :3000

すると、こんな結果が表示されます。

COMMAND   PID USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
node    12345 user   21u  IPv6 0x1234567890abcdef      0t0  TCP *:3000 (LISTEN)

PID（プロセスID）が「12345」ということがわかりますね。このプロセスを終了させます。

kill -9 12345

もっと簡単にやりたい場合は、一発で終了できます。

lsof -ti :3000 | xargs kill -9

Windowsの場合

Windowsでも同じような手順で確認できます。

netstat -ano | findstr :3000

こんな結果が表示されます。

TCP    0.0.0.0:3000           0.0.0.0:0              LISTENING       12345

プロセスIDが「12345」なので、これを終了させます。

taskkill /PID 12345 /F

方法2: 別のポートで起動する

ポート番号を変更して起動する方法です。これも覚えておくと便利ですよ。

PORT=3001 npm start

または、別の番号でも大丈夫です。

PORT=4000 npm start

Windowsを使っている方は、こちらの方法を試してください。

# PowerShellの場合
$env:PORT=3001; npm start

# コマンドプロンプトの場合
set PORT=3001 && npm start

これで、ポート3001でReactアプリが起動します。ブラウザで http://localhost:3001 にアクセスできるようになります。

方法3: 対話式で別ポートを選ぶ

Create React Appを使っている場合、自動的に代替ポートを提案してくれます。

npm start

を実行すると、こんなメッセージが表示されることがあります。

Something is already running on port 3000.

Would you like to run the app on another port instead? (Y/n)

ここで「y」を入力すると、利用可能なポート（3001など）で自動的に起動してくれます。とても親切な機能ですね！

根本的に解決する方法

一時的な対処ではなく、今後同じ問題が起きないようにする方法をご紹介します。

.envファイルで設定を固定する

プロジェクトルートに .env ファイルを作りましょう。

まず、ファイルを作成します。

# macOS/Linux
touch .env

# Windows
echo. > .env

そして、ファイルに以下の内容を書きます。

PORT=3001
BROWSER=none
FAST_REFRESH=true

これで、いつでもポート3001でサーバーが起動するようになります。

環境変数について詳しく知りたい方へ

.envファイルには、他にも便利な設定が書けます。

# ポート番号を指定
PORT=3001

# 自動ブラウザ起動を無効化
BROWSER=none

# Fast Refreshを有効化（React 17以降）
FAST_REFRESH=true

# 他のデバイスからのアクセスを許可
HOST=0.0.0.0

# HTTPSを有効化（必要に応じて）
HTTPS=false

それぞれの設定について説明しますね。

PORT: 使用するポート番号
BROWSER: 自動でブラウザが開くのを防ぐ
FAST_REFRESH: コード変更時の自動更新を有効化
HOST: 他のデバイスからもアクセス可能にする

package.jsonでスクリプトをカスタマイズ

package.jsonのスクリプト部分で、ポートを指定することもできます。

{
  "scripts": {
    "start": "PORT=3001 react-scripts start",
    "start:3002": "PORT=3002 react-scripts start",
    "start:dev": "PORT=8080 react-scripts start"
  }
}

こうすると、用途に応じて使い分けができて便利です。

Windowsの方は、少し書き方が違います。

{
  "scripts": {
    "start": "set PORT=3001 && react-scripts start"
  }
}

cross-envでOSの違いを吸収

WindowsとmacOS/Linuxの両方で動かしたい場合は、cross-envというパッケージを使いましょう。

npm install --save-dev cross-env

そして、package.jsonをこのように書きます。

{
  "scripts": {
    "start": "cross-env PORT=3001 react-scripts start",
    "start:dev": "cross-env PORT=8080 BROWSER=chrome react-scripts start"
  }
}

これで、どのOSでも同じように動作します。

複数プロジェクトを同時に開発する場合

複数のReactプロジェクトを同時に動かしたい場合の管理方法をお教えします。

ポート番号を体系的に管理

プロジェクトごとにポート番号を決めておくと、混乱しません。

project-a/     # PORT=3001
project-b/     # PORT=3002  
project-c/     # PORT=3003
api-server/    # PORT=4000
database/      # PORT=5432

このように、ルールを決めて管理すると迷わなくなります。

一括起動スクリプトを作ろう

複数のプロジェクトを一度に起動するスクリプトを作ると便利です。

macOS/Linux用（start-all.sh）

#!/bin/bash

echo "全ての開発サーバーを起動します..."

# プロジェクトAを起動
cd /path/to/project-a
PORT=3001 npm start &

# プロジェクトBを起動  
cd /path/to/project-b
PORT=3002 npm start &

# APIサーバーを起動
cd /path/to/api-server
PORT=4000 npm start &

echo "起動完了！"
echo "プロジェクトA: http://localhost:3001"
echo "プロジェクトB: http://localhost:3002"
echo "APIサーバー: http://localhost:4000"

このスクリプトを実行すると、全部のサーバーが一度に起動します。とても便利ですよね！

よくあるトラブルと対処法

他にも起こりがちな問題と解決方法をご紹介します。

ファイアウォールの問題

セキュリティソフトがブロックしている場合があります。

macOSの場合

# ファイアウォール設定を確認
sudo /usr/libexec/ApplicationFirewall/socketfilterfw --getglobalstate

もしブロックされている場合は、一時的に無効化できます。ただし、セキュリティリスクがあるので注意してくださいね。

Windowsの場合

# ファイアウォールを確認
netsh advfirewall show allprofiles

# 特定のポートを許可
netsh advfirewall firewall add rule name="React Dev Server" dir=in action=allow protocol=TCP localport=3000

Node.jsのバージョンが古い場合

Node.jsのバージョンが古いと、うまく動かないことがあります。

# 現在のバージョンを確認
node --version
npm --version

# 最新のLTSバージョンに更新
nvm install --lts
nvm use --lts

nvmがない場合は、公式サイトからダウンロードして更新してください。

キャッシュの問題

古いキャッシュが残っていると問題が起こることがあります。

# npmキャッシュをクリア
npm cache clean --force

# node_modulesを削除して再インストール
rm -rf node_modules package-lock.json
npm install

Windowsの場合は、こちらです。

rmdir /s node_modules
del package-lock.json
npm install

これで、クリーンな状態から再スタートできます。

今後困らないための予防策

同じ問題が起きないようにするためのコツをお教えします。

開発チームでルールを統一

チームで開発している場合は、設定を統一しましょう。

# .env.example ファイルを作成
PORT=3001
BROWSER=none
FAST_REFRESH=true

README.mdにも書いておくと親切です。

## 開発環境のセットアップ
1. `.env.example`を`.env`にコピー
2. `npm install`を実行
3. `npm start`でサーバー起動

サーバーを正しく終了する習慣

開発サーバーは、必ずCtrl+Cで正しく終了させましょう。ターミナルをそのまま閉じてしまうと、プロセスが残ってしまうことがあります。

便利なエイリアスを設定

よく使うコマンドは、エイリアスに登録しておくと便利です。

# ~/.bashrc または ~/.zshrc に追加
alias killport='function _killport(){ lsof -ti :$1 | xargs kill -9; }; _killport'

# 使用例
killport 3000

これで、killport 3000と入力するだけで、ポート3000のプロセスを終了できます。

自動化スクリプトを作る

毎回同じ手順を繰り返すのは面倒ですよね。自動化スクリプトを作ってしまいましょう。

#!/bin/bash

PROJECT_PORT=3001

echo "開発環境をセットアップします..."

# ポートが使用中かチェック
if lsof -i :$PROJECT_PORT > /dev/null; then
    echo "ポート$PROJECT_PORTが使用中です。プロセスを終了します..."
    lsof -ti :$PROJECT_PORT | xargs kill -9
fi

# 環境変数を設定して起動
echo "ポート$PROJECT_PORTで開発サーバーを起動します..."
PORT=$PROJECT_PORT npm start

このスクリプトがあれば、実行するだけで全部やってくれます。

まとめ：もうport競合で悩まない！

React開発サーバーのport番号競合問題について詳しく解説しました。

今すぐできる解決法

プロセス強制終了 - 最も確実で即効性あり
別ポートで起動 - PORTを指定して回避
対話式選択 - Create React Appの自動提案を活用

根本的な解決方法

.envファイル - プロジェクト固有の設定で管理
package.json - スクリプトでポート指定
cross-env - クロスプラットフォーム対応

予防策

チーム内でのルール統一
正しいサーバー終了の習慣
便利なエイリアスと自動化スクリプト

緊急時に覚えておきたいコマンド

# macOS/Linux - プロセス強制終了
lsof -ti :3000 | xargs kill -9

# Windows - プロセス強制終了  
taskkill /f /im node.exe

# 別ポートで起動
PORT=3001 npm start

port競合は、React開発でよくある問題です。でも、適切な対処法を知っていれば全然怖くありません。

これらの方法を覚えて、快適な開発環境を作ってくださいね！きっと、もっとReact開発が楽しくなりますよ。

Reactの開発サーバーが起動しない｜port番号の競合解決

port番号競合エラーって何？

よく見るエラーメッセージ

なぜ競合が起こるの？

ポート3000って何？

今すぐできる！即効解決法

方法1: プロセスを強制終了する

方法2: 別のポートで起動する

方法3: 対話式で別ポートを選ぶ

根本的に解決する方法

.envファイルで設定を固定する

環境変数について詳しく知りたい方へ

package.jsonでスクリプトをカスタマイズ

cross-envでOSの違いを吸収

複数プロジェクトを同時に開発する場合

ポート番号を体系的に管理

一括起動スクリプトを作ろう

よくあるトラブルと対処法

ファイアウォールの問題

Node.jsのバージョンが古い場合

キャッシュの問題

今後困らないための予防策

開発チームでルールを統一

サーバーを正しく終了する習慣

便利なエイリアスを設定

自動化スクリプトを作る

まとめ：もうport競合で悩まない！

関連記事

Untitled

Untitled

Untitled