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

高速な開発体験を実現するViteと、UI構築に最適なReactを使って、開発の第一歩を踏み出しましょう！
このガイドでは、Macのターミナルを使って、React + Vite の開発環境を1から構築する手順を丁寧に解説します。

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

【1-1】ターミナルを起動

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

【1-2】デスクトップにプロジェクト用フォルダを作成

ターミナル

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

ここまでで、my-app/ という作業フォルダができました。

【2】ViteでReactプロジェクトを作成

【2-1】Viteを使ってReactプロジェクト生成

ターミナル

npm create vite@latest

• 対話形式でインストールを進める
  • プロジェクト名を入力（例：front）
  • フレームワークを選択：「React」
  • バリアントを選択：「JavaScript」または「TypeScript」

ターミナル

npm create vite@latest

>>>>
(好みに合わせて選択)
✔ Project name: …             （例）front
✔ Select a framework: ›     （例）React
✔ Select a variant: ›            （例）JavaScript 

↓↓↓↓↓↓↓

ディレクトリ構成

my-app/
└── front/                                 # Vite + React プロジェクト
    ├── public/                            # 静的ファイル（faviconなど）
    │   └── vite.svg
    │
    ├── src/                                 # ソースコード（コンポーネントなど）
    │   ├── assets/                     # 画像・スタイルなどのアセット
    │   │   └── react.svg
    │   ├── App.css                     # アプリ全体のスタイル
    │   ├── App.jsx                      # メインコンポーネント
    │   ├── main.jsx                     # エントリーポイント
    │   └── index.css                   # ベーススタイル
    │
    ├── .gitignore
    ├── index.html                        # エントリーHTML（publicではなくルートにある）
    ├── package.json                   # プロジェクト依存管理ファイル
    ├── package-lock.json           
    ├── README.md
    └── vite.config.js                   # Vite設定ファイル

【3】依存パッケージをインストール

プロジェクトフォルダに移動し、必要なパッケージをインストール。

ターミナル

cd front

npm install

ディレクトリ構成

my-app/
└── front/
    ├── node_modules/ ←⭐️ 新しく追加される！
    │   ├── react/
    │   ├── react-dom/
    │   ├── vite/
    │   └── ...（その他の依存パッケージ多数）
    ├── public/
    │   └── vite.svg
    ├── src/
    │   ├── assets/
    │   │   └── react.svg
    │   ├── App.css
    │   ├── App.jsx
    │   ├── index.css
    │   └── main.jsx
    ├── .gitignore
    ├── index.html
    ├── package.json
    ├── package-lock.json ←⭐️ 自動生成 or 更新される
    ├── vite.config.js
    └── README.md

【4】Vite開発サーバーの起動

【4-1】VSCodeでプロジェクトを起動

ルートプロジェクトに戻って

ターミナル

# my-appに戻る
cd ..

# VsCodeを開く
code .

【4-2】開発サーバーを起動

ターミナル

npm run dev

>>>

➜  Local: http://localhost:5173/

【4-3】ローカルサーバーで確認

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

よくある初期カスタマイズ

ディレクトリ構成

my-app/
└── front/
    ├── 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

まとめ

補足：package-lock.json って何？

• インストールされたすべての依存ライブラリの正確なバージョン情報が保存されます。
• チーム開発や再現性を保つために重要なファイルです。
• Gitでは管理対象にしてOK！

この流れを理解することで、今後のReact開発の基盤がしっかり整います！
次のステップとしては、ルーティングの追加などに進むと良いですよ。