【React】Vite環境でのセットアップ（TypeScript対応）
更新日：2026/01/08
Viteは最近注目され始めた高速フロントエンドビルドツールです。
簡単なセットアップ操作で、面倒なビルド設定を自動で行ってくれます。
また開発時のサーバーとしても機能し、ソース変更後にビルドをすることなく高速にテストを行うことができます。
今回は、ViteでReactの開発環境を構築します。
前提条件
ViteはNode.jsで動作するツールです。
そのため、Node.jsが必須です。
Viteは古いNode.jsでは動作しません。
（2025/12月現在では20.19以降、22.12以降。テンプレートによってはさらに高いバージョンが必要）
インストールしていない、またはバージョンが低い場合は、事前にインストールしておきましょう。
WindowsとMacは、次のページからインストーラーを取得
■Node.jsダウンロード
その他のＯＳは、次ページを参照
■パッケージマネージャを利用した Node.js のインストール
ViteとReactのインストール
Node.jsの準備ができたら、ViteとReactおよび必要に応じてTypeScriptをインストールします。
次のステップを実行すると開発用のフォルダが作成されます。
作成されたフォルダを他の位置に移動することができるので、まずはインストール作業を実行してみましょう。
なおインストーラーから質問はバージョンによって異なります。
今回は8.2.0で解説していきます。
1) ターミナル（コマンドプロンプト等）で、次のコマンドを実行します。
npm create vite@latest
テンプレートオプションを併用することで、この後のいくつかのステップをスキップできます。詳細は次の項を参照してください。
2) インストール作業に必要なパッケージが表示されます。エンターキーで続行します。
Need to install the following packages:
create-vite@8.2.0
Ok to proceed? (y)
3) インストールされたパッケージが実行されます。プロジェクト名を質問されるので入力してエンターキーで続行します。
> npx
> create-vite
|
* Project name:
| vite-project
—
※ここで入力したプロジェクト名でフォルダーが作成されます。
4) 次はフレームワークの質問です。Reactを選択してエンターキーで続行します。
* Select a framework: | Vanilla | Vue | > React | Preact | Lit | Svelte | Solid | Qwik | Angular | Marko | Others —
5) 次はバリエーション（使用する言語等）の質問です。
TypeScriptを使用する場合は、「TypeScript」「TypeScript + React Compiler」「TypeScript + SWC」から選択します。
使用しない場合は「JavaScript」「JavaScript + React Compiler」「JavaScript + SWC」から選択します。
* Select a variant: | > TypeScript | TypeScript + React Compiler | TypeScript + SWC | JavaScript | JavaScript + React Compiler | JavaScript + SWC | React Router v7 ↗ | TanStack Router ↗ | RedwoodSDK ↗ | RSC ↗ | Vike ↗ —
React Compilerはビルド時にReactアプリケーションを自動的に最適化するツールです。
useMemo、useCallback、React.memoで最適化できる場面を解析して、コードを記述しなくても自動で最適化してくれます。
SWCはRustで書かれた超高速トランスパイラ・コンパイラです。
React選択は通常はBabelが使用されますが、SWCに切り替えることで高速に動作します。ただしBabelプラグインを使用できないという欠点があります。
6) 次は、rolldown-viteをインストールするかどうかの質問です。
※インストーラーのバージョンによっては表示されない可能性があります。
* Use rolldown-vite (Experimental)?:
| Yes
| > No
—
Experimentalは実験的という意味です。
「実験に協力してあげるよ！」という人以外は No でよいでしょう。
7) 最終確認です。Yesを選択してエンターを押すとインストール作業が開始します。
* Install with npm and start now?
| > Yes / No
—
8) 開発サーバーが実行されるので終了する。（コマンドプロンプトならCtrl+C）
> vite-project@0.0.0 dev
> vite
VITE v7.2.7 ready in 251 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
終了せずにブラウザで http://localhost:5173/ にアクセスすると、初期設定でのアプリを確認できます。
テンプレート指定でインストール可能
ターミナル（コマンドプロンプト等）で、次のコマンドを実行することでインストール作業を簡略化できます。
npm create vite@latest <PROJECTNAME> -- --template <TEMPLATENAME>
<PROJECTNAME>は、プロジェクト名（フォルダ名）に置き換えてください。
<TEMPLATENAME>は、次の文字のどれかに置き換えてください。
- react
vanilla js(純粋なJavaScript)を選択 - react-ts
TypeScriptを選択 - react-swc
vanilla jsおよびSWCを選択 - react-swc-ts
TypeScriptおよびSWCを選択 - react-compiler
vanilla jsおよびReact Compilerを選択 - react-compiler-ts
TypeScriptおよびReact Compilerを選択
例
npm create vite@latest react-test -- --template react-compiler-ts
コマンドを実行すると、バリエーション（使用する言語等）の指定までの手順がスキップされます。
インストール結果
プロジェクト名「vite-project」、バリエーション「TypeScript + React Compiler」選択時、次のようなフォルダ構成で環境構築されました。
<vite-project>
┣ <node_modules>
┃ ┣ 依存パッケージ
┃ ...
┃ ┗ 依存パッケージ
┣ <public>
┃ ┗ vite.svg
┣ <src>
┃ ┣ <assets>
┃ ┃ ┗ react.svg
┃ ┣ App.css
┃ ┣ App.tsx
┃ ┣ index.css
┃ ┗ main.tsx
┣ .gitignore
┣ eslint.config.js
┣ index.html
┣ package-lock.json
┣ package.json
┣ README.md
┣ tsconfig.app.json
┣ tsconfig.json
┣ tsconfig.node.json
┗ vite.config.ts
public/vite.svg と src/assets/react.svg はビルド後のファイルに含まれます。不要なら削除しておきましょう。
vite.config.ts を確認すると、react-compilerを読み込んでいるのがわかります。
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [
react({
babel: {
plugins: [['babel-plugin-react-compiler']],
},
}),
],
})
TypeScriptの設定ファイル（ tsconfig.json )も自動で生成されていますね。
とりあえずですが、開発を始められる環境になっているようです。
簡単な構造解説
まずは index.html からスクリプトファイルの位置を把握します。
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vite-project</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
/src/main.tsx ですね。
/src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
このファイルを基点としてコンパイル等が実行されます。
デバッグ方法
viteでのデバッグは基本的にはブラウザの開発ツールでおこないます。
ソースファイルをすべて保存後に、次のコマンドを実行します。
npm run dev
開発用サーバーが起動します。
VITE v7.2.7 ready in 251 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
ブラウザで「http://localhost:5173/」にアクセスすると、作成したアプリが表示されます。
ブラウザの開発ツールを開いてデバッグしましょう。
また、開発サーバー実行中にソース（cssも含む）を変更して保存すると、ブラウザ上のアプリに反映されます。
ビルド方法
デバッグが終わったらソースをビルドして、本番環境で動作可能なファイルを生成します。
次のコマンドを実行します。
npm run build
少し待つとビルド結果が表示されます。
> vite-project@0.0.0 build
> tsc -b && vite build
vite v7.2.7 building client environment for production...
✓ 37 modules transformed.
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/react-CHdo91hT.svg 4.13 kB │ gzip: 2.05 kB
dist/assets/index-COcDBgFa.css 1.38 kB │ gzip: 0.70 kB
dist/assets/index-D1btFMhW.js 194.89 kB │ gzip: 61.40 kB
✓ built in 932ms
次のように distフォルダが作成されビルド後のファイルが出力されます。
<vite-project>
┣ <dist>
┃ ┣ <assets>
┃ ┃ ┣ index-COcDBgFa.css
┃ ┃ ┣ index-D1btFMhW.js
┃ ┃ ┗ react-CHdo91hT.svg
┃ ┣ index.html
┃ ┗ vite.svg
┃
┣ <node_modules>
...
distフォルダ内のファイルを本番サーバーにアップロードしましょう。
ファイル名の - 以降の文字はランダムで付加されます。
ビルドするたびに変わりますが、前回のビルド結果ファイルはクリアされて残りません。
更新日：2026/01/08
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
