Vite + Reactの始め方｜インストールから起動まで3分で完了【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」のインストール方法と使い方の初歩を紹介します。

今回はJavaScriptを使いますが、TypeScriptを使う場合は下記記事を参考にしてください▼

「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.4
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 + Vite」とよく一緒に名前が挙がるのがNext.jsです。

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

詳しくはこちらの記事をご覧ください▼

React + ViteとNext.jsには、それぞれメリット／デメリットがあります。

目的ごとの適切な選び方は下記記事を参考にしてください。

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

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

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

さらにpublicフォルダ内に入っているファイルは、favicon.svg以外はすべて削除しましょう。

次のようになります。

（*eslint.config.jsについてはこちらの記事を参照）

次は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」の使い方の初歩の初歩です。

とはいえ、ここで触れたのはコンポーネントの表示を書き換えるという、ごく基本の一歩だけです。

state、props、イベント処理など、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などにアップロードすれば、アプリをオンラインで公開可能です。

ここまで終えたら、次は

「Vite + React」のセットアップとbuildまでが完了しました。

これで「React開発のスタートライン」に立てたことになります。

スタートラインに立てたということは、ここからが本番です。

次に学ぶべきことはなんでしょうか？

詳しくまとめたガイドがあるので参考にしてください▼

state、props、コンポーネント設計など、React本体の理解を体系的に進めたい方はこちらの教材をどうぞ▼

⚫︎ monotein.base.shop/p/00005

よくある質問

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

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

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

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

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

SPAについては下記ガイドを参考にしてください▼

Q2 Reactアプリでページを作るにはどうすればいいですか？

HTML開発時にはabout.htmlやblog.htmlというファイルを作れば、それがページになりました。

React開発では別の仕組みが必要です。

React RouterやTanStack Routerと呼ばれるツールを使って行います。

これらのツールはページを作る以外にも様々な便利な機能を提供しているため、Reactアプリでのページ生成時にはほぼ必ず使います。

しかし実は、React RouterやTanStack Routerを使わなくてもページの作成は可能です。

方法は下記の記事で紹介しています。

HTML開発時のように、ファイルをページとして使う方法はこちら▼

コードでページを生成・管理する方法はこちら▼

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

使えます。

HTMLとCSSの知識があればReactの入門は可能です。

TypeScriptやJavaScriptの知識は、Reactに慣れたあとで少しずつ身につけていきましょう。

Reactを学び始めて難しく感じてきた方は、こちらのガイドも参考にしてください▼

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

React + Viteのセットアップができても、フロントエンド開発者として就職をしたり、フリーランス案件を獲得するにはまだ不十分です。

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

学習全体の流れを知りたい方は、こちらのロードマップを参考にしてください▼

Q5. 最新バージョンのReactについて知りたい。

最新のReactバージョン19や、新しいReactサーバーコンポーネントなどの機能を紹介したガイドがあります。

参考にしてください▼

Q6. 本記事はJavaScriptでしたが、TypeScriptはどのタイミングで学べばいいですか？

Reactの基本的な動かし方に慣れてきたタイミングがおすすめです。

本記事のようにまずJavaScriptで感覚をつかんでからTypeScriptに進むと、「なぜTypeScriptの記法が必要なのか」を実感しながら学べます。

とはいえ、JavaScriptからTypeScriptへの移行で、違和感を感じる人がいるのも事実です。

その理由と乗り越え方をまとめたガイドも参考にしてください▼

Q7. React入門から一歩進んで、AI時代にも通用するスキルを身につけるにはどうすればいいですか？

本記事で作ったのは、画面に文字を表示するだけの最小限のアプリです。

state、props、コンポーネント設計といったReact本体の理解、そしてReactで使うTypeScriptの知識を、正しい順番で身につける必要があります。

詳しくは下記記事をご覧ください▼

Q8. 独学をしていますが、停滞しています。どうすればいいですか？

独学でつまずく人は大勢います。

まずは「つまずくのは自分だけじゃない」ということを知っておいてください。

さて、同じReactやNext.jsを学んでいても、「どこでつまずくか」、「何を優先すべきか」は人によって異なります。

今の状況を教えていただければ、次に何をすればいいか、どう進めていけばいいかを個別にお答えします。

「この勉強法で合っているのかな？」という確認だけでも大丈夫です。

下のフォームからご連絡いただければ、三好アキが直接、目を通してお返事します（無料）。