React-Viteでプロジェクト作成【環境構築】

React-Viteプロジェクトのセットアップについて、初心者向けに手順を解説します。

1.ターミナルからプロジェクトを作成

1-1.ターミナルを開いて、プロジェクト用フォルダを作成

Finderの「アプリケーション」→「ユーティリティ」→「ターミナル」で開けます。

デスクトップにプロジェクト用のフォルダを作成します（例：my-app）。

ターミナル

cd ~/Desktop
mkdir my-app
cd my-app

1-2.ViteでReactプロジェクトを作成

次のコマンドでViteを使ってReactプロジェクトを作成します。

ターミナル

npm create vite@latest

npm create vite@latest
>>>>
(好みに合わせて選択)
✔ Project name: … （例）react-app
✔ Select a framework: › （例）React
✔ Select a variant: › （例）JavaScript 

• プロジェクト名を入力（例：react-app）
• フレームワークを選択：「React」
• バリアントを選択：「JavaScript」または「TypeScript」

1-3.必要なパッケージのインストール

cd my-react-app
npm install

2.VSCodeでプロジェクトを開く

2-1-A.ターミナルからVSCodeを開くバージョン

ターミナルで次のコマンドを実行して、プロジェクトフォルダをVSCodeで開きます

code .

（codeコマンドが使えない場合は、VSCodeの設定で「PATHにcodeコマンドをインストール」を有効にしてください）

• プロジェクトの構造を確認する
  VSCodeでプロジェクトフォルダを確認します。
  index.htmlがルートにあり、srcフォルダ内にmain.jsxなどのファイルがあることを確認します。

2-1-B.FinderからVSCodeを開くバージョン

• Finderでフォルダを開く
  デスクトップのmy-react-appフォルダをFinderで開きます。
• 右クリックからVSCodeで開く
  フォルダを右クリックし、「VSCodeで開く」または「Open with Code」を選択します。

3.Vite開発サーバーの起動

VSCodeのターミナルでVite開発サーバーを起動

VSCodeで「ターミナル」→「新しいターミナル」を選択し、
以下のコマンドを実行してVite開発サーバーを起動します

npm run dev

ローカルサーバーで確認

コマンドが完了すると、ローカル開発サーバー（通常はhttp://localhost:5173）が表示されます。
ブラウザでアクセスして動作を確認できます。

Viteディレクトリ構成

my-app/
└── react-app/
    ├── node_modules/
    ├── public/
    │   └── favicon.svg  （削除予定）
    ├── src/
    │   ├── assets/
    │   ├── App.css      （削除予定）
    │   ├── App.jsx
    │   ├── index.css
    │   └── main.jsx
    ├── .gitignore
    ├── index.html
    ├── package.json
    ├── README.md
    ├── vite.config.js
    └── yarn.lock または package-lock.json