React で本格的な開発を始めるなら、最初の環境構築が何より大切です。 型安全性を担保する TypeScript、超高速なビルドツール Vite、コード品質を守る ESLint、そしてフォーマットを統一する Prettier――これら 4 つを組み合わせることで、チーム開発でも個人開発でも安心して使える強固な基盤が手に入ります。

本記事では、React + Vite + TypeScript + ESLint + Prettier の環境を ゼロから順を追って セットアップする手順をご紹介します。 初めての方でも迷わず進められるよう、各ステップを丁寧に解説しますね。

背景

モダン React 開発で求められる要素

近年の React 開発では、単に動くコードを書くだけでなく、保守性・品質・開発速度 のすべてを高める環境が求められます。 そのために以下の要素が不可欠になっています。

#	要素	役割
1	TypeScript	型チェックによるバグの早期発見、IDE の補完強化
2	Vite	高速な開発サーバー起動とビルド、ES モジュールベースの HMR
3	ESLint	コーディング規約の自動チェック、潜在的なバグの検出
4	Prettier	コードフォーマットの自動統一、レビューの効率化

これらを組み合わせることで、型安全で高速、かつ品質が保たれた 開発環境を実現できます。

Vite が選ばれる理由

従来の Create React App (CRA) に代わり、Vite が急速に普及している背景には以下の理由があります。

mermaidCopy codeflowchart LR
  dev["開発者"] -->|コード変更| vite["Vite<br/>(ES modules)"]
  vite -->|即座に HMR| browser["ブラウザ"]
  vite -.->|ビルド時のみ| rollup["Rollup<br/>(バンドル)"]
  rollup -.->|最適化| prod["本番環境"]

図で理解できる要点:

• Vite は開発時にバンドルせず ES modules を直接ブラウザに送る
• 変更部分だけを HMR で更新するため、起動・リロードが圧倒的に速い
• 本番ビルドは Rollup で最適化される

課題

環境構築で陥りがちな問題

React の開発環境を構築する際、以下のような課題に直面することがよくあります。

#	課題	影響
1	設定ファイルの競合	ESLint と Prettier のルールが衝突してエラーが消えない
2	TypeScript の型エラー	ビルドは通るのに VSCode でエラーが出る、またはその逆
3	パッケージバージョン不整合	プラグイン同士の依存関係でインストールが失敗する
4	設定の複雑さ	どの設定がどこに影響するか分からず、トラブルシューティングが困難

これらの問題を回避するには、正しい順序で、必要最小限の設定を段階的に 行うことが重要です。

ESLint と Prettier の競合問題

特に厄介なのが、ESLint と Prettier の両方がフォーマットに関するルールを持っている場合の競合です。

mermaidCopy codeflowchart TB
  code["コード保存"]
  code --> eslint["ESLint<br/>(フォーマットルール)"]
  code --> prettier["Prettier<br/>(フォーマットルール)"]
  eslint --> conflict["ルール競合<br/>エラー連発"]
  prettier --> conflict
  conflict --> fix["eslint-config-prettier で解決"]
  fix --> result["Prettier が整形<br/>ESLint は品質チェックのみ"]

図で理解できる要点:

• ESLint と Prettier がそれぞれフォーマットルールを持つと衝突する
• eslint-config-prettier で ESLint のフォーマット関連ルールを無効化
• 役割分担 = 整形、ESLint = コード品質チェック

解決策

セットアップの全体フロー

以下の手順で、競合なく動作する環境を構築できます。

#	ステップ	概要
1	Vite プロジェクト作成	React + TypeScript テンプレートで初期化
2	依存パッケージインストール	ESLint、Prettier、各種プラグインを追加
3	ESLint 設定	TypeScript と React に対応したルールを設定
4	Prettier 設定	フォーマットルールを定義、ESLint との競合を回避
5	VSCode 設定	保存時の自動整形を有効化
6	動作確認	実際にコードを書いて、すべてが連携動作することを確認

それでは、各ステップを詳しく見ていきましょう。

技術スタック構成

最終的な構成は以下のようになります。

mermaidCopy codeflowchart TB
  subgraph frontend["フロントエンド"]
    react["React 18"]
    ts["TypeScript"]
  end

  subgraph build["ビルドツール"]
    vite["Vite"]
  end

  subgraph quality["品質管理"]
    eslint["ESLint"]
    prettier["Prettier"]
  end

  react --> vite
  ts --> vite
  vite --> eslint
  vite --> prettier
  eslint -.->|競合回避| prettier

図で理解できる要点:

• React と TypeScript が Vite でビルドされる
• ESLint と Prettier が品質を担保
• ESLint と Prettier は競合回避の設定で連携

具体例

ステップ 1 プロジェクトの作成

まずは Vite の公式テンプレートを使って、React + TypeScript プロジェクトを作成します。

bashCopy codeyarn create vite my-react-app --template react-ts

このコマンドで、my-react-app フォルダに必要なファイルが生成されますよ。

プロジェクトディレクトリに移動し、依存パッケージをインストールしましょう。

bashCopy codecd my-react-app
yarn install

開発サーバーを起動して、正常に動作するか確認します。

bashCopy codeyarn dev

ブラウザで http:​/​​/​localhost:5173 を開くと、Vite のデフォルト画面が表示されるはずです。

ステップ 2 と Prettier のインストール

次に、コード品質管理に必要なパッケージをまとめてインストールします。

bashCopy codeyarn add -D eslint prettier

ESLint と Prettier の本体をインストールしました。

続いて、TypeScript と React に対応したプラグインを追加します。

bashCopy codeyarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

• @typescript-eslint​/​parser が TypeScript コードを解析できるようにする
• @typescript-eslint​/​eslint-plugin 向けのルールセット

React 用のプラグインもインストールしましょう。

bashCopy codeyarn add -D eslint-plugin-react eslint-plugin-react-hooks

• eslint-plugin-react の推奨ルール
• eslint-plugin-react-hooks Hooks の使用ルール

最後に、ESLint と Prettier の競合を防ぐプラグインを追加します。

bashCopy codeyarn add -D eslint-config-prettier eslint-plugin-prettier

• eslint-config-prettier のフォーマット関連ルールを無効化
• eslint-plugin-prettier を ESLint のルールとして実行

ステップ 3 の設定ファイル作成

プロジェクトルートに .eslintrc.json ファイルを作成し、以下の設定を記述します。

jsonCopy code{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  }
}

この設定により、ESLint が TypeScript と React を正しく解析できるようになります。

次に、プラグインとルールを指定します。

jsonCopy code{
  "plugins": [
    "react",
    "react-hooks",
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": "error"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

各設定の意味:

• react​/​react-in-jsx-scope 17 以降は import React が不要なのでオフ
• prettier​/​prettier のルール違反をエラーとして扱う
• version: "detect":インストールされている React のバージョンを自動検出

ステップ 4 の設定ファイル作成

プロジェクトルートに .prettierrc.json ファイルを作成します。

jsonCopy code{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

各設定の意味:

• semi:文末にセミコロンを付ける
• singleQuote:シングルクォートを使用
• tabWidth:インデント幅を 2 スペース
• trailingComma:末尾カンマを ES5 形式で付ける
• printWidth:1 行の最大文字数を 80 文字

フォーマット対象外のファイルを指定するため、.prettierignore も作成しましょう。

textCopy codenode_modules
dist
build
.vite

これで、ビルド成果物やライブラリファイルがフォーマット対象外になります。

ステップ 5.json にスクリプト追加

コマンドで簡単に実行できるよう、package.json にスクリプトを追加します。

jsonCopy code{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .ts,.tsx",
    "lint:fix": "eslint . --ext .ts,.tsx --fix",
    "format": "prettier --write \"src/**/*.{ts,tsx,json,css,md}\""
  }
}

各スクリプトの役割:

• lint でコードチェック
• lint:fix で自動修正可能な問題を修正
• format で全ファイルをフォーマット

実行例を見てみましょう。

bashCopy codeyarn lint

これで、プロジェクト全体のコード品質をチェックできます。

自動修正を行う場合は以下のコマンドです。

bashCopy codeyarn lint:fix

すべてのファイルをフォーマットするには次のコマンドを使います。

bashCopy codeyarn format

ステップ 6 の設定

VSCode を使っている場合、保存時に自動でフォーマットされるよう設定すると便利です。

プロジェクトルートに .vscode​/​settings.json ファイルを作成します。

jsonCopy code{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

各設定の意味:

• formatOnSave:ファイル保存時に自動フォーマット
• defaultFormatter を標準フォーマッターに指定
• source.fixAll.eslint:保存時に ESLint の自動修正を実行
• eslint.validate を適用するファイルタイプ

この設定により、ファイルを保存するだけで Prettier によるフォーマットと ESLint による修正が自動実行されますよ。

ステップ 7:動作確認

実際にコードを書いて、すべてが正しく動作するか確認しましょう。

src​/​App.tsx を開き、意図的にフォーマットを崩したコードを書いてみます。

typescriptCopy code// フォーマット前
import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        count is {count}
      </button>
    </div>
  );
}

export default App;

このコードを保存すると、自動的に以下のように整形されるはずです。

typescriptCopy code// フォーマット後
import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        count is {count}
      </button>
    </div>
  );
}

export default App;

確認ポイント:

• インデントが揃っている
• セミコロンが付いている
• スペースが適切に挿入されている
• シングルクォートになっている

セットアップ完了後のフロー

以下の図は、開発時にどのように各ツールが連携するかを示しています。

mermaidCopy codeflowchart LR
  write["コード記述"] --> save["ファイル保存"]
  save --> prettier_fmt["Prettier<br/>(自動整形)"]
  save --> eslint_fix["ESLint<br/>(自動修正)"]
  prettier_fmt --> result["整形済みコード"]
  eslint_fix --> result
  result --> error{エラー?}
  error -->|あり| show["エディタに表示"]
  error -->|なし| done["完了"]

図で理解できる要点:

• ファイル保存時に Prettier と ESLint が自動実行される
• 自動修正できないエラーはエディタに表示される
• すべてが自動化されるため、開発者はコードに集中できる

トラブルシューティング

よくあるエラーとその解決方法をまとめました。

エラー 1:Parsing error: Cannot read file 'tsconfig.json'

エラーメッセージ:

textCopy codeParsing error: Cannot read file 'tsconfig.json'

発生条件: .eslintrc.json の parserOptions に project を指定したが、tsconfig.json が見つからない

解決方法:

1. tsconfig.json がプロジェクトルートに存在するか確認
2. .eslintrc.json から parserOptions.project の設定を削除（基本的な型チェックには不要）

エラー 2:Error: Failed to load plugin 'prettier'

エラーメッセージ:

textCopy codeError: Failed to load plugin 'prettier' declared in '.eslintrc.json'

発生条件: eslint-plugin-prettier がインストールされていない

解決方法:

bashCopy codeyarn add -D eslint-plugin-prettier

必要なプラグインを再インストールします。

エラー 3:Delete 'cr' prettier​/​prettier

エラーメッセージ:

textCopy code[error] Delete 'cr' prettier/prettier

発生条件: Windows 環境で改行コードが CRLF になっている

解決方法:

.prettierrc.json に以下を追加します。

jsonCopy code{
  "endOfLine": "auto"
}

これにより、改行コードが環境に応じて自動設定されます。

CI/CD での活用

GitHub Actions を使って、プルリクエスト時に自動チェックを実行する設定例です。

.github​/​workflows​/​lint.yml を作成します。

yamlCopy codename: Lint

on:
  pull_request:
    branches: [main]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Run ESLint
        run: yarn lint
      - name: Run Prettier check
        run: yarn prettier --check "src/**/*.{ts,tsx,json,css,md}"

ワークフローの流れ:

• プルリクエスト作成時に自動実行
• Node.js 環境をセットアップ
• 依存パッケージをインストール
• ESLint と Prettier でコードチェック
• エラーがあればプルリクエストをブロック

これにより、マージ前にコード品質を担保できます。

まとめ

本記事では、Vite + TypeScript + ESLint + Prettier を組み合わせた React 開発環境のセットアップ方法をご紹介しました。

構築した環境のメリット:

• 型安全性 により、開発時にバグを早期発見できる
• 高速開発 の HMR により、変更が即座にブラウザに反映される
• コード品質 により、潜在的なバグやアンチパターンを検出できる
• 統一フォーマット により、チーム全体でコードスタイルが統一される
• 自動化:保存時に自動整形・自動修正されるため、手動作業が不要

セットアップの要点:

• 正しい順序でパッケージをインストールすることで、競合を回避できます
• ESLint と Prettier の役割分担を明確にすることが重要です
• VSCode の設定により、保存時の自動実行で開発効率が大幅に向上します

この環境を基盤にすれば、小規模な個人プロジェクトから大規模なチーム開発まで、安心して React アプリケーションを構築できますよ。 ぜひご自身のプロジェクトでも試してみてくださいね。

関連リンク

• Vite 公式ドキュメント
• TypeScript 公式サイト
• ESLint 公式ドキュメント
• Prettier 公式ドキュメント
• React 公式ドキュメント
• @typescript-eslint
• eslint-plugin-react
• eslint-config-prettier