Vite React TypeScript setup の手順を、実際のハンズオンを通じてステップバイステップで解説します。この記事は、筆者がReact学習の第一歩として環境構築を行った際の体験をもとに書いています。つまずいたポイントや疑問に感じた点もそのまま共有しているので、同じように初めてReactに触れる方の参考になれば幸いです。
注記： 本記事中のターミナル出力に含まれるユーザー名・PC名は、プライバシー保護のためダミー（
user01/mypc）に差し替えています。
参照元
本記事は、以下のチュートリアルを参考にしながら進めました。
得られるもの
この記事では、Vite React TypeScript setup（環境構築）の手順を、実際のハンズオンを通じてゼロから解説していきます。
この記事を最後まで進めると、以下の知識が得られます。
npm create vite@latestコマンドによるプロジェクト作成の流れ- コマンドの各パラメータ（
.、--、--template react-ts）の意味 - パッケージ名のルール（大文字NGなど）のつまずきポイント
- 開発サーバーの起動・停止とブラウザでの動作確認方法
- Reactの state（状態管理）の基本動作の体感
React初学者がまずつまずきやすいポイントも含めて丁寧に拾っているので、これから環境構築を始める方はぜひ参考にしてみてください。
上の画面がブラウザに表示されれば成功です。中央の「count is 0」ボタンをクリックするとカウントが増えていきます。これはReactの state（状態管理） の基本動作で、ボタン押下 → state更新 → 画面再描画という流れを体験できます。
プロジェクトのフォルダ構成
完成時のフォルダ構成は以下のとおりです。
todoApp/
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
├── vite.config.ts
├── public/
│ └── vite.svg
└── src/
├── App.css
├── App.tsx
├── index.css
├── main.tsx
├── vite-env.d.ts
└── assets/
└── react.svg
前提条件
本記事の手順を進めるには、以下が必要です。
- Node.js（v20.19.0以上） がインストール済みであること
- Git がインストール済みで、GitHubにリポジトリを作成できること
それぞれの準備がまだの方は、以下の記事を参考にしてください。
Viteとは
Vite（ヴィート） は、フロントエンド開発向けのビルドツールです。フランス語で「速い」を意味するとおり、開発サーバーの起動やホットリロード（HMR）が非常に高速なのが特徴です。
以前はReactプロジェクトの作成に create-react-app がよく使われていましたが、現在はViteが主流になっています。本記事でもViteを使ってプロジェクトを作成します。
プロジェクトの作成手順
作業フォルダの準備
まず、プロジェクト用のフォルダを作成し、移動します。
user01@mypc ~ $ mkdir todoApp
user01@mypc ~ $ cd todoApp/
Viteプロジェクトの作成
以下のコマンドを実行します。
user01@mypc ~/todoApp $ npm create vite@latest . -- --template react-ts
テンプレートに react-ts（React + TypeScript）を選択したのは、筆者がReactと並行してTypeScriptも学習中だからです。JavaScriptのみで進めたい場合は react を指定すればOKです。
このコマンドのポイントを補足します。
| 部分 | 意味 |
|---|---|
npm create vite@latest | 最新版のViteプロジェクト作成ツールを自動でダウンロード・実行する |
. | 現在のフォルダ（todoApp）直下にプロジェクトを展開する |
-- | これ以降のオプションを npm ではなく vite 側に渡す区切り |
--template react-ts | React + TypeScript のテンプレートを使用する |
💡 疑問ポイント：Viteを事前にインストールする必要は？
不要です。
npm create vite@latestは、Viteのプロジェクト作成ツールを一時的にダウンロードして実行してくれるので、事前のグローバルインストールは必要ありません。
💡 疑問ポイント：
--は何のためにある？
--がないと、--template react-tsがnpm create側のオプションとして解釈されてしまいます。--を挟むことで、それ以降のオプションを Vite 側に正しく渡せるようになります。
対話プロンプトへの応答
コマンドを実行すると、いくつかの質問が表示されます。
① パッケージのインストール確認
Need to install the following packages:
create-vite@8.2.0
Ok to proceed? (y)
y を入力してEnterを押します。
② フォルダが空でない場合の確認
もし作業フォルダにファイルが既にある場合（READMEやLICENSEなど）、以下が表示されます。
Current directory is not empty. Please choose how to proceed:
「Ignore files and continue」を選択してください。
③ パッケージ名の入力
Package name:
todo-app と入力します。
⚠️ つまずきポイント：パッケージ名にはルールがある
筆者は最初
todoAppと入力してInvalid package.json nameエラーになりました。npm のパッケージ名には大文字が使えません。todo-appのように小文字とハイフンで指定しましょう。
④ rolldown-viteの使用確認
Use rolldown-vite (Experimental)?:
No を選択します。これは実験的機能なので、学習目的では不要です。
⑤ インストールと起動の確認
Install with npm and start now?
Yes を選択すると、依存パッケージのインストールと開発サーバーの起動が自動で行われます。
動作確認
すべてが完了すると、以下のように表示されます。
VITE v7.3.1 ready in 404 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
ブラウザで http://localhost:5173/ を開いてください。Vite + React のロゴと「count is 0」ボタンが表示されれば成功です。
ボタンをクリックするとカウントが増えていきます。これがReactの状態管理（state）の基本的な動作です。
開発サーバーを停止するには、ターミナルで Ctrl + C を押します。
まとめ
この記事では、Vite + React + TypeScript のプロジェクトを作成し、開発サーバーで動作確認するところまでを行いました。
やったことを振り返ると以下のとおりです。
npm create vite@latestでプロジェクトを作成した- パッケージ名には小文字とハイフンを使うルールを知った
--オプションの役割を理解した- 開発サーバーの起動と停止を体験した
次のステップとしては、Reactのコンポーネントやstateについて、チュートリアルを進めながら学んでいく予定です。
それでは、また別の記事でお会いしましょう。最後まで読んでいただきありがとうございました！
これまでの学習内容
この記事で紹介した内容の他にも学習した内容を記事にしています。是非、ご覧になってみて下さい。
-
-
Vite React TypeScript setupでTodoAppの開発環境を構築する
Vite React TypeScript setup の手順を、実際のハンズオンを通じてステップバイステップで解説します。この記事は、筆者がReact学習の第一歩として環境構築を行った際の体験をもと ...
続きを見る
-
-
React入門：JSX・コンポーネント・Propsを理解する【他言語経験者向け】
Reactの学習を始めて、JSXの書き方、関数コンポーネント、Propsの仕組みまで一通り手を動かしてみました。この記事では、react jsx propsの基本を他言語経験者の視点で整理していきます ...
続きを見る
-
-
React Event Handling入門：クリック・入力・フォームイベントをハンズオンで学ぶ
React event handlingの基本を、実際にコードを書いて動かしながら学びました。この記事では、クリックイベント、入力イベント、イベントオブジェクト、デフォルト動作の防止まで、ハンズオンで ...
続きを見る
-
-
React useState と useEffect を理解する — 状態管理と副作用の基本
React の useState と useEffect は、コンポーネントの状態管理と副作用処理を担う最も重要な Hook です。この記事では、実際にカウンターやタイマーを作りながら、これらの仕組み ...
続きを見る
-
-
React useContextで学ぶ状態共有 — Props drillingからの脱却
Reactでコンポーネントの階層が深くなると、「親から子へ、子から孫へ」とPropsをバケツリレーのように渡し続ける場面に出会います。これが Props drilling と呼ばれる厄介な問題です。u ...
続きを見る