「コーポレートサイトの問い合わせフォームが いつの間にか送信エラーになっていた」「納品後に JavaScript の読み込み順で表示崩れ が発生した」「外部 API の仕様変更 で連携機能が止まっていた」――受託開発の保守で、運用中に静かに壊れている箇所 を拾いきれない悩みは尽きません。
2026 年 4 月、Bun が CLI から直接ヘッドレスブラウザを操作できる Headless Browser Automation を新機能として搭載しました（Publickey）。Playwright / Puppeteer を使うには Node プロジェクトを組む必要があったのが、Bun CLI 単体で E2E 自動化が走る ようになります。
本記事では、受託開発・運用保守の現場にどう組み込むかを整理します。
Bun Headless Browser Automation とは
Bun は JavaScript ランタイム / バンドラー / パッケージマネージャーが一体化した高速ツールチェーンです。今回追加されたのは、そこに Chromium ベースのヘッドレスブラウザ制御機能が組み込まれた形です。
ポイントは次の 3 点。
- 追加依存なし。Bun のバイナリ単体で動作（Playwright のような後追いインストールが不要）
- 起動が速い。Node + Playwright 比で初期化時間が短く、CI の実行時間短縮に効く
- CLI ワンライナーで簡単に叩ける。シェルスクリプトや cron に乗せやすい
Playwright / Puppeteer との比較
| 観点 | Bun Headless | Playwright | Puppeteer |
|---|---|---|---|
| 初期セットアップ | ◎（Bun 入れるだけ） | △（ブラウザバイナリDL必要） | △（同左） |
| 対応ブラウザ | Chromium | Chromium / Firefox / WebKit | Chromium 中心 |
| テストランナー | 軽量（Bun test） | 充実（Playwright Test） | 外部（Jest等）必要 |
| 並列実行 | ○ | ◎ | ○ |
| 実行速度 | ◎ | ○ | ○ |
| エコシステム | 成長中 | 成熟 | 成熟 |
| 向く用途 | 監視・軽量E2E | 本格E2E / クロスブラウザ | スクレイピング |
“Playwright を捨てて Bun に全振り” ではなく、“軽量用途を Bun に寄せる” 使い分けが現実解です。
受託開発における 4 つの活用シーン
シーン 1：納品後の定期監視（Synthetic Monitoring）
「本番の問い合わせフォームに毎朝 9:00 にテスト送信して通れば OK」のようなSynthetic 監視は、受託開発の保守で頻出します。従来は Pingdom などの外部サービス、または自前の Playwright スクリプトが選択肢でしたが、Bun で書いて Cloudflare Workers / GitHub Actions で動かすほうが圧倒的に軽量です。
// form-check.ts
import { chromium } from "bun:browser"; // 仮のAPI想定
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto("https://example.com/contact/");
await page.fill("#name", "Synthetic Test");
await page.fill("#email", "[email protected]");
await page.fill("#message", "Auto check");
await page.click("#submit");
await page.waitForSelector(".thank-you", { timeout: 10000 });
console.log("✅ OK");
await browser.close();cron や GitHub Actions から bun run form-check.ts を叩くだけです。
シーン 2：軽量 E2E スモークテスト
大規模案件には Playwright を採用しつつ、ランディングページ単体や小規模コーポレートでは Bun の軽量 E2E が向きます。
- トップページ描画 → 5 秒以内
/contact/フォーム表示 → 3 秒以内/media/記事一覧のリンク切れチェック
といったスモークテストを CI で毎回回します。Astro / Next.js のフロント高速化比較 で触れたパフォーマンス指標と組み合わせると、速度リグレッション検知まで一気通貫で行えます。
シーン 3：Visual Regression（画面崩れ検知）
納品時にスクリーンショットを保存し、保守時に差分を比較する運用です。
bun run snapshot.ts --url https://example.com/ --out baseline.png
# ... 数週間後
bun run snapshot.ts --url https://example.com/ --out current.png
bun run diff.ts baseline.png current.pngブラウザ更新やフォント変更による意図せぬ表示崩れを、運用フェーズで早期検知できます。
シーン 4：外部連携のセルフチェック
HubSpot / Salesforce / Google Forms などの外部 SaaS の UI が変わった 際、連携している埋め込みフォームが壊れるケースがあります。外部フォーム経由の送信確認を毎日 1 回走らせると、障害を先回りで検知できます。
お問い合わせフォーム最適化（EFO） で整理したコンバージョン設計は、監視が入って初めて維持できる というのが実務の真理です。
導入判断フローチャート
Q1: 対象プロジェクトのブラウザ要件は？
├─ Chromium だけで OK → Q2 へ
└─ Firefox / Safari も必要 → Playwright
Q2: テストケース数は？
├─ 50 件未満 → Bun Headless
└─ 50 件以上 → Playwright（Test Runner 込み）
Q3: 実行頻度は？
├─ 毎コミット → Playwright（並列実行の恩恵大）
└─ 日次〜週次の監視 → Bun Headless要するに、「小規模・定期監視・高速起動が欲しい用途」が Bun の最適解です。
受託開発に組み込むステップ
Step 1：監視スクリプトを “納品物” に含める
「E2E テストと Synthetic 監視を納品物に含める」ことを提案書に明記します。追加コストに見えて、顧客にとっては運用保守コストの先払いとして説明しやすい投資です。
Step 2：CI / cron / GitHub Actions への組み込み
- コミット毎：スモーク E2E（Bun Headless）
- 毎日 09:00：本番フォーム送信テスト
- 毎週月曜：Visual Regression 比較
Claude Code で自動化ワークフローを構築する方法 と組み合わせて、監視失敗時の一次切り分けを AI に任せる構成も現実的になってきました。
Step 3：結果通知と SLA の可視化
Slack / Discord / メールに通知し、「月間の Synthetic 監視成功率」 をダッシュボードで見せます。保守契約更新時の “価値の見える化” として強力です。
Step 4：顧客引き継ぎ時のドキュメント化
保守を内製化するタイミングで、Bun 1 本で監視が回る状態 はそのまま引き継ぎやすい構成です。Playwright 一式を渡すより学習コストが低く、“引き継ぎやすい納品物” は受注に直結します。
落とし穴と注意点
落とし穴 1：動的 JS に依存する SPA での待機戦略
Cloudflare の Bot 対策や reCAPTCHA v3 を挟むサイトでは、特定のヘッダ／Cookie がないとアクセス拒否されることがあります。自サイト監視では IP をホワイトリスト化するなど、事前調整が必須です。
落とし穴 2：Bun の API 安定性
Bun は進化が速く、ヘッドレスブラウザ API も短期で変わる可能性があります。バージョン固定と Renovate / Dependabot での自動 PR が必須です。
落とし穴 3：Synthetic のログイン状態管理
ログイン後の画面を監視する場合、テスト用アカウント を事前に作り、2 要素認証を TOTP で自動入力 する仕組みが必要です。個人アカウントの認証情報を使い回さないこと。
まとめ ― “壊れていないことを毎日確認する” 文化を標準装備に
Bun Headless Browser Automation は、Synthetic 監視と軽量 E2E のハードルを劇的に下げます。受託開発・内製支援で押さえるべきは次の 3 点：
- 大規模案件は Playwright、軽量監視は Bun と使い分ける
- 納品物に “監視スクリプト” を含める提案で運用品質を担保する
- Synthetic 監視の結果をダッシュボード化して保守契約の価値を可視化
弊社 GleamHub では、受託開発の納品物に Synthetic 監視・Visual Regression・スモーク E2E を標準装備するテンプレートを提供しています。既存サイトに後追いで監視を入れる相談（2 週間のセットアップ支援）、保守契約の”監視込み”プランへの切り替え相談までご対応可能です。「壊れていないことを毎朝確認する」運用を、コストを抑えて始めたい現場に特におすすめです。
