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"
  }
}

コマンドは以下の種類が定義されています。

• 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