3.1 開発環境 — Vite + React + TypeScript

ここで掴んでほしいのは、「React アプリは 1 枚の HTML ファイルではなく、複数のファイルから成る プロジェクト である」という一点です。Part 2 までは 1 枚の HTML に <script> を書いて動かしていましたが、Part 3 からは Node.js 上のビルドツール (Vite) が JSX と TypeScript をまとめて変換し、ブラウザが読める形のコードを出力してくれます。

最初は環境構築の話が続くので地味に感じるかもしれませんが、ここを一度組んでしまえば、以降の章はこの上で動かせます。

なぜ「開発環境」が必要なのか

ブラウザは素の JavaScript しか理解しません。一方、このサイトで扱う React のコード (JSX + TypeScript) は、そのままではブラウザに渡せません。両者の間を埋める仕事をするのが ビルドツール です。

• JSX (<div>...</div> のような記法) → JavaScript の関数呼び出しに変換
• TypeScript (.ts / .tsx) → 型チェックの後、JavaScript に変換
• 複数ファイル (import / export) → ブラウザが読めるように束ねる

開発中は「ファイルを保存するたびにブラウザが自動で更新される」体験が欲しくなります。これを提供してくれるのが 開発サーバー です。本サイトではこの役割を Vite に任せます。

図 3.1.1 ブラウザが読めないものを、誰が翻訳してブラウザに届けるか

Node.js のインストール

Vite は Node.js 上で動きます。Vite 公式ドキュメントによれば動作要件は次の通りです。

Vite requires Node.js version 20.19+, 22.12+.

出典: vite.dev/guide

Node.js の LTS (Long Term Support) 版を nodejs.org からダウンロードしてインストールしてください。複数の Node.js バージョンを切り替えて使う予定がある場合は、Volta や fnm のようなバージョンマネージャを検討するとよいでしょう。

インストールできたら確認します。

node -v
# v22.12.0 のようにバージョンが表示されれば OK

npm -v
# 10.x のようにバージョンが表示されれば OK

npm は Node.js に同梱されている パッケージマネージャ です。プロジェクトに必要なライブラリ (React など) をインストールし、管理するためのツールです。

プロジェクトの作成

Vite + React + TypeScript のテンプレートでプロジェクトを作成します。

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

コマンドの意味を分解します。

• npm create vite@latest — create-vite というスキャフォルダ (雛形作成ツール) を、一時的にダウンロードして実行します。@latest は「最新版を使う」の意味です。
• my-app — 作成されるディレクトリ名です。好きな名前に変えて構いません。
• -- — これ以降の引数を、create-vite にそのまま渡す印です。npm が横取りしないための区切りです。
• --template react-ts — 「React + TypeScript のテンプレートを使う」の指定です。

実行すると my-app ディレクトリが作られます。中に入って依存をインストールし、開発サーバーを起動します。

cd my-app
npm install
npm run dev

npm install は package.json に書かれた依存 (React 本体、Vite など) をダウンロードし、node_modules ディレクトリに配置します。npm run dev は Vite の開発サーバーを起動します。ターミナルに表示される URL (通常は http://localhost:5173) をブラウザで開くと、初期画面が表示されます。

プロジェクト構造

作成直後のディレクトリ構成は次のようになります (抜粋)。

my-app/
├── index.html            # エントリーとなる HTML (Vite はこれをモジュールグラフの起点とする)
├── package.json          # 依存とスクリプトの定義
├── tsconfig.json         # TypeScript の設定
├── vite.config.ts        # Vite の設定
├── public/               # そのまま配信される静的ファイル
└── src/
    ├── main.tsx          # JS の起点。React を DOM に接続する
    ├── App.tsx           # 最初に表示されるコンポーネント
    └── ...

図 3.1.2 ソースからブラウザに届くまで

エントリーポイントを読む

index.html には次のような記述があります。

<!-- index.html -->
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>

<div id="root"></div> が React アプリの挿入先です。main.tsx がそこに React のツリーを接続します。

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

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

createRoot が #root 要素を「React が管理する領域」に変え、そこに <App /> をレンダーします。ここから先は React の世界です。

StrictMode は開発時にコンポーネントを二重に呼び出すなどして、実装上の間違いを早めに見つけてくれる補助モードです。本番ビルドには影響しません。

TypeScript の最小限

本サイトのコード例は原則 TypeScript (.tsx / .ts) で書きます。React で最初に出会う TypeScript の要素は、次の 2 つだけです。

型注釈 (type annotation)

変数や関数のパラメータに : 型名 を書きます。

const count: number = 0
const name: string = 'React'

function add(a: number, b: number): number {
  return a + b
}

interface / type (型の定義)

props の型など、オブジェクトの形を定義します。

interface User {
  id: number
  name: string
}

// type でも同じことができる
type User2 = {
  id: number
  name: string
}

interface と type の使い分けは、案件のコーディング規約に従えば十分です。本サイトでは type を主に使います。

TypeScript の公式ハンドブックは「TypeScript は JavaScript の静的型チェッカー」と位置づけています。

The goal of TypeScript is to be a static typechecker for JavaScript programs - in other words, a tool that runs before your code runs (static) and ensures that the types of the program are correct (typechecked).

出典: TypeScript Handbook — The TypeScript Handbook

つまり、実行前にミスを検出してくれる補助ツールですね。React との組み合わせでは、props の型、state の型、イベントハンドラの引数の型などを書くことで、コンポーネントの契約がコードにそのまま表現されます。

react.dev の推奨との関係

React の公式サイトは、プロジェクト作成時にフレームワーク (Next.js や React Router v7) を使うことを推奨しています。

If you want to build a new app or website with React, we recommend starting with a framework.

出典: react.dev — Start a New React Project

ただし本サイトの Part 3 では、「React の核となる概念」に集中したいので、ルーティングやサーバーサイドの仕組みを含まない Vite を選択します。Next.js などのフレームワークは Part 5 で扱います。

さらに深く学ぶには

• Vite — Getting Started — Vite の公式ガイド。ビルド設定、プラグイン等の詳細。
• react.dev — Start a New React Project — フレームワークを使ったプロジェクト作成の推奨。
• TypeScript Handbook — TypeScript の入門。React と組み合わせる型の詳細は react.dev — Using TypeScript を参照。

参照ソース

• Vite Guide — Getting Started (Node version requirements)
• Vite Guide — Scaffolding Your First Vite Project
• react.dev — Start a New React Project
• TypeScript Handbook — The TypeScript Handbook