Roa run dev

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!
ステップ内容
【1】作業ディレクトリ(my-app)の作成
【2】ViteでReactプロジェクト(front)を生成
【3】npm install で依存ライブラリをインストール
【4】VSCodeで開発、npm run dev で開発サーバー起動

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