ReactとViteの始め方【初心者向けに徹底解説】

フロントエンド開発•2025/1/22

ReactとViteとは何か

皆さんはウェブアプリケーションを作るときに、どういうツールを使っていますか。最近では React を中心に開発するケースが増えていますが、ビルドツールとして Vite が注目を集めています。

ReactはJavaScriptのフレームワークの一つとして知られています。一方でViteは、モジュールを高速に読み込み・ビルドするためのビルドツールです。両者を組み合わせることで、開発者体験を大きく向上させられるのが特徴と言えますね。

Reactを単独で使う場合、一般的にはWebpackやBabelなどのツールと一緒に設定を行うケースが多いです。ただし細かな設定が必要になり、初心者にとってはハードルが高いと感じるのではないでしょうか。そこでViteを組み合わせると、設定が簡素化され、開発がスムーズになるメリットがあります。

この組み合わせに興味を持つ方は、特に「素早くReactアプリを立ち上げたい」「ビルド時間を短縮したい」というニーズがあるかもしれません。ここからは、その辺りをより具体的に掘り下げて解説していきます。

Reactとは

ReactはFacebook（現Meta）によって開発されたUIライブラリです。ウェブアプリケーションの見た目（ビュー）を効率的に構築するための仕組みが揃っています。

コンポーネント志向の設計が特徴なので、小さな部品を組み合わせて複雑な画面を作る感覚で学習しやすいでしょう。またReactは仮想DOM（Virtual DOM）という仕組みを使い、画面の更新を必要最小限に抑えて効率的に動作させます。これにより利用者の操作に対する応答が軽快になるわけですね。

さらにReactはエコシステムが豊富です。 React RouterやReduxなどのライブラリを追加することで、大規模アプリケーションにも柔軟に対応できます。初心者にとっては新しく覚えることが多いかもしれませんが、コミュニティが盛んで情報も見つかりやすいと言えます。

Viteとは

Viteは次世代のビルドツールとして、ESモジュール（ESM）を活用しながらプロジェクトを高速に立ち上げることを目指しています。従来のビルドツールが大きなバンドルを生成してから開発サーバーを起動していたのに対し、Viteは必要な部分のみ動的に読み込むアプローチを採用しています。

これによって「HMR（Hot Module Replacement）」と呼ばれる画面更新機能も素早く動作し、コーディング中のリロード時間が短縮されます。初心者が開発を学ぶ際にも、「コードを変更して保存→ブラウザで確認→すぐに結果が反映される」という流れをとても軽快に実感できるでしょう。

ViteはReactだけでなく、VueやSvelteなどさまざまなフレームワークにも対応している柔軟性があります。設定ファイルもシンプルなので、学びやすく拡張性も高いのが魅力です。大規模プロジェクトだけでなく、個人の学習や小規模サイトにも導入しやすいと言えます。

ReactとViteを組み合わせるメリット

ReactとViteを一緒に使うと、以下のようなメリットを得られます。

ビルド速度や開発サーバーの起動が速い
設定ファイルが少なく、初心者でも導入しやすい
HMRが迅速に反映され、開発効率が上がる
ESMベースの仕組みにより、モジュールを細かく扱いやすい

特に開発中のビルド時間やリロード時間が短いのは大きな利点でしょう。作業テンポを損なわず、集中した状態でコーディングしやすくなります。これからReactを学びたい方にとっては、Viteがシンプルな環境を提供してくれるので、試行錯誤しやすいのではないでしょうか。

加えてViteは軽量なので、プロジェクトの初期段階でセットアップしやすいという点も挙げられます。 Reactと組み合わせたアプリが大きくなったあとも、適切に設定を拡張できるので中長期的にも安心です。

ReactアプリをViteで構築する手順

ここからは実際にReactアプリをViteで構築する流れを見ていきましょう。今回はNode.js環境がセットアップされている前提で説明していきます。

新規ディレクトリを用意する
Viteのテンプレートを利用してReactプロジェクトを作成する
依存関係をインストールして開発サーバーを起動する

まず、空のフォルダを作成し、そのフォルダに移動してください。その後、下記のコマンドを実行します。


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

コマンドが完了したら、my-react-appというディレクトリが作成されますので、そこに移動して依存関係をインストールします。


cd my-react-app
npm install
npm run dev

ブラウザで表示されたURLにアクセスすると、ViteとReactの初期セットアップが完了したシンプルなページが表示されるはずです。

上記のコマンドでテンプレートを生成する際にTypeScript版を使うこともできます。学習の進度やプロジェクト要件に合わせて選ぶと良いでしょう。

サンプルコードの構成イメージ

プロジェクトが立ち上がったら、次はコード構成を簡単に確認しましょう。以下のようなディレクトリ構造が標準的に作成されます。


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

Reactコンポーネントを定義するファイルは src/App.jsx で、src/main.jsx からルートコンポーネントとして呼び出されています。 App.jsx内の表示内容を変更すると、ブラウザが即座に更新されるのを体感できるはずです。

もしデザインをカスタマイズしたい場合は、CSSファイルを追加して読み込みます。たとえば src/App.css を用意してスタイルを編集すると良いでしょう。

実際のReactコンポーネント例

ここで簡単なReactコンポーネントの例を挙げてみます。 App.jsx の中身を下記のように書き換えると、カウンター機能が入ったページを確認できます。


import { useState } from "react";

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

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>ReactとViteの簡単サンプル</h2>
      <p>現在のカウント: {count}</p>
      <button onClick={handleIncrement}>カウントを増やす</button>
    </div>
  );
}

export default App;

ボタンをクリックするたびにカウントが増えていくシンプルなサンプルです。このようにコンポーネントが持つ状態を useState で管理し、画面表示を更新しています。

表示内容を変更したあとブラウザを見てみると、保存してすぐに反映されることに驚くかもしれません。これがViteを使った開発の心地良いところですね。

実務での活用シーン

ReactとViteの組み合わせは以下のようなシーンで活かされます。

新規サービスの立ち上げやプロトタイプ作成
小規模なウェブアプリの素早い検証
大規模アプリを段階的に拡張していく場合の高速開発

特に小さなチームや個人での学習には手軽で、複雑な設定なしに最新の技術を体験できる点が魅力でしょう。大規模開発でも、Viteを導入することでビルド時間を大幅に削減できる可能性があります。

またReactの学習初期段階からViteを使っておくと、将来的にWebpackなどのツールを学ぶ際にも理解がスムーズになるかもしれません。なぜならビルドプロセスで何が起きているのかを小さな段階から想像しやすいからです。

最初から大きなスケールの設定を組むより、シンプルな環境で学習を始めるほうが抵抗が少ないですね。

ビルドとデプロイ

開発が一通り落ち着いたら、今度は本番環境向けのビルドを行います。この場合、npmスクリプトを利用して以下のようにコマンドを実行します。


npm run build

dist というフォルダが生成され、その中に最適化されたファイルが出力されます。このフォルダの中身をサーバーにアップロードすれば、Reactアプリとして動かすことができます。

もしNetlifyやVercelといったホスティングサービスを使うなら、ビルド設定を合わせるだけでデプロイまで自動化することも難しくありません。大がかりな手順を踏まずに、本番運用に近い形でアプリを公開できる点は、初心者にとってもわかりやすいと思います。

まとめと次のステップ

ここまでReactとViteを組み合わせるメリットや、セットアップの流れを見てきました。ウェブアプリケーション開発をより軽快に進めたい場合に、Viteはとても相性が良いツールと言えるでしょう。

React自体もコンポーネント指向の特性から、コードの再利用や保守性を高められます。学習コストを抑えながら開発効率を上げるには、両者を組み合わせる手法は大いに役立つはずです。

もし学習の意欲が高まったら、さらに複雑なコンポーネント構成やAPI連携にも挑戦してみてください。例えば外部データを取得してリストを表示する機能を試すと、Reactアプリ開発の実務的な雰囲気が味わえるでしょう。

開発者としての第一歩を踏み出すには、環境構築の手軽さと動作の軽快さが大きなアドバンテージになりそうですね。 ReactとViteを活用しながら、実際の開発を楽しんでください。