第2回：5分で完了！Viteを使った最速React開発環境の構築手順

前回は、Reactの基本概念と最小限のコード（前回の記事リンク想定）について学びました。Reactの本質は「データと見た目を連動させること」でしたね。

今回は、そのコードをあなたのPC上で実際に動かすための「本番さながらの環境」を作ります。2026年現在、現場で最も愛されているツール Vite（ヴィート） を使って、一瞬で開発をスタートしましょう！

1. なぜ「Vite」を使うのか？
2. 【準備】Node.jsをインストールしよう
3. 【実践】3つのコマンドで環境構築
4. サンプルコードを動かしてみよう
5. コードと仕組みの解説
1. JavaScriptのポイント
2. Reactのポイント
6. まとめ：開発の土台が整いました！
1. 次回予告：JSXの不思議なルールを攻略

1. なぜ「Vite」を使うのか？

以前は create-react-app というツールが主流でしたが、今は Vite の時代です。

爆速: 起動や修正の反映が、まばたきする間に終わります。
軽量: 余計なファイルが少なく、プロジェクトがスッキリします。
標準: 2026年現在のフロントエンド開発において、デファクトスタンダード（事実上の標準）となっています。

2. 【準備】Node.jsをインストールしよう

Reactを動かすには、JavaScriptを実行するための環境 Node.js が必要です。

Node.js公式サイトから LTS（推奨版） をダウンロードしてインストールします。
ターミナル（WindowsならPowerShell、Macならターミナル）を開き、node -v と入力して数字が出れば準備完了です。

3. 【実践】3つのコマンドで環境構築

それでは、デスクトップなど好きな場所にフォルダを作り、ターミナルで以下の3つのコマンドを打ち込んでください。

① プロジェクトの雛形を作る

Bash

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

※ my-react-app は自由な名前に変えてOKです。

② 必要な部品をダウンロードする

Bash

cd my-react-app
npm install

③ 開発サーバーを起動する

Bash

npm run dev

ターミナルに表示されたURL（例：http://localhost:5173/）をブラウザで開いてみてください。Viteのデフォルト画面が表示されたら成功です！

4. サンプルコードを動かしてみよう

前回の記事で紹介した「最小限のカウンター」を、自分のPCで動かしてみましょう。

src/App.jsx を開き、中身を以下のコードに書き換えて保存してください。

JavaScript

import React, { useState } from 'react';

// [第1回復習] export default function App: 
// 「App」という名前の画面パーツ（コンポーネント）を定義し、外部へ書き出します。
export default function App() {
  // [第1回復習] useState: 状態（データ）を管理します。
  // text: 入力された文字（初期値は空っぽ ""）
  // setText: textを書き換えるための専用関数
  const [text, setText] = useState("");

  return (
    <div>
      <h1>Vite × React 環境構築成功！</h1>
      <p>あなたのPCで、Reactが動いています。</p>
      
      {/* inputタグ: 文字を入力する欄 */}
      {/* JavaScriptのポイント: e.target.value */}
      {/* (e) => setText(e.target.value): アロー関数で、入力イベント(e)から
          入力された文字(target.value)を取り出し、setTextで状態を更新します。
      */}
      <input 
        type="text" 
        onChange={(e) => setText(e.target.value)} 
        placeholder="ここになにか入力..."
      />

      {/* Reactのポイント: {text} */}
      {/* 状態（text）の値が、リアルタイムに画面に反映されます。 */}
      <h2>入力された文字： {text}</h2>
    </div>
  );
}

CodeSandboxで今回の構成を確認する

5. コードと仕組みの解説

前回のカウンターと違うのは、**「ボタンのクリック」ではなく「文字の入力」**に反応する点です。

onChange={(e) => setText(e.target.value)}:
1. ユーザーが入力欄（input）に文字を打つ。
2. onChange イベントが発動。
3. JavaScriptが「入力イベントの情報（e）」から「入力された実際の文字（target.value）」を取り出す。
4. setText でデータ（text）を更新する。
5. Reactが再描画し、下の <h2> の中の {text} が書き換わる。

この1行に、JavaScriptのイベント処理とReactの状態更新が集約されています。

JavaScriptのポイント

import: 他のファイル（ここではReact本体）から機能を持ってくる命令です。export とセットで覚えるのがコツです。
npm: Node Package Managerの略。世界中のエンジニアが作った便利なプログラム（パッケージ）を、自分のPCにインストールするための道具です。

Reactのポイント

ホットリロード: コードを書き換えて保存した瞬間、ブラウザを更新しなくても画面が切り替わります。これがVite×Reactの快適さの秘密です。
フォルダ構造: src フォルダがあなたの作業場所です。ここに .jsx ファイル（JavaScript + UI）を増やしていくことで、アプリが成長していきます。