【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説

まず「Vite」とは何か

Reactで始めるとき、多くのビギナーが次の壁にぶつかります。

「どうやって始めればいいの？」

Reactはそれ単体では動きません。

「Reactを開発するための環境」を最初に用意する必要があります。

ここで使われるのが「Vite（ヴィート）」です。

ViteはReactアプリの開発環境をセットアップするツール。

具体的にはViteは次のことをやってくれます。

• ローカル環境でReactを動かす
• コードを変更したとき、ブラウザに即反映する
• 完成したアプリを本番用にまとめる（ビルド）

例えると、Viteとは料理を載せるお皿です。

料理だけあっても、それを載せるお皿がないと

なぜViteなのか

少し前までは、Reactの開発環境ツールには「create-react-app（CRA）」が使われていました。

しかし数年前にCRAの開発はほぼ止まり、Reactの公式ドキュメントでも推奨されなくなっています。

現在Reactを始めるなら、Viteが唯一の選択肢です。

理由は3つあります。

① 起動が速い
create-react-appと比べ、開発サーバーの起動速度が高速です。

「コードの変更が反映されるまで待つ」というストレスがほぼなくなりました。

② シンプル
余計な設定がなく、初心者にも扱いやすい構成になっています。

③ メンテナンスが活発
2026年現在も活発に更新が続いており、将来性があります。

「今Reactを始めるならVite」と考えてください。

Next.jsとの違いは？

Viteの説明をすると必ず出てくる疑問があります。

「Next.jsとは何が違うの？」

この2つは似たようなことができるので、使い分けで混乱する人は多くいます。

Vite + React

• フロントエンドのみ。サーバー機能は持たない

• シンプルなウェブアプリ、管理画面、SPA開発に向いている

（*SPAについては【今スグ分かる】『SPA』とは？（シングル・ページ・アプリケーションの仕組み））

Next.js

• フロントとバックエンドを一体で扱える

• SEOが必要なウェブサイト、フルスタックアプリに向いている

「どちらを選ぶべきか」という答えは、何を作るかによって変わります。

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

Vite + Reactのセットアップ方法

では実際に始めていきましょう。

必要なツールはターミナル（コマンドを入力する画面）です。

ステップ① Node.jsをインストールする

Viteを使うにはNode.jsが必須です。

まだインストールしていない方は、Node.jsの公式サイトから「LTS版」をインストールしてください。

インストール後、ターミナルで下記を入力して確認します。

node -v

バージョン番号が表示されればインストールができています。

なぜフロントエンドのReactの開発でNode.jsが必要なのか、疑問に思った方はこちらをどうぞ▼

ステップ② プロジェクトを作る

ターミナルで次のように入力してください。

npm create vite@latest

「Enter」キーを押して実行すると、プロジェクト名やフレームワークの選択を求められます。

セットアップの詳しい手順と、各ステップの意味については、こちらの記事で画像つきで解説しています▼

言語選択ではJavaScriptだけでなく、TypeScriptも出てきます。

実は2026年のReact開発現場では、TypeScriptを使うのが標準です。

ReactとTypeScriptを最初から一緒に学ぶ方法は、こちらの記事で解説しています▼

ステップ③ 起動する

以下のコマンドを入れましょう。

cd my-app
npm install
npm run dev

そしてブラウザでhttp://localhost:5173を開いてください。

Vite + Reactの画面が表示されれば、開発環境のセットアップが成功です。

最初に理解しておくべきフォルダ構成

作成されたフォルダを見ると、中にはたくさんのファイルがあります。

最初は全部を理解しようとしなくて大丈夫です。

押さえるべきものは次の4つだけです。

srcフォルダ

ここにReactのコードを書いていきます。

作業の99%はこのフォルダの中で行われます。

App.jsx（またはApp.tsx）

最初に表示される画面のコンポーネントです。

ここを書き換えるところから、React学習は始まります。

index.html

Reactアプリの土台となるHTMLファイルです。

Reactはこのファイルの中に埋め込まれる形で動きます。

main.jsx（またはmain.tsx）

Reactコードとindex.htmlの接点となるファイルです。

これがindex.htmlとつながって、ブラウザにReactが表示されます。

よく出るエラーと対処法

Viteでの開発中、初心者がよくぶつかるエラーを2つ紹介します。

npm installでエラーが出る

Node.jsのバージョンが古い場合に起きることがあります。

node -vでバージョンを確認し、20以上でなければNode.jsを再インストールしてください。

ターミナルに大量のメッセージが表示される

npm run devを実行したとき、ターミナルにViteのメッセージが大量に表示されることがあります。

気になる場合は、表示を消す方法をこちらで解説しています▼

Viteの次に学ぶこと

ここまでで、ViteでReactプロジェクトのセットアップと、ブラウザに画面を表示するところまでできました。

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

次に学ぶべきことは、Reactの「コンポーネント」と「状態（state）」の概念です。

Reactを少し触ってみて難しく感じている方は、まずこちらの記事を読んでみてください▼

React開発環境の構築が終わったら、あとは書くだけです。

本サイト内には多くのビギナー向け記事があるので、それらを参考に開発と学習を進めていきましょう。

よくある質問

Vite以外の選択肢はありますか？

2026年現在ではNext.jsも選択肢のひとつです。

ただしNext.jsはサーバーサイドの機能を含む分、学習する範囲が広くなります。

「まずReactそのものを学びたい」という方には、Viteを使ったシンプルなReactの開発環境から始めるのがおすすめです。

MacとWindowsで手順は違いますか？

コマンド自体は同じです。

ターミナルアプリが異なります（Macは「ターミナル」、Windowsは「PowerShell」または「コマンドプロンプト」）が、入力するコマンドに違いはありません。

JavaScriptとTypeScript、どちらで始めるべきですか？

迷うならTypeScriptから始めてみましょう。

2026年の現場ではTypeScriptが標準になっているからです。

最初からTypeScriptで書く習慣をつけておけば、あとが楽になります。

TypeScriptがなぜ難しく感じるのか、そしてどう乗り越えるかはこちらで解説しています▼

npm run devの後、ブラウザが自動で開きません。

Viteはデフォルトでブラウザを自動で開きません。

ターミナルに表示されたhttp://localhost:5173を、ブラウザのアドレスバーに直接入力してください。

React入門ができたあと、就職や案件獲得といった実践的なスキルを身につけるには？

2026年に必要とされるReact × TypeScriptのスキルがすべて学べる教材があります。

挑戦してみてください▼

⚫︎ monotein.base.shop/p/00005