React – Vite を使用してプロジェクトを作成する方法

概要

高速なフロントエンド開発ビルドツール Vite を使用して、React プロジェクトを作成する方法について解説します。

create-react-app との違い

以前は、React のプロジェクト作成の手順として create-react-app が使用されてきましたが、2023年に公式より使用が非推奨となりました。React 公式ページのプロジェクト作成方法の紹介ページ React プロジェクトを始める – React では、Next.js などフレームワークを併用して使うやり方しか紹介されていません。実用的なプロジェクトを作成する場合、最初からフレームワークを使う前提でプロジェクトを作成するのがよいのは確かですが、React の勉強のためにプロジェクトを作成する場合、他の要素は含まれていないほうがシンプルです。 今回は Vite を使用して React のみを使用したプロジェクトを作成する方法を紹介します。

プロジェクトの作成手順

以下のコマンドを実行します。 フレームワークは React、言語は TypeScript + SWC を選択します。 SWC は、JavaScript や TypeScript の高速なトランスパイルを提供するツールです。Babel など他のコンパイラと比較して、高速にコンパイルが行えるため、使用を推奨します。

npm create vite@latest
√ Project name: ... react-vite-example
√ Select a framework: » React
√ Select a variant: » TypeScript + SWC

プロジェクトを作成できたら、npm run dev で起動します。

cd react-vite-example
npm run dev

ブラウザに React の画面が表示されれば、成功です。

プロジェクトの構成

npm create vite@latest で作成されたディレクトリ構成は以下のようになっています。

react-vite-example
├── index.html
├── package-lock.json
├── package.json
├── public
├── README.md
├── src
|  └── assets
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

各ディレクトリ、ファイルは以下の内容です。

• index.html: エントリポイントとなる HTML ファイル
• public: 実行時に参照する静的ファイルを配置するディレクトリ
• src: アプリ本体のソースコードを配置するディレクトリ
• src/assets: コンパイル時に同梱される静的ファイルを配置するディレクトリ
• tsconfig.json: src 以下の Typescript ファイルをコンパイルする際の設定
• tsconfig.node.json: Vite の設定ファイル (vite.config.ts) をコンパイルする際の設定
• vite.config.ts: Vite の設定

次に package.json を確認します。

{
  "name": "react-vite-example",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
  }
}

npm run <コマンド> で実行できるコマンドは、以下の種類が定義されています。

• dev: 開発サーバーを起動
• build: 本番用のビルドを実行
• lint: Lint を実行
• preview: ビルドして生成されたファイルを確認するためのサーバーを起動

ライブラリは、以下のものが確認できます。

• react、react-dom: React
• @vitejs/plugin-react-swc: SWC で React コンポーネントをコンパイルするための Vite プラグイン
• eslint: ESLint
• eslint-plugin-react-hooks: React の Hook の記述を検証するための ESLint プラグイン (フックのルール – React)
• eslint-plugin-react-refresh: React の Fast Refresh が行えるコードを記述しているかを検証するための ESLint プラグイン
• typescript: Typescript
• vite: Vite