🔰はじめての方へ

【React/Vite】WindowsからMacBookへ環境移行したときのセットアップ手順まとめ

node.js
記事内に広告が含まれています。
スポンサーリンク

Windows から MacBook に開発環境を移行した際に、React + TypeScript + Vite プロジェクトを動かすまでの手順をまとめました。

私自身、最初に npm start を打ってエラーになったり、rollup 関連のモジュールエラーに悩まされたので、同じように移行する方の参考になればと思います。


1. Homebrewのインストール確認

Mac ではパッケージ管理に Homebrew を使うと便利です。
すでに導入済みならバージョンを確認しましょう。

brew -v

Homebrew のインストールについては、他の記事に書いてあるのでご参照下さい👇


2. Node.js & npm のインストール

Vite プロジェクトには Node.js が必須です。
Homebrew を使って簡単にインストールできます。

brew install node

確認コマンド:

node -v
npm -v

これで Node.js と npm がグローバルに利用可能になります。
新しい React や Vue プロジェクトを作るときも、再インストールの必要はありません。


3. 既存プロジェクトをMacにコピー

GitHub などからプロジェクトをクローン、またはフォルダを移行します。


4. node_modules と package-lock.json を削除

Windows と Mac では依存関係(特にネイティブモジュール)が異なるため、そのままではエラーになります。

プロジェクトに移動して、削除するコマンドを打ちます。

cd ~/github/altered-make/altered.make
rm -rf node_modules package-lock.json

5. 依存関係を再インストール

npm install

これで Mac 環境に合ったライブラリがインストールされます。


6. 開発サーバーを起動

Vite プロジェクトは npm start ではなく、以下のコマンドです。

npm run dev

起動後、ターミナルに表示されるURL(通常 http://localhost:5173)にアクセスすると、サイトを確認できます。


7. 補足:Node.jsのバージョンについて

私の環境では Node.js v24 を使っていましたが、一部のライブラリは最新版に対応していないことがあります。
その場合は、安定版(LTS:v20 系) を使うのがおすすめです。

Node.js のバージョンを切り替えるなら、nvm を導入すると便利です。

brew install nvm
nvm install 20
nvm use 20

まとめ

  1. Homebrew で Node.js をインストール
  2. プロジェクトをコピー
  3. node_modules と package-lock.json を削除
  4. npm install で依存関係を再構築
  5. npm run dev で開発サーバーを起動

これで Windows から MacBook への移行後も、React + Vite で開発ができました!


このあと、VSCode / Cursor に拡張機能(ESLint / Prettier など)を追加すれば、快適に開発できます。