【Vite + React】3分で使えるようになるVite + React入門（初心者向け・2026年版）

create-react-appとVite + React

私は2021年から、Reactビギナー向けの入門教材を数多く作っています。

▶︎ Amazonの著者ページへ

当初の教材では、React開発ツールとして「create-react-app」を使っていました。

「create-react-app」は機能がしぼられている分、React自体に集中でき、初心者には最適だからです。

しかし2026年現在、「create-react-app」は推奨されていません。

「create-react-app」のメンテナンスも2023年春から止まっています。

近年のReact開発では、「Vite + React」というものを使うのがスタンダードです。

本記事では、ビギナー向けに、この「Vite + React」のインストール方法と使い方の初歩を紹介します。

なお、本記事の最後では、2026年のフロントエンド学習ロードマップにも触れているので、ぜひ最後まで読んでください。

また、これからReactを学びたい人向けに、詳しい入門方法と、学習に役立つReactミニ用語辞典を無料提供中です。

下記リンクよりご利用ください ▼

monotein.com/present

「Vite + React」について

最初に「Vite + React」を簡単に紹介します。

従来まで使われていた「create-react-app」との最大の違いは、JavaScriptファイルをまとめる仕組みです。

Reactでは大量のJavaScriptファイルが使われています。

そのため、ブラウザでJavaScriptを実行する前に、それらを一度まとめてあげる必要があるのです。

この大量のファイルを束ねるプロセスは「バンドル」、そこで使われるツールは「バンドラー」と呼ばれます。

「create-react-app」では、Webpackというバンドラーが使われていました。

バンドラーにはWebpack以外にも複数ありますが、近年、日本を含め世界的にポピュラーなものがViteになります。

このViteをWebpackの代わりに使ったもの、それが「Vite + React」です。

Viteは処理能力は高いため、Webpackを使っている「create-react-app」と比べ、ファイルの変更をブラウザに反映させるまでの時間や、build実行時の待ち時間が大幅に短くなっています。

「よりスピーディに、ストレスなく開発を進められる」

これが「Vite + React」が支持を集める理由のひとつです。

それでは次に、「Vite + React」のインストール方法とbuildについて紹介をしていきます。

「Vite + React」のインストール方法

ターミナル上で、「Vite + React」をインストールしたいフォルダに移動します。

ここでは「ダウンロード」フォルダにいるものとします。

そして次のコマンドをターミナルに打ち、「Enter」キーで実行してください。

npm create vite@latest

ここで次のような表示が出ることがありますが、特に問題ではないので、「Enter」キーを押して次に進んでください。

Need to install the following packages:
    create-vite@9.0.2
Ok to proceed? (y) 

これ以降、質問がいくつか出てくるので回答していきましょう。

最初はこのアプリの名前で、これがフォルダの名前に使われます。

◆  Project name:
│  vite-project
└

名前は好きなものが使えます。

ここでは「first-react-app」と書きましょう。

◆  Project name:
│  first-react-app
└

「Enter」キーを押すと次の質問が出ます。

◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
└

Reactを使った開発をしたいので、キーボードの矢印キーで「React」を選び、「Enter」キーで決定します。

次は、開発言語／フレームワークとして何を使うかを決める質問です。

◆  Select a variant:
│  ○ TypeScript
│  ○ TypeScript + React Compiler
│  ● JavaScript
│  ○ JavaScript + React Compiler
│  ○ RSC
│  ○ React Router v7 ↗ https://reactrouter.com
│  ○ TanStack Router ↗ https://tanstack.com/router
│  ○ RedwoodSDK ↗ https://rwsdk.com
│  ○ Vike ↗ https://vike.dev
└

ここでは「JavaScript」とだけ書かれているものを選び、「Enter」キーを押しましょう。

次はnpmパッケージを一緒にインストールするかを問う質問です。「No」を選び、「Enter」キーを押しましょう。

◆  Install with npm and start now?
│  ○ Yes / ● No
└

次のような表示が出たら、セットアップは完了です。

ダウンロードフォルダを見ると、「first-react-app」フォルダが出来ています。

これをVS Codeで開きましょう（VS Codeにフォルダを直接ドラッグ&ドロップすれば開けます）。

中身は次のようになっています。

かつて使われていた「create-react-app」との主な違いは次の点です。

⚫︎ Reactファイルの拡張子が.jsではなく.jsxになっている

⚫︎ ファイル名がindex.jsの代わりにmain.jsxとなっている

⚫︎ index.htmlがpublicフォルダの外に置かれている

⚫︎ Viteの設定ファイルvite.config.jsがある

⚫︎ 起動コマンドがnpm startではなくnpm run devになっている

さて、先ほどの質問「Install with npm and start now?」では「No」を選びました。

なので、最初に「Vite + React」で必要なパッケージをインストールする必要があります。

VS Code上部メニューバーの「Terminal」から「New Terminal」を選び、VS Code下部にターミナルを出してください。

そこに、パッケージをインストールする下記コマンドを打ち、「Enter」で実行しましょう。

npm install

node_modulesが作成されます。これはパッケージ関係のフォルダです。

これで起動コマンドであるnpm run devを実行すると、「Vite + React」が起動します。

しかし、その前にフォルダ内を整理しましょう。

なお、Reactとよく一緒に名前が挙がるNext.js。

このNext.jsも本記事と同じように3分で使えます。

その方法や、Vite + Reactとの使い分けなどについて知りたい方は無料ガイドをご利用ください▼

monotein.com/present

「Vite + React」のクリーンアップ

まっさらな状態で始めたいので、不要なものを削除していきます。

srcフォルダを開き、その中のassetsフォルダ、index.cssを削除してください。

さらにpublicフォルダ内のvite.svgも削除しましょう。

次のようになります。

次はApp.cssを開いてください。

コードがすでに書かれているので、すべて消しましょう。

次のようになります。

次はApp.jsxを開き、ここでも同様に、書かれているコードをすべて消しましょう。

そして次のコードを書いてください。

// App.jsx

import './App.css';

function App() {
    return (
        <div>
            <h1>こんにちは</h1>
        </div>
    );
}

export default App;

クリーンアップの最後がmain.jsxです。

main.jsxを開き、次のコードを消しましょう。

// main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'        // 削除
import App from './App.jsx'
  
createRoot(document.getElementById('root')).render(
  <StrictMode>  
    <App />
  </StrictMode>,  
)

VS Code上部メニューバーの「File」→「Save」、もしくは「Command」+「S」で、各ファイルに加えた変更を保存しましょう。

これでクリーンアップが完了して、「Vite + React」開発をはじめる地ならしができました。

（*なおReactファイルでは必ず使われているexport、importは多くのビギナーがミスをするところです。使い分けはこちらの記事をご覧ください。）

次は「Vite + React」を起動させましょう。

ターミナルにnpm run devを打ち、「Enter」で実行すると、次のように表示されます。

「create-react-app」の経験者は、この起動時間が「Vite + React」の方が短いことに気づいたと思います。

次は、指定されているhttp://localhost:5173を開いてみましょう。

次のように表示されます。

VS Codeに戻り、App.jsx内の<h1>タグの文字列を、「さようなら」に変えて保存してみましょう。

ブラウザを見ると、表示も変わっています。

つまりApp.jsxのreturn横のカッコ( )内は、HTMLと同じ要領で編集できることがわかります。

これが「Vite + React」の使い方の初歩の初歩です。

次はReactアプリ公開に必要なbuildを行いましょう。

「Vite + React」のbuild方法

開発が完了し、オンラインで公開するときには「build」という作業を行います。

まず、ターミナル上で「control」を押しながら「C」を押して、「Vite + React」を停止させてください。

そして下記buildコマンドを打って、「Enter」キーで実行しましょう。

npm run build

「create-react-app」と比べ、「Vite + React」では、buildの完了までにかかる時間が非常に短いのが特徴です。

さて、distという新しいフォルダが生成されています。

これは「create-react-app」のbuild後に作られるbuildフォルダと同様のもので、distフォルダをNetlifyなどにアップロードすれば、アプリをオンラインで公開可能です。

よくある質問（FAQ）

Q1. create-react-appはもう使えないのですか？

使えなくはありませんが、2023年春からメンテナンスが止まっています。

2026年現在、新しいプロジェクトで使うことを推奨されていないので、これからReact開発を始めるならVite + React一択です。

なおVite + Reactで作るアプリは、SPA（シングルページ・アプリケーション）と呼ばれるものです。

これはNext.jsアプリとは異なるものなので、違いを理解しておきましょう。

こちらの記事で詳しく解説しています。

Q2. npmとは何ですか？

npmは、Reactなどのライブラリやツールを管理するための仕組みです。

npm installやnpm run devなどのコマンドを使い、開発に必要なものを手元のパソコンに入れたり、アプリを起動したりできます。

Q3. JavaScriptをまだ学んでいなくても、Vite + Reactは使えますか？

使えます。

本記事でも紹介しているように、HTMLとCSSの知識があればReact入門は可能です。

JavaScriptの知識は、Reactに慣れたあとで少しずつ身につけていけば問題ありません。

Q4. フロントエンドの学習はどのように進めていけばいいですか？

フロントエンド開発者として就職をしたり、フリーランス案件を獲得するには、本記事で紹介したVite + Reactだけでは不十分です。

TypeScript、Next.jsといったより高度なツールのスキルも必須になります。

これまでの私の指導経験をもとに、もっとも効果的に学習を進めていくステップをまとめたロードマップを無料でお配りしています。

下記ページよりご利用ください▼

monotein.com/present