ViteのDev Serverを「掌握」せよ：Custom Middlewareによるフロントエンド開発の高速化戦略
フロントエンドエンジニア諸君。バックエンドのAPI待ちで「作業が止まる」という非効率な時間を、まだ許容しているのか？
開発環境において、Viteの真価は単なる「高速なビルド」にあるのではない。`configureServer`という名の「Dev Serverの深層」をいかに操るか、これこそがプロジェクトの生産性を決定づけるアーキテクトの腕の見せ所だ。
今日は、Viteの内部に直接介入し、APIスタブから認証フローのシミュレートまでをローカルで完結させる「Dev Serverハック」を伝授する。
—
1. なぜ `configureServer` なのか？
ViteのDev Serverは内部で [Connect](https://github.com/senchalabs/connect) というNode.jsのミドルウェアフレームワークを駆動している。`vite.config.ts` の `configureServer` フックを利用するということは、ブラウザと本来のサーバーの間に「プロキシ層」を自作することに他ならない。
これを使えば、バックエンドの未完成なエンドポイントを待つ必要はない。フロントエンドだけで、完全な状態をエミュレートできるのだ。
実践：動的JSONスタブサーバーの構築
以下は、`src/mocks` 以下のJSONファイルをAPIエンドポイントとしてマッピングする実装例だ。
// vite.config.ts
import { Plugin } from ‘vite’;
import fs from ‘fs’;
import path from ‘path’;
export default {
plugins: [{
name: ‘custom-api-stub’,
configureServer(server) {
// 全てのリクエストをインターセプトするミドルウェア
server.middlewares.use((req, res, next) => {
const mockPath = req.url?.replace(‘/api’, ‘/mocks’);
const fullPath = path.resolve(__dirname, `src${mockPath}.json`);
// 特定のAPIパスのみインターセプト
if (req.url?.startsWith(‘/api/v1/’)) {
if (fs.existsSync(fullPath)) {
const data = fs.readFileSync(fullPath, ‘utf-8’);
res.setHeader(‘Content-Type’, ‘application/json’);
res.end(data); // ファイルを直接レスポンスとして流し込む
return;
}
}
next(); // 該当しなければ通常の処理へ
});
}
}]
};
これにより、バックエンドエンジニアがDB設計で苦戦している間も、フロントエンドは「理想的なレスポンスデータ」を元にコンポーネントを完成させることができる。
—
2. 認証フローをフロントエンドだけで完結させる
ログインAPIがまだ完成していない？ そんなものは `configureServer` でJWTトークンを発行するモックを書いてしまえばいい。
ローカル認証ミドルウェアの設計
server.middlewares.use((req, res, next) => {
if (req.url === ‘/api/login’ && req.method === ‘POST’) {
// 擬似的なログイン成功レスポンス
res.writeHead(200, { ‘Content-Type’: ‘application/json’ });
res.end(JSON.stringify({
token: ‘mock-jwt-token-12345’,
user: { name: ‘DevOps Architect’ }
}));
return;
}
next();
});
この手法の最大の利点は、APIの挙動をコードとしてバージョン管理できる点にある。チーム全員が同じモック環境を共有できるため、「ローカルでは動くが本番で落ちる」といった不毛なバグを未然に排除できる。
—
3. 開発効率を「神」の領域へ引き上げるツールと習慣
必須級の神プラグイン：`vite-plugin-checker`
Viteは型チェックをビルドプロセスから分離している。これは速度には貢献するが、型エラーの放置を招く。`vite-plugin-checker` を導入し、Dev Server起動時にTypeScriptのチェックを強制せよ。
// package.json への追加設定
“scripts”: {
“dev”: “vite”,
“build:check”: “tsc –noEmit && vite build”
}
チーム開発の「設定共有」ルール
設定ファイル（`vite.config.ts` や `tailwind.config.js`）は、「魔法の数字」を排除するのが鉄則だ。`env` を活用し、モックのオン・オフを `VITE_USE_MOCK=true` のように環境変数で制御できるようにせよ。
- .env.development: `VITE_API_BASE_URL=/api`
- .env.production: `VITE_API_BASE_URL=https://api.production.com`
—
4. 現場で震えるほど役立つ「アーキテクトの知見」
最後に、一つだけ重要なことを伝える。
「ツールをハックする際は、必ず『将来の剥がしやすさ』を考慮せよ」
今回紹介したミドルウェア設定を `vite.config.ts` に直書きし続けると、肥大化してメンテナンス不能になる。必ずプラグインとして分離し、`vite/plugins/mock-plugin.ts` のようにモジュール化すること。
開発ツールは、「書いたコードが後からいかに簡単に捨てられるか」という設計思想で実装しなければならない。バックエンドが出来上がった瞬間に、一行のスイッチ（環境変数）でモックを無効化できる構造こそが、真のDevOpsだ。
フロントエンド開発は、APIの奴隷ではない。Viteを支配し、開発の主導権を握れ。さあ、ターミナルを開いて実装を開始しよう。