こんにちは。開発環境の深淵へようこそ。
多くのエンジニアにとって、Viteは「爆速でビルドしてくれる便利なブラックボックス」かもしれません。しかし、ビルドパイプラインは単なる変換器ではありません。それは、あなたのソースコードが実戦配備されるまでの「最後の防衛線」であり、ここをハックすることで、CI/CDの常識を覆すような自動化を実現できます。
今日は、ViteのプラグインAPIを叩き、ビルド完了の瞬間をトリガーにして「現実世界のタスク」を自動実行させるためのアーキテクチャを伝授します。
—
1. なぜ「ビルド完了」をハックするのか？
通常、ビルドツールは「ファイルを変換して出力する」ことしか考えていません。しかし、大規模なプロダクトでは、ビルド後に次のような作業が発生します。
- 動的ドキュメント生成: `package.json`のバージョン番号を読み取り、READMEやリリースノートを自動更新する。
- メタデータのエクスポート: ビルドされた全アセットのハッシュ値をJSONとして書き出し、APIサーバーやCDN側で即座に参照できるようにする。
- デプロイ通知のキック: ビルド完了を検知し、SlackやDiscordに「デプロイ準備完了」の通知を送る。
これらを人間が手動で行うのは時間の浪費であり、ミスを誘発します。ViteのプラグインAPIを使えば、ビルドパイプラインの深層部分に、これらの「付加価値」を組み込むことができるのです。
—
2. Viteプラグインの「心臓部」を理解する
Viteのプラグインは、実は単なるJavaScriptのオブジェクトです。重要なのは、Viteが提供する「ライフサイクルフック」の理解です。
- `transform`: ファイルが読み込まれるたびに呼び出される。コードの置換や変換を行う場所。
- `buildEnd`: 全てのビルド処理が完了した直後に呼び出される。「何かを終わらせた後」に動くので、外部連携には最適です。
今回は、ビルドが完了した瞬間に「ビルド成功のログと、生成されたファイルをカタログ化したJSONを吐き出す」という、実戦的なプラグインを作成します。
—
3. 実践：カスタムプラグイン「Build-Reporter」の構築
では、実際に手を動かしてみましょう。まずはプロジェクトのルートに `vite-plugin-reporter.js` を作成します。
// vite-plugin-reporter.js
import fs from ‘fs’;
export default function buildReporterPlugin() {
return {
name: ‘vite-plugin-reporter’, // プラグインを識別する一意の名前
// buildEndフック: ビルド終了時に実行される
buildEnd(error) {
if (error) {
console.error(‘ビルド失敗！’, error);
return;
}
console.log(‘\n🚀 ビルド完了！事後処理を開始します…’);
// 1. レポート用のデータを作成
const report = {
timestamp: new Date().toISOString(),
status: ‘SUCCESS’,
message: ‘デプロイ準備が整いました。’
};
// 2. build-manifest.json を出力
fs.writeFileSync(‘build-manifest.json’, JSON.stringify(report, null, 2));
console.log(‘✅ build-manifest.json を生成しました。’);
}
};
}
設定ファイルへの組み込み
`vite.config.js` を開き、このプラグインを読み込ませます。
import { defineConfig } from ‘vite’;
import buildReporterPlugin from ‘./vite-plugin-reporter.js’;
export default defineConfig({
plugins: [
buildReporterPlugin() // 自作プラグインを登録
]
});
—
4. 動作確認：ビルドパイプラインが「意志」を持った瞬間
ターミナルで `npm run build` を実行してください。
$ npm run build
vite v5.x.x building for production…
…
dist/index.html 0.50 kB │ gzip: 0.30 kB
…
🚀 ビルド完了！事後処理を開始します…
✅ build-manifest.json を生成しました。
見てください。ビルドプロセスが終了した直後に、あなたの書いたロジックが走り、ローカルディレクトリに `build-manifest.json` が生成されました。
この知見がもたらす未来
この仕組みを応用すれば、`buildEnd` の中で `child_process.execSync(‘scp -r dist/ user@server:/var/www’)` を叩くことで、Viteのビルド完了と同時にサーバーへデプロイさせるといったことも可能です。（※もちろん本来はCI/CDで行うべきですが、小規模開発やプロトタイピングでは驚異的なスピードを生みます）
—
最後に：アーキテクトからのアドバイス
プラグイン開発で最も大切なのは、「ビルドプロセスを汚染しないこと」です。
- 重い処理は非同期で行うか、`buildEnd` ではなくビルド後に別途スクリプトを回すことを検討してください。
- エラーハンドリングを怠らないでください。プラグインの失敗がビルド全体の停止を招くため、必ず `try-catch` で囲むのが現場の定石です。
Viteのプラグインを一度書けるようになると、IDEでコードを書いている最中から、デプロイ後の世界までを「一つのパイプライン」として捉えられるようになります。これは、単なるコーダーから、システム全体を設計するエンジニアへと進化する第一歩です。
さあ、あなたのパイプラインに、あなただけの「魔法」を組み込んでみてください。毎日のルーチンワークが、驚くほど楽になるはずですよ。