AIエージェントが「手」を持つ瞬間：WindsurfとPlaywrightによる自律的データ収集の自動化
こんにちは。開発環境の設計からCI/CDパイプラインの最適化までを専門とするエンジニアです。
これまで多くの開発者が「AIにコードを書かせる」ことに満足してきました。しかし、真の生産性向上は「AIが実行環境を理解し、自ら試行錯誤してタスクを完結させる」というフェーズにあります。
今回は、次世代AIエディタ「Windsurf」を使い、Webブラウザ自動化ツール「Playwright」を指揮して、指定サイトからデータを抽出・構造化するオートメーション・システムを構築する手法を解説します。これは単なるスクリプト作成ではありません。「AIエージェントにWebブラウザという手を与える」ワークフローの構築です。
—
1. なぜWindsurfなのか：AIとエディタの境界線の消失
従来のIDEでは、AIは「コードを生成するチャットボット」に過ぎませんでした。しかし、Windsurfは「Cascade」というコンテキスト認識エンジンを通じて、あなたのプロジェクトのファイル構造、実行ログ、そしてブラウザの挙動をリアルタイムに把握します。
Playwrightのような複雑な非同期処理を伴うスクレイピングを実装する場合、AIが「DOM構造の変化」や「実行時のエラーログ」を即座にフィードバックとして受け取れるWindsurfの環境は、開発効率を10倍以上に引き上げます。
—
2. 基礎セットアップ：効率を最大化する環境構築
まずは、Node.js環境が整っていることを前提に、Playwrightを導入します。ここで重要なのは、グローバルなインストールではなく、プロジェクト単位で閉じた環境を作ることです。
プロジェクトの初期化
ターミナル（Windsurf内蔵のものを使用してください）で以下を実行します。
プロジェクトディレクトリを作成
mkdir auto-scraper && cd auto-scraper
Node.jsプロジェクトの初期化
npm init -y
Playwright本体と依存関係のインストール
npm install playwright
なぜこの構成か？
プロジェクト単位でインストールすることで、CI/CDパイプラインに乗せる際、あるいは他メンバーと環境を共有する際に「環境依存による動かない」という悲劇を未然に防ぐためです。
—
3. HelloWorld：AIエージェントへの「目的」の伝え方
ここからが本題です。Windsurfの右側にある`Cascade`（AIチャット）を開き、以下のプロンプトを投げてみてください。
> 「Playwrightを使って、`https://example.com` のタイトルと見出し（h1タグ）を抽出し、`data.json`というファイルに保存するスクリプトを書いて。エラーハンドリングも忘れずに。」
AIが生成したコードの重要ポイント
Windsurfは、単にコードを出すだけでなく、あなたのプロジェクト構造を読み取り、最適化された実装を提案します。以下のようなコードが生成されるはずです。
const { chromium } = require(‘playwright’);
const fs = require(‘fs’);
(async () => {
// ブラウザインスタンスを起動
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
try {
// ターゲットURLへ遷移
await page.goto(‘https://example.com’);
// ページタイトルとh1を抽出
const data = {
title: await page.title(),
heading: await page.textContent(‘h1’),
timestamp: new Date().toISOString()
};
// JSONとして保存
fs.writeFileSync(‘data.json’, JSON.stringify(data, null, 2));
console.log(‘データ取得完了: data.jsonに保存しました’);
} catch (error) {
console.error(‘取得失敗:’, error);
} finally {
// リソースを確実に解放
await browser.close();
}
})();
—
4. 現場で震えるほど役立つ「精度を高める」知見
上記のコードは基本ですが、実務のWebサイトはこれほど単純ではありません。ここで、アーキテクトとして一つ上のステップを教えます。
1. セレクタの堅牢性（Robustness）
`page.textContent(‘h1’)` は、要素が増えた瞬間に期待通り動かなくなることがあります。Windsurfには「このサイトのDOM構造を解析して、最も壊れにくいセレクタを提案して」と指示してください。AIはCSSパスだけでなく、`aria-label`や`data-testid`を優先する設計を学びます。
2. コンテキストの活用
Windsurfの「Cascade」機能に、取得したいサイトのHTMLソースコードをコピペして「この構造から、商品名と価格だけを配列で抜き出すロジックを書いて」と頼んでみてください。AIがあなたの意図を汲み取り、複雑なクエリセレクタを即座に生成します。
3. デバッグの自動化
もしスクリプトが失敗したら、エラーログをそのままCascadeに貼り付けましょう。「エラーが出た。なぜこの要素が見つからないのか分析して」と問えば、AIはページ遷移の待機時間（`page.waitForSelector`）の不足や、動的レンダリングの影響を指摘してくれます。
—
5. まとめ：毎日のコーディングが劇的に楽になる理由
このワークフローをマスターすると、「定型的なデータ収集」という苦痛から解放されます。
1. 構築スピード: コードを書くのではなく「目的を定義する」だけでいい。
2. メンテナンス: Webサイトのレイアウトが変わっても、AIにログを読ませれば即座に修正コードを提案してくれる。
3. 拡張性: JSON化されたデータは、そのままデータベースやGoogleスプレッドシートへ流し込める。
WindsurfとPlaywrightの組み合わせは、もはや「ツール」ではなく、あなたの「腕」です。まずは今日、気になるニュースサイトやデータサイトで、最初の「自動抽出」を試してみてください。
その時、画面の中でブラウザが自律的に動き出し、データがJSONとして生成される瞬間――きっと、開発者としての新しい扉が開くはずです。応援していますよ。