Bun v1.3.12のヘッドレスブラウザ自動化でAIエージェント開発が変わる

益子 竜与志
益子 竜与志
XThreads
最終更新日:2026年04月13日公開日:2026年04月13日

Bun v1.3.12では、JavaScriptランタイム「Bun」にネイティブのヘッドレスブラウザ自動化機能「Bun.WebView」が搭載されました。macOSではシステム内蔵のWKWebViewを使用するため追加インストールが不要で、OSレベルのイベント送出によって本物のユーザー操作と区別できない高い信頼性を実現しています。AnthropicがBunを買収したことにより、Claude Codeとの連携も自然な形で実現しており、AIエージェントによるブラウザ操作の可能性が大きく広がっています。

Bunヘッドレスブラウザ自動化

Bun.WebViewとは何か

2026年4月にリリースされたBun v1.3.12では、JavaScriptランタイム「Bun」にネイティブのヘッドレスブラウザ自動化機能「Bun.WebView」が搭載されました。これまでPuppeteerやPlaywrightなど外部ライブラリに依存していたブラウザ自動化を、Bunランタイム単体で実現できるようになっています。

Bun.WebViewは2種類のバックエンドをサポートしています。

  • WebKit(macOSデフォルト):macOSに標準搭載のWKWebViewを使用します。追加でブラウザをインストールする必要がなく、ゼロ依存で動作します。
  • Chrome(クロスプラットフォーム):Chrome/ChromiumをDevTools Protocol経由で制御します。インストール済みのブラウザを自動検知するか、カスタムパスを指定して利用します。Windows・Linuxでも動作するため、CI環境や多様なOSへの対応が容易です。

Bun.WebViewの最大の特徴は、すべての入力操作がOSレベルのイベントとして送出される点です。これにより、ページ側は本物のユーザー操作とBun.WebView経由の操作を区別できません(isTrusted: trueが返ります)。JavaScriptをページに注入して操作するPlaywrightやPuppeteerとは根本的に異なるアーキテクチャです。

bunwvコマンドの基本的な使い方

Bun.WebViewはCLIコマンド「bunwv」から手軽に試すことができます。ターミナルから以下のコマンドを実行するだけで、ヘッドレスブラウザの操作が始まります。

# ヘッドレスWebViewを起動
bunwv start

# URLへ遷移
bunwv navigate https://bun.sh

# スクリーンショットを取得
bunwv screenshot

# テキストマッチでクリック
bunwv click-text "Docs"

JavaScript APIを使用した場合は、より細かい制御が可能です。以下は基本的なコード例です。

// await usingで自動破棄(Explicit Resource Management対応)
await using view = new Bun.WebView({ width: 800, height: 600 });

// URLへ遷移
await view.navigate("https://bun.sh");

// CSSセレクタでクリック(actionabilityを自動待機)
await view.click("a[href='/docs']");

// スクロール操作(OSレベルのホイールイベント)
await view.scroll(0, 400);

// JavaScriptを評価してページタイトルを取得
const title = await view.evaluate("document.title");

// スクリーンショットをJPEGで取得
const png = await view.screenshot({ format: "jpeg", quality: 90 });
await Bun.write("page.jpg", png);

セレクタベースのメソッドはPlaywrightと同様の「actionability」を自動待機します。対象の要素がDOMに存在し、視覚的に表示されており、アニメーションが完了していて、他の要素に遮蔽されていない状態になるまで処理を待機してから操作が実行されます。これにより、非同期なページ読み込みやSPAのルーティング変更後でも安定した自動操作が可能です。

Bun v1.3.12では同時に「Explicit Resource Management」(usingawait using構文)もサポートされており、await using view = new Bun.WebView()と書くことでスコープを抜けた際にブラウザが自動的に破棄されます。リソース管理の手間が大幅に削減されます。

Bun.WebViewのバックエンド比較

PlaywrightやPuppeteerとの違い

Bun.WebViewは既存のブラウザ自動化ツールと比較して、いくつかの重要な違いがあります。

最も大きな違いは追加の依存関係が不要な点です。PlaywrightやPuppeteerはnpmパッケージとして別途インストールし、さらにブラウザバイナリのダウンロードが必要です。一方、Bun.WebViewはBunランタイムに組み込まれているため、bun install bun一つで完結します。macOSではWKWebViewを使うため、ブラウザのインストールすら不要です。

次に操作レベルの違いです。PlaywrightやPuppeteerはJavaScriptをページに注入してDOM操作やイベントを再現するアプローチを取ります。これに対してBun.WebViewはOSレベルのマウス・キーボードイベントを送出するため、ページ側からは本物のユーザー操作と区別がつきません。

ただし、PlaywrightはHTMLレポートや並列実行、複数ブラウザへの同時テスト、リトライ機能など、エンタープライズ向けのテスト機能が充実しています。テストフレームワークとしての成熟度ではPlaywrightが上回ります。Bun.WebViewはシンプルな自動化スクリプトや、AIエージェントがオンデマンドでブラウザを操作する用途に特に適しています。

Claude Codeとの連携デモ

Bunは2025年12月にAnthropicに買収されました。これにより、Claude CodeとBunのエコシステムは同一の開発組織のもとで進化しており、連携がより自然な形で実現されています。

実際のデモとして、Claude Codeに「Check if bun.sh mentions WebView in the docs.」と自然言語で指示すると、Claude CodeはbunwvコマンドをAIツールとして自律的に実行します。具体的には以下のような流れで動作します。

  1. Claude Codeがbunwv startでヘッドレスブラウザを起動
  2. bunwv navigate https://bun.sh/docsでドキュメントページへ遷移
  3. bunwv screenshotでページの状態を確認
  4. ページ内容を解析して「WebView」に関する記述を確認
  5. 結果をユーザーに返答

このデモが示すのは、AIエージェントがCLIツールを活用してブラウザ操作を完全に自律実行できる、という新しいパラダイムです。これまではMCPサーバーや専用のブラウザ制御APIが必要でしたが、bunwvというシンプルなCLIを通じてAIエージェントがブラウザを道具として使えるようになりました。

Claude CodeとBun.WebViewの連携フロー

AIエージェントによるブラウザ自動操作の活用シナリオ

Bun.WebViewとAIエージェントを組み合わせることで、多様なユースケースが実現できます。

情報収集・Webスクレイピング

JavaScriptで動的に生成されるコンテンツや、ログイン後のページなど、通常のfetch APIでは取得できないコンテンツを収集できます。AIエージェントがページの内容を解釈しながら、必要な情報をピンポイントで抽出するワークフローが構築できます。

await using view = new Bun.WebView();
await view.navigate("https://example.com/dashboard");

// ページ内のデータをJavaScriptで抽出
const data = await view.evaluate(`
  [...document.querySelectorAll('.data-row')].map(row => ({
    name: row.querySelector('.name').textContent,
    value: row.querySelector('.value').textContent
  }))
`);

UIの自動テスト

AIエージェントがアプリケーションを操作しながらスクリーンショットを撮影し、視覚的なUIの変化を確認するテストが可能です。テストコードを書かなくても、自然言語でUIテストを実行できます。

マルチステップワークフローの自動化

ログイン→フォーム入力→送信→結果確認といった複数ステップのワークフローを、AIエージェントが状況に応じて柔軟に実行できます。エラーが発生した場合の対処も、AIが状況を判断して自律的に行えます。

await using view = new Bun.WebView({ width: 1280, height: 720 });
await view.navigate("https://example.com/login");

// フォームに入力
await view.click("input[name='email']");
await view.type("user@example.com");
await view.press("Tab");
await view.type("password123");

// ログインボタンをクリック(actionability自動待機)
await view.click("button[type='submit']");

// ページ遷移後にスクリーンショット
await view.navigate("https://example.com/dashboard");
const screenshot = await view.screenshot({ format: "png" });
await Bun.write("dashboard.png", screenshot);

これらのシナリオにおいて、Bun.WebViewのOS-levelイベント送出という特性が重要な意味を持ちます。ログインページのボット対策やrecaptchaなど、JSインジェクションベースのツールが苦手とするケースでも、より安定した動作が期待できます。

まとめとこれからの展望

Bun v1.3.12のBun.WebViewは、JavaScriptエンジニアのブラウザ自動化体験を大きく変える可能性を持っています。依存関係ゼロのセットアップ、OSレベルの信頼性の高い操作、そしてAnthropicエコシステムとの自然な連携は、AIエージェント時代のブラウザ自動化に求められる要件をすべて満たしています。

特に「AIエージェントがブラウザを道具として使う」というパラダイムの変化は注目すべき点です。これまでのRPAやE2Eテストツールは人間のための自動化を前提として設計されていましたが、Bun.WebViewとClaude Codeの組み合わせは、AIエージェントがファーストクラスのユーザーとして設計された自動化ツールの登場を示しています。

Bunのエコシステムは今後もAnthropicのAI技術と連携しながら進化していくことが予想されます。フロントエンド・バックエンドを問わず、AIエージェントを活用した開発ワークフローの構築を検討しているエンジニアの方は、ぜひBun.WebViewを試してみてください。

IT/DXプロジェクト推進するPMO・コンサル人材を提供しています

AI利活用×高生産性のリソースで、あらゆるIT/DXプロジェクトを一気通貫支援します

詳しく見る →
AI駆動型ITコンサルティング
Careerバナーconsultingバナー