React + Vite でプロジェクト作成：セットアップから起動まで

はじめに

ReactプロジェクトはかつてCreate React App（CRA）で作るのが一般的でしたが、現在は Vite を使うのが主流です。Viteは開発サーバーの起動とHMR（ホットリロード）が高速で、TypeScriptもすぐに使えます。

この記事ではViteを使ってReact + TypeScriptのプロジェクトを作成し、開発サーバーを起動するまでの手順を解説します。

必要なもの

Node.js 18以上（node -v で確認）
npm 7以上（npm -v で確認）

Node.jsのバージョン確認・管理については「Node.jsのバージョン確認方法：nvm・mise・npm・yarn・pnpm一覧」を参照してください。

プロジェクトを作成する

npm create vite@latest my-app -- --template react-ts

my-app の部分は任意のプロジェクト名に変えてください。--template react-ts でReact + TypeScriptのテンプレートを選択しています。

JavaScriptのみで使いたい場合は --template react にします。

対話形式で選ぶ場合

npm create vite@latest

プロジェクト名 → フレームワーク（React）→ バリアント（TypeScript）の順に選択できます。

依存パッケージをインストールして起動する

cd my-app
npm install
npm run dev

  VITE v5.x.x  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

ブラウザで http://localhost:5173 を開くとReactのデフォルト画面が表示されます。

ディレクトリ構成

my-app/
├── public/          # 静的ファイル（favicon等）
├── src/
│   ├── assets/      # 画像などのアセット
│   ├── App.tsx      # メインコンポーネント
│   ├── App.css      # App用スタイル
│   ├── main.tsx     # エントリーポイント
│   ├── index.css    # グローバルスタイル
│   └── vite-env.d.ts
├── index.html       # Viteのエントリーポイント（HTML）
├── package.json
├── tsconfig.json
└── vite.config.ts

主要ファイルの役割

index.html

ViteではHTMLがエントリーポイントです。<script type="module" src="/src/main.tsx"> でTypeScriptを直接読み込みます。

src/main.tsx

ReactのルートコンポーネントをDOMにマウントします。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

src/App.tsx

最初に編集するメインコンポーネントです。ここからコンポーネントを追加・分割していきます。

コンポーネントを編集してみる

src/App.tsx を以下のように書き換えると、シンプルなカウンターが動きます。

import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>Hello React</h1>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

export default App

ファイルを保存すると自動的にブラウザが更新されます（HMR）。

よく使うコマンド

コマンド	説明
`npm run dev`	開発サーバーを起動（localhost:5173）
`npm run build`	本番用にビルド（`dist/` に出力）
`npm run preview`	ビルド結果をローカルでプレビュー

次のステップ

状態管理 - 「ReactのuseState入門」 - 「ReactのuseState・useRef・constの違い」 - 「ReactのuseContext入門」 - 「ReactのuseReducer入門」 - 「Redux Toolkit 入門」

データフェッチ - 「ReactのuseEffect入門」 - 「TanStack Query 入門」

ルーティング - 「React Router v6 入門」 - 「TanStack Router 入門」

高度なAPI - 「ReactのforwardRef：React 19で不要になった背景と移行方法」

デバッグ - 「React DevTools 入門：Components タブでpropsとstateを確認する」 - 「React DevTools Profiler：再レンダリングを特定してパフォーマンス改善」