◾️はじめに

　UIを調査している時に、
Vite（ヴィート）を知ったのでメモ。

【１】Vite

* フロントエンド開発におけるビルドツール

cf. Vite = フランス語で「素早い」 (/vit/ ヴィート)

https://ja.vite.dev

【２】サポートしているフレームワーク

* 主要なフレームワークは、サポートされている

https://ja.vite.dev/guide/#trying-vite-online

* vue / vue-ts
* react / react-ts

などなど

【３】環境設定

１）前提条件

* Node/NPM をインストールされていること

Node.js ～環境構築編～
https://dk521123.hatenablog.com/entry/2021/11/06/000000

２）プロジェクト作成

npm create vite@latest

# 以下を入力・選択していく
# Project name: (プロジェクト名)
#  => demo-vite
# Select a framework: (フレームワーク選択)
#  => React
# Select a variant: (言語選択)
#  => TypeScript
#  Use rolldown-vite (Experimental)?:
#  => No

https://ja.vite.dev/guide/rolldown

# Install with npm and start now?
#  => Yes

# しばらくすると、、、
# VITE v7.1.9  ready in 283 ms
#
#  ➜  Local:   http://localhost:5173/

主なファイル構成

demo-vite/
├── index.html
├── vite.config.ts（設定ファイル）
├── src/
│   └── App.tsx
│   └── main.tsx（エントリーポイント）

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>job-info-frontend</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

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>,
)

App.tsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

【４】Tips

１）主なコマンド

# プロジェクト作成（例: React）
npm create vite@latest my-app -- --template react

# 開発サーバー起動
npm run dev

# 本番ビルド
npm run build

# ローカルでビルド確認（static serverで表示）
npm run preview

２）ポートを変更するには

方法[1] package.json で変更する

# "dev": "vite --port 3000" で指定
{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port 3000",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

方法[2] vite.config.ts（.js）で設定する

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173, // ここでポートを指定
  },
});