先生と生徒の会話形式で理解しよう

生徒

「Reactを勉強したいんですが、最初にどうやって開発環境を作ればいいんですか？」

先生

「Reactを使うには環境構築が必要です。最近はViteというツールを使う方法がとても人気です。」

生徒

「Viteってなんですか？難しそうです…」

先生

「大丈夫です。Viteは簡単にReactの開発環境を作れる便利な道具なんですよ。一緒に手順を見ていきましょう！」

1. React開発環境に必要なものとは？

まず、Reactを使うためには「開発環境」が必要です。開発環境とは、プログラムを書いて実行し、結果を確認するまでを一通り行える作業場所のことです。例えば、料理をするなら「キッチン」が必要ですよね。Reactを使うときも、パソコンの中にキッチンのような作業場を用意してあげるイメージです。

Reactの開発環境を用意するには、主に次の道具が登場します。

コードを書くためのエディタ（例：Visual Studio Code）
動作を確認するためのWebブラウザ（例：Google Chrome）
コマンドを実行するターミナル（黒い画面のようなウィンドウ）
JavaScriptを動かすための基盤となる「Node.js」と「npm」
Reactアプリを素早く動かすためのツール「Vite（ヴィート）」

この中でも特に重要なのが、最新のフロントエンド開発を支える「Vite（ヴィート）」です。Viteは、Reactの開発サーバーを高速に立ち上げたり、ファイルを保存したときにすぐ画面を更新してくれたりするツールです。従来の「create-react-app」と比べて軽くて動作が速く、Reactの学習や開発をストレスなく進めやすいのが大きな強みです。

たとえば、将来的には次のようなJavaScriptの命令を使って、画面にメッセージを表示したり、動きをつけたりしていきます。


console.log("Hello React!");

このような簡単なプログラムを、いつでも試せる状態にしておくのが「React開発環境」を整えるということです。このあと、Node.jsのインストールやViteを使ったReactプロジェクトの作成手順を順番に見ていきますので、焦らず一歩ずつ環境を整えていきましょう。

2. Node.jsとnpmをインストールしよう

ReactやViteを動かすためには「Node.js（ノードジェイエス）」が必要です。これは、ブラウザの外側でもJavaScriptを動かせるようにしてくれるエンジンのような存在です。Node.jsを入れることで、パソコンが「JavaScript専用の作業スペース」を持つイメージです。

Node.jsをインストールすると、一緒に「npm（エヌピーエム）」というパッケージ管理ツールも使えるようになります。npmは、ReactやViteなどの必要なソフトをまとめてダウンロードしてくれる「アプリの配布センター」のような役割を持っています。後の手順で使うnpm create vite@latestというコマンドも、このnpmが入っているからこそ実行できるようになります。

Node.jsは公式サイトからインストーラーをダウンロードして、案内に沿って進めれば大丈夫です。特別な設定は不要で、基本的には「Next（次へ）」を押していくだけで構いません。初心者の方は「LTS版（安定版）」と書かれているバージョンを選んでおくと、長く安心して使えます。

インストールが終わったら、本当に正しく入っているかをターミナルで確認してみましょう。次のコマンドを入力してみてください。


node -v
npm -v

それぞれのコマンドを実行して、v20.○.○ のようにバージョン番号が表示されれば、Node.jsとnpmの準備は完了です。数字が少し違っていても、表示されていれば問題ありません。

試しに、Node.jsがちゃんと動いているかどうかを確認するための簡単なサンプルも見ておきましょう。エディタで新しくhello.jsという名前のファイルを作成し、次の1行だけを書き込みます。


console.log("Node.js が動きました！");

ファイルを保存したら、ターミナルでそのファイルがあるフォルダに移動して、node hello.js と実行してみてください。ターミナルにメッセージが表示されれば、Node.jsとnpmを使う準備がきちんと整った証拠です。この基盤ができたら、次のステップでViteを使ったReactプロジェクト作成へ進んでいきましょう。

3. ViteでReactプロジェクトを作成する手順

Node.jsとnpmの準備ができたら、次はいよいよViteを使ってReactのプロジェクトを作ってみましょう。ここでいう「プロジェクト」とは、Reactアプリに必要なファイルやフォルダがひとまとめになった作業用フォルダのことです。あとからソースコードや画像、設定ファイルなどを追加していく「箱」のようなイメージです。

まずは、ターミナル（黒い画面のようなウィンドウ）を開きます。Windowsなら「ターミナル」や「コマンドプロンプト」、Macなら「ターミナル」アプリを起動します。普段ファイルを保存している場所（デスクトップやドキュメントなど）を作業用のフォルダとして決めておくと、あとで迷いにくくなります。

準備ができたら、次のコマンドをターミナルで入力して実行します。


npm create vite@latest my-react-app

このコマンドにはそれぞれ意味があります。npmは、先ほどインストールしたパッケージ管理ツールです。create vite@latestは「最新のViteを使って新しいプロジェクトを作ってください」という指示、my-react-appは作成するプロジェクトフォルダの名前です。ここは自分の好きな名前（例：todo-app や practice-react）に変えても問題ありません。

コマンドを実行すると、ターミナル上で次のような質問が順番に表示されます。


✔ Select a framework: » React
✔ Select a variant: » JavaScript

最初に「どのフレームワークを使いますか？」と聞かれるので、矢印キーでReactを選び、Enterキーを押します。次に「JavaScriptとTypeScriptのどちらを使いますか？」と聞かれるので、プログラミング未経験の方はJavaScriptを選ぶのがおすすめです。TypeScriptはより高度な型の仕組みを持った言語ですが、最初はJavaScriptに慣れてから挑戦するとスムーズです。

質問に答え終わると、ターミナルと同じ場所にmy-react-appというフォルダが自動的に作成されます。その中には、ReactとViteで開発を始めるための最低限のファイルやフォルダがあらかじめ用意されています。


my-react-app/
  ├─ index.html
  ├─ package.json
  ├─ src/
  └─ vite.config.js

この時点では、プロジェクトの「ひな型」ができた状態です。まだ必要な部品をすべて入れ終わってはいませんが、土台はしっかりできています。次のステップでは、このプロジェクトフォルダに必要な依存関係をインストールして、実際にReactアプリを動かせる状態にしていきます。

4. 必要な依存関係をインストールする

プロジェクトが作成できたら、そのフォルダに移動して必要なパッケージをインストールします。


cd my-react-app
npm install

cdはフォルダを移動するコマンドです。npm installは、Reactを動かすために必要な材料をまとめて入れる作業です。

5. Reactアプリを起動してみよう

準備が整ったら、実際にアプリを動かしてみましょう。


npm run dev

このコマンドを実行すると、ターミナルに「http://localhost:5173」というURLが表示されます。これをブラウザに入力すると、Reactアプリが画面に表示されます。

（画面にViteのロゴと「React」関連の初期ページが表示されます。これでReact環境構築の成功です）

6. Reactのサンプルコードを編集してみる

環境ができたら、実際にコードを編集してみましょう。App.jsxというファイルを開いて、以下のように書き換えてみます。


import React, { useState } from "react";

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

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>カウンターアプリ</h1>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>1増やす</button>
      <button onClick={() => setCount(count - 1)} style={{ marginLeft: "10px" }}>
        1減らす
      </button>
      <button onClick={() => setCount(0)} style={{ marginLeft: "10px" }}>
        リセット
      </button>
    </div>
  );
}

export default App;

（画面に「カウンターアプリ」と表示され、ボタンを押すと数値が増えたり減ったり、リセットできます）

このように、Reactではボタンをクリックするたびに数字が変化し、即座に画面に反映されます。これが「リアクティブ（即時反応する）」というReactの名前の由来にもつながっています。

7. Viteを使うメリットとは？

最後に、なぜViteを使うのかを整理しておきましょう。Viteには次のようなメリットがあります。

動作がとても速く、開発が快適
設定がシンプルで初心者でも始めやすい
最新のJavaScriptやReact機能にすぐ対応

特に「速さ」は初心者にとって重要です。作ったプログラムをすぐに確認できるので、挫折しにくくなります。

まとめ

ここまでReact開発環境をViteで構築する流れを丁寧にたどってきましたが、あらためて振り返ってみると、開発に必要な手順や重要なポイントがとても明確になったことがわかります。まず、Reactを学ぶための基礎となる環境構築では、Node.jsやnpmの仕組みを理解し、開発に必要な依存関係を整えることが大切でした。とくにNode.jsはReactだけではなく幅広いJavaScriptツールの基盤となるため、初心者でもしっかりと概念を押さえておくことで学習がスムーズに進みます。また、Viteを利用したReactプロジェクトの作成は、従来のツールよりも高速で軽量であるという利点を持っており、開発体験がとても快適になる点が印象的でした。画面の更新が速く、変更をすぐに確認できるため、学習中の試行錯誤もストレスなく進められます。こうした特徴は、フロントエンド開発の効率化において非常に大きな価値があります。さらに、実際に作成したプロジェクトを使ってReactのサンプルコードを編集し、画面に動きが生まれる体験を通して、Reactの「状態管理」や「コンポーネント」という基本概念に触れることができました。今回のカウンターアプリでは、数値の増減が即座に画面に反映される仕組みを理解し、Reactが持つ動的な画面更新の魅力を実感できたはずです。こうした体験は、今後より複雑なアプリケーションを作っていく際の土台となる重要な学びとなります。また、Viteのメリットとして、シンプルで扱いやすい設定と最新技術との高い親和性が挙げられました。開発環境の構築は初心者がつまずきやすいポイントでもありますが、Viteのおかげで余計な複雑さを避け、最小限のステップでReactの世界に入ることができます。とくに高速な起動と更新は、Reactの学習効率を高めるうえで大きな助けとなるでしょう。ここでは、簡単なReactのサンプルコードをもう一度示し、今回の学びを整理しながら理解を深められるようにします。実際に手を動かしながら試せる形で記述しているので、環境構築後にぜひ自分でも動かしてみてください。

簡単なReactサンプルコードの再確認

学んだ内容を定着させるために、環境構築後に動作確認として使える基本的なコード例を以下に掲載します。


import React, { useState } from "react";

function Sample() {
  const [message, setMessage] = useState("ようこそReactの世界へ");
  return (
    <div style={{ padding: "30px", textAlign: "center" }}>
      <h2>メッセージ表示アプリ</h2>
      <p>{message}</p>
      <button onClick={() => setMessage("メッセージが更新されました")}>
        更新する
      </button>
      <button onClick={() => setMessage("ようこそReactの世界へ")} style={{ marginLeft: "10px" }}>
        元に戻す
      </button>
    </div>
  );
}

export default Sample;

このシンプルなサンプルでも、Reactが持つ「状態（State）」の仕組み、イベント処理、コンポーネントの動作を確認できます。とくに初心者にとって、ボタンを押すだけで画面の内容がリアルタイムに変化する体験は、Reactを学ぶ大きなモチベーションとなるはずです。こうした基礎理解は、これから学んでいくコンポーネント分割やAPI通信などにも大いに役立ちます。また、ReactとViteの組み合わせは、モダンなフロントエンド開発において標準的な手法となりつつあり、多くのプロジェクトで採用されています。高速なビルド、多彩な設定、拡張性の高さなど、学習を進めるほどに恩恵を実感できるでしょう。今後さらにReactのコンポーネント構造やHooksといったテーマを学ぶ際も、今回作成した環境はそのまま活かせます。 ReactでWebアプリケーションを作りたい、インタラクティブな画面を作りたい、JavaScriptの応用力を伸ばしたいという人にとって、今回学んだ環境構築の手順は必ず役に立つ知識です。ぜひ、これからの学習に活かしてみてください。

先生と生徒の振り返り会話

生徒

「今日の内容で、Reactの環境構築がすごく理解できました！Viteって思ったより簡単なんですね。」

先生

「そうですね。Viteは開発に必要な機能をしっかり備えつつ、とてもシンプルに扱えるのが魅力です。初心者にこそ使ってほしいツールですね。」

生徒

「サンプルアプリを編集して画面がすぐ変わったのが面白かったです。Reactの仕組みが少しわかった気がします！」

先生

「動きのある画面を実際に見て学ぶと理解が早いですよ。これからもっと複雑なアプリにも挑戦していけますね。」

生徒

「はい！まずは今日の環境でいろいろ試してみます！」