AIに動作確認を任せる方法|初心者でもできる自動チェック入門

AI入門

「動いてるか確認して」って毎回言ってませんか?

アプリやWebサイトを作るとき、「変更したらブラウザで確認」って作業、毎回やってますよね。ボタンを押してみて、エラーが出てないか確かめて……これが意外と時間を食うんですよ。

実はこの「確認作業」、AIに丸ごと任せることができるんです。しかも「確認して」と毎回言わなくていい方法があるんですよ。今回はその仕組みを、できるだけわかりやすく紹介しますね。

そもそもどういうことなの?(3行で説明)

AIのコーディングアシスタント(コードを書くのを手伝ってくれるAI)は、普通「あなたが指示 → AIが作業 → あなたが確認」というリズムで動いています。まるでキャッチボールみたいなイメージですね。

問題は「あなたが確認する部分」です。AIはあなたがどうやって確認しているかを知らないんですよ。だから毎回あなたが手でブラウザを開いて確かめる必要があるんです。

そこで登場するのが「Verification Skill(自動確認の指示書)」という仕組みです。あなたの確認手順を一度AIに教えておけば、次からはAIが勝手にやってくれるようになるんです。

💡 初心者メモ: 「Skill(スキル)」とは、AIへの「仕事の手順書」のことです。「ボタンを押したらこうやって確認してね」という手順をあらかじめ書いておくイメージです。

何が嬉しいの?(メリット3つ)

① 「頼んでいない問題」まで見つけてくれる

たとえば「いいねボタンを追加して」とだけ頼んだとします。AIはボタンを追加しつつ、事前に渡した手順書通りにページ全体をチェックしてくれるんですよ。

その結果、「ボタンは動いています。でもページのレイアウトがズレている部分がありますよ」と教えてくれた実例があります。これ、頼んでもいないのに見つけてくれたんですよ。まるで「頼んだ仕事だけじゃなく、気になった問題も報告してくれる優秀な部下」みたいですよね。

② 確認作業の時間がゼロに近くなる

ブラウザを開く、クリックする、エラーを確認する——この作業、AIが全部やってくれます。あなたは結果を見るだけでいいんですよ。

「実装したけど確認が面倒」という気持ち、なくなりますよね。浮いた時間を次の作業に使えるんです。

③ 一度設定すれば、ずっと使い回せる

手順書は一度作ったら何度でも使えます。「毎回同じ確認手順を頼む」という手間がなくなるんです。

職場でいうと、「新人に毎回口頭で説明していたことを、マニュアルにした」イメージです。一回作ればもう説明しなくていいんですよ。

AIは実際にブラウザで何をしてくれるの?

「AIがブラウザを操作する」と聞いてもピンとこないかもしれません。具体的にはこんなことができるんですよ。

  • 🖥️ ページを開いて表示確認(見た目が崩れていないかチェック)
  • 🖱️ ボタンやリンクをクリック(実際に動くか試してくれる)
  • ⌨️ フォームに文字を入力(入力欄が正しく動くか確認)
  • 📋 エラーログを読む(コンソール(開発者向けのエラー表示画面)のエラーを自動チェック)
  • 📸 スクリーンショットを撮る(証拠として画像を残してくれる)
  • 表示速度を計測(ページが遅くなっていないか確認)
💡 初心者メモ: これらの操作には「Chrome DevTools MCP(クローム開発ツールとAIをつなぐ接続口)」というツールが必要です。難しそうに聞こえますが、設定は一度やれば終わりです。

始め方(ステップで解説)

ステップ① Claude Codeに「手順書を作って」と頼む

Claude Code(Anthropicが提供するAIコーディングツール)で、以下のように入力するんです。

入力する言葉の例:
「私のフロントエンド開発の確認手順をVerification Skillとして作ってください」

すると、AIがあなたにインタビュー(質問)をしてきます。「どんな変更をするとき、何を確認していますか?」という感じで聞いてくるんですよ。

ステップ② 「今やっていること」を正直に答える

難しく考えなくて大丈夫です。今あなたが手でやっている確認作業をそのまま答えるだけでいいんですよ。

例えばこんな感じです。「ブラウザでページを開いて表示を見る」「ボタンを押して動くか確かめる」「画面にエラーが出ていないか見る」——これだけ答えればOKなんです。

ステップ③ 生成された「手順書ファイル」を確認する

AIが自動で手順書ファイルを作ってくれます。中身は「ページを開く→クリックして確認→エラーをチェック→スクリーンショットを撮る」というような手順が書かれているんですよ。

このファイルがあれば、以降はAIが毎回この手順を自動でやってから結果を報告してくれます。

ステップ④ あとは普通に作業を頼むだけ

設定が終わったら、後はいつも通りAIに作業を頼むだけです。「確認して」と言わなくても、勝手に確認してから報告してくれるようになりますよ。

💡 初心者メモ: Claude Codeはまだ一般向けに広く公開されているツールではありません。利用できる環境かどうか、公式サイト(anthropic.com)で確認してみてくださいね。

ここだけ気をつけて

⚠ 注意: AIの自動確認は「完璧」ではありません。手順書に書いていないことは確認してくれないので、大事なリリース前は人間の目でも確認するようにしましょう。

また、手順書の内容は定期的に見直すことをおすすめします。プロジェクトが変わると確認すべきポイントも変わってくるんですよ。

⚠ 注意: Chrome DevTools MCPなどの外部ツール連携(AIと外部ツールをつなぐ設定)は、初期設定が少し手間です。わからないときは公式ドキュメントや詳しい人に聞きながら進めましょう。

今日のポイント

  • AIへの「確認手順書」を一度作れば、毎回言わなくても自動でチェックしてくれる
  • 頼んでいない問題まで発見してくれることがある(優秀な部下みたい!)
  • 難しい設定は最初だけ。一度作ったら何度でも使い回せてお得

「毎回確認するのが面倒」と感じている人は、ぜひこの仕組みを試してみてください。最初の設定さえ乗り越えれば、AIが働いている間にあなたは別の作業ができるようになりますよ。

もっと詳しく知りたい方はこちら

この記事の元になった詳細版をnoteで公開しています。
コード例・設定ファイル・応用テクニックなど、実践的な内容が満載です。

noteで詳細記事を読む

Powered by 侍AI道場 (CCI)

Photo by ThisisEngineering on Unsplash

コメント

タイトルとURLをコピーしました