Selenium に別れを告げよ！スター 8000 超の AI ブラウザ自動化ツールが、スクレイピング開発効率を 10 倍に

こんにちは、小華です。効率的なワークフローと最先端のAI ツールの活用方法を専門にしています。毎日厳選されたオープンソース技術と実践テクニックをお届けし、あなたの作業時間を 50% 短縮し、一歩先を行くサポートを提供します。👉無料購読して、10 万人以上の技術者とアップグレードの秘訣を共有しましょう！

1. 製品紹介：なぜあなたのクローラーはいつもクラッシュするのか？

ブラウザ自動化コードを書いたことのある開発者なら、あの苦痛を知っているはずです。昨日まで正常に動作していたスクリプトが、今日はターゲットサイトのボタンのクラス名が少し変わっただけで、総崩れになってしまいます。開発者はブラウザの開発者ツールを開き、DOM 構造を一行ずつ比較し、コードを修正して再テスト、そして再デプロイするという地獄のようなサイクルに陥ります。

これこそが、従来のブラウザ自動化ツールに付きまとう呪いです。Selenium、Playwright、Puppeteer などは強力な機能を備えていますが、これらは「正確なセレクタ」に依存しています。各要素の位置、ID、クラスを正確に把握する必要があり、サイトがリニューアルバージョンに変われば、あなたのコードは一瞬で無用の長物と化します。

Stagehand は次世代の AI ブラウザ自動化フレームワークであり、開発者が自然言語でブラウザを制御することを可能にします。従来の Selenium や Playwright を使った手法と比較して、開発効率は 10 倍に向上し、メンテナンスコストは 80% 削減されます。

比喩を使って理解するとわかりやすいでしょう。従来のツールは、ロボットに詳細な地図を渡し、「左に曲がり、100 メートル進み、右に曲がれ」と指示するようなものです。一方、Stagehand はロボットに「宅配便を受け取ってきて」と伝えるだけで、あとはロボット自身が道を見つけ、家を特定し、予期せぬ状況にも対処してくれます。

Stagehand は Browserbase チームによってオープンソース化され、MIT ライセンスを採用しています。現在 GitHub では 8,000 以上のスターを獲得し、ブラウザ自動化分野で最も急速に成長しているプロジェクトの一つとなっています。

2. 中核機能：3 つの切り札

1. 自然言語での操作：チャットのようにクローラーを作成

従来の方法で「ログインボタンをクリックする」という単純な操作を書くには、このように記述する必要がありました。

// Playwright 方式 - セレクタを正確に知る必要がある
await page.click('button[id="login-btn"].btn-primary');

一方、Stagehand では人間らしい言葉で指示するだけです。

// Stagehand 方式 - 自然言語で OK
await stagehand.act("ログインボタンをクリック");

比較表：

Stagehand の裏では大規模言語モデル（OpenAI や Anthropic などをサポート）が連携しており、ユーザーの意図を自動的に理解し、ページ上の対応する要素を見つけて操作を実行します。ボタンの ID が何かを知る必要も、DOM のどの階層にあるかを気にする必要もありません。人間の言葉で描写するだけで、AI が見つけてくれます。

2. 自己修復：サイトが変更されても恐れない

これが Stagehand の最も驚くべき機能です。従来のクローラーが最も恐れるのは何でしょうか？ターゲットサイトの変更です。ボタンの位置が少し変わったり、色が変わったりしただけで、スクリプトは道に迷ってしまいます。

Stagehand のセルフヒーリング（自己修復）メカニズムは以下の通りです。

1. 記憶と学習：操作を初めて実行する際、Stagehand は完全な実行パスを記録します。
2. インテリジェントなキャッシュ：再現可能な操作はキャッシュされ、次回の実行時には LLM を再度呼び出す必要がないため、高速かつ低コストです。
3. 変更の検出：サイト構造の変更により操作が失敗すると、Stagehand は自動的に AI をトリガーしてページを再分析します。
4. 自動修復：AI がページの新構造に基づいて正しい代替要素を自動的に見つけ出し、人の手を介さずに修正します。

実測データ：1 か月間のサイト変更サイクルにおいて、従来の Playwright スクリプトの成功率は 98% から 23% へと急落しましたが、Stagehand スクリプトは 91% 以上を維持しました。

3. 構造化抽出：正規表現地獄からの脱却

ウェブページから構造化データを抽出することは、クローラーの核心的なニーズです。従来の方法では、複雑な正規表現や DOM パースコードを作成する必要がありました。

// 従来方式 - エラーが発生しやすく、保守が困難
const html = await page.content();
const matches = html.match(/<h1[^>]*>(.*?)<\/h1>/);
const title = matches ? matches[1] : '';

Stagehand を使えば、宣言的な抽出が直接可能です。

// Stagehand 方式 - 明確で型安全
const { author, title } = await stagehand.extract(
  "PR の作成者とタイトルを抽出",
  z.object({
    author: z.string().describe("PR 作成者のユーザー名"),
    title: z.string().describe("PR のタイトル"),
  }),
);

Zod による型定義のおかげで、正しいデータが得られるだけでなく、完全な TypeScript の型ヒントも得られます。

3. 使用シナリオ：Stagehand は誰に必要なか？

シナリオ 1：データ収集と競合モニタリング

課題：EC 関係者は競合他社の価格を監視する必要がありますが、各プラットフォームのアンチクローリング機構は年々厳しくなり、従来のクローラーは頻繁にブロックされています。

Stagehand による解決策：

1. 自然言語で収集ニーズを記述：「この商品の価格、在庫数、レビュー数を抽出」
2. Stagehand が人間の操作を模倣し、ロボットと識別される確率を低減
3. サイトが変更されても自動適応し、スクリプトの手動メンテナンスが不要

効果：ある EC チームでは、クローラースクリプトのメンテナンスに 1 日 2 時間かかっていたのが、週に 30 分の稼働状態チェックのみとなり、効率が 20 倍に向上しました。

シナリオ 2：自動テストと QA

課題：フロントエンドテストエンジニアは頻繁な回帰テストが必要ですが、ページ要素が頻繁に変更されるため、テストケースのメンテナンスコストが高くなっています。

Stagehand による解決策：

1. 自然言語でテストステップを記述：「登録ボタンをクリックし、メール test@example.com [1] を入力して送信をクリック」
2. ページ構造が調整された際、AI が対応する新しい要素を自動発見
3. テスト失敗時にインテリジェントな診断を提供し、考えられる変更点を指摘

効果：ある SaaS チームでは、UI 自動化テストケースのメンテナンス時間が 75% 削減され、テストカバレッジが 45% から 82% へ向上しました。

シナリオ 3：業務の自動化と RPA

課題：運用担当者は複数のバックエンドシステムに定期的にログインしてレポートをエクスポートする必要があり、手動作業には時間がかかり、エラーも発生しやすくなっています。

Stagehand による解決策：

1. 自然言語の操作指示を記録：「バックエンドにログインし、データレポートページへ移動。昨日の日付を選択してエクスポートをクリック」
2. 定期タスクを設定して自動実行
3. バックエンドインターフェースの更新時にも自動適応

効果：ある EC 企業では、日報作成にかかる時間が 1 日 45 分から 5 分に短縮され、かつエラー率はゼロになりました。

シナリオ 4：AI エージェントと自動化ワークフロー

課題：AI エージェントを開発する際にはウェブページとの対話が必要ですが、従来のツールは API が複雑で、開発の妨げになっていました。

Stagehand による解決策：

const agent = stagehand.agent();
await agent.execute("GitHub で browserbase/stagehand プロジェクトを見つけ、最新の PR 作成者をチェックして");

この一言で、AI エージェントが多段階のウェブ操作を完了します。中間プロセスを気にする必要はなく、タスクの目的のみに集中すればよいのです。

4. 使い方：3 分でクイックスタート

方法 1：ワンクリック体験（初心者推奨）

コマンド 1 行で、完全な Stagehand プロジェクトを作成します。

npx create-browser-app my-stagehand-app
cd my-stagehand-app

次に、環境変数を設定します。

cp .env.example .env
# .env ファイルを編集し、OpenAI API キーと Browserbase 認証情報を記入

これで 3 ステップ完了、サンプルスクリプトを実行できます！

方法 2：既存プロジェクトへの統合

すでに Node.js プロジェクトをお持ちの場合は、直接インストールできます。

npm install @browserbasehq/stagehand
# または
yarn add @browserbasehq/stagehand
# または
pnpm add @browserbasehq/stagehand

基本的な使用例：

import { Stagehand } from "@browserbasehq/stagehand";
const stagehand = new Stagehand({
  apiKey: process.env.BROWSERBASE_API_KEY,
  projectId: process.env.BROWSERBASE_PROJECT_ID,
});
await stagehand.init();
// ページの取得
const page = stagehand.context.pages()[0];
await page.goto("https://github.com/browserbase");
// 自然言語での操作
await stagehand.act("Stagehand リポジトリリンクをクリック");
// AI エージェントによる複雑なタスクの実行
const agent = stagehand.agent();
await agent.execute("最新の PR の詳細を表示");
// データの構造化抽出
const { title, author } = await stagehand.extract(
  "最新の PR のタイトルと作成者を抽出",
  z.object({
    title: z.string(),
    author: z.string(),
  }),
);
console.log(`最新の PR: ${title} by ${author}`);

方法 3：ソースコードからのインストール（コントリビューター向け）

開発への参加や深いカスタマイズを行いたい場合：

git clone https://github.com/browserbase/stagehand.git
cd stagehand
pnpm install
pnpm run build
pnpm run example # サンプルスクリプトを実行

本番環境へのデプロイに関する注意点：

• より良いパフォーマンスと安定性を確保するため、Browserbase クラウドサービスの構成を推奨
• 予期せぬ高額請求を避けるため、LLM 呼び出しの適切なクォータを設定
• 機密操作には人間の確認メカニズムを有効化
• 自動化フローの設定を定期的にバックアップ

5. プロジェクトアドレス

https://github.com/browserbase/stagehand