【2026年最新】3分でVite + React + TypeScript環境構築

はじめに

この記事は、Vite、React、TypeScriptの基本をすでに理解しているものの、環境構築の手順を忘れてしまった際、すぐにコマンドをコピペして開発を始めるための備忘録である。

そのため、各ツールの詳細な解説は省き、必要なコマンドと手順のみを最短で記載している。サクッと環境を立ち上げたい時の辞書として活用してほしい。

最速コピペ用

1. プロジェクトの作成

• ターミナルで環境構築をしたいディレクトリ（この場合 frontend）に移動し、以下のコマンドを実行する

bash

cd frontend
npm create vite@latest . -- --template react-ts && npm install && npm run dev

• コマンド実行後、以下のようにインストールの確認を求められるので、Yesを選択する

• 記載されたURLにブラウザでアクセスする

• 画面にViteとReactのロゴが表示されれば、環境構築および起動は正常に完了している
  

注意
frontend内に既存のファイルがある場合、上書きされる危険性がある。
必ず空のディレクトリ内で実行すること。

---

2.不要なファイル、コードの削除

frontend

/
├─ node_modules
├─ public
│  ├─ favicon.svg
│  └─ icons.svg
├─ src
│  ├─ assets
│  │  ├─ react.svg
│  │  ├─ hero.png
│  │  └─ vite.svg
│  ├─ App.css
│  ├─ App.tsx
│  ├─ index.css
│  └─ main.tsx
├─ .gitignore
├─ eslint.config.js
├─ index.html
├─ package-lock.json
├─ READ.md
├─ tsconfig.app.json
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts

アイコンの削除

• publicディレクトリを全部削除

該当ディレクトリと中身にあるfavicon.svg、icons.svgの合計3ファイルを削除

• assetsディレクトリの中身を全部消去

hero.png、react.svg、vite.svgの合計3ファイルを削除

注意
サーバーを起動したまま実行するとurlはエラーを起こすが、後にコードを削除する時にエラーは解消されるので後回しで大丈夫です🙆

---

コードの削除

• index.cssとApp.cssのコードを全部消去

ファイル自体を削除してもいいですが、後々cssを作ると思うのでここではコードの消去のみを行います

• App.tsxにあるコードを一部削除

  import文合計5行の真ん中にある３行の消去
  
  function Appの中身にあるこの行の削除
  
  returnの中身を全部消去します
  

補足

• APP.tsxは以下のコードをコピーして既存にあるコードを上書きしても🙆

APP.tsx

import { useState } from 'react'
import './App.css'

function App() {
  return(
  )
}

export default App

---

動作確認

先ほどのApp.tsxにHello worldを追加してみましょう

APP.tsx

import { useState } from 'react'
import './App.css'

function App() {
  return(
  <h1>Hello World</h1>
  )
}

export default App

表示されたら環境構築完了です！お疲れ様でした。