はじめに

この記事は、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

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