AIコーディングアシスタント「Claude」を実務で使ってみた感想
はじめに
最近、AIを活用したコーディング支援ツールが話題になっています。私たちのチームでも、Anthropic社の「Claude」を実際の開発業務で試してみました。今回は、特にPlaywrightを使ったE2Eテスト作成での活用事例を中心に、使ってみた感想をお伝えします。
Claudeとは
ClaudeはAnthropic社が開発したAIアシスタントです。ChatGPTと同様に対話形式で利用できますが、特にコーディング支援において高い評価を得ています。
私が使用したのは「Claude Code」というCLIツールで、ターミナル上でプロジェクトのコードを読み込みながら、コード生成やレビューを行ってくれます。
実際に使ってみた：Playwrightテストの作成
Playwrightとは
Playwrightは、Microsoft社が開発したE2E（エンドツーエンド）テストフレームワークです。ブラウザを自動操作して、ユーザーの操作をシミュレートしたテストを書くことができます。
なぜAIに頼ったか
E2Eテストを書く際、以下のような課題がありました：
- セレクタの特定が面倒 — 要素を特定するためのCSSセレクタやXPathを調べる作業が地味に時間がかかる
- Playwrightの書き方を毎回調べる —
getByRole、getByTextなど、どれを使うべきか迷う - 似たようなテストの繰り返し — 画面ごとにほぼ同じパターンのテストを書く必要がある
Claudeに依頼してみた
実際に以下のような指示を出してみました：
- ログイン画面のE2Eテストを書いて。
- ユーザー名とパスワードを入力
- ログインボタンをクリック
- ダッシュボード画面に遷移することを確認
すると、Claudeは既存のプロジェクト構成を読み取り、以下のようなコードを生成してくれました：
import { test, expect } from '@playwright/test';
test('ログイン成功時にダッシュボードへ遷移する', async ({ page }) => {
await page.goto('/login');
await page.getByLabel('ユーザー名').fill('testuser');
await page.getByLabel('パスワード').fill('password123');
await page.getByRole('button', { name: 'ログイン' }).click();
await expect(page).toHaveURL('/dashboard');
await expect(page.getByRole('heading', { name: 'ダッシュボード' })).toBeVisible();
});驚いたのは、プロジェクト内の既存テストコードのスタイルに合わせてくれたことです。命名規則やディレクトリ構成も考慮されていました。
良かった点
1. 初速が圧倒的に速い
ゼロからテストを書く場合、ドキュメントを調べながら書くと30分〜1時間かかることもあります。Claudeを使うと、たたき台が数秒で出てくるので、そこから修正する方が圧倒的に効率的でした。
2. ベストプラクティスを教えてくれる
「この書き方よりもgetByRoleを使った方がアクセシビリティ的にも良いです」といったアドバイスをくれることもあり、学習ツールとしても優秀です。
3. エラーの解決が早い
テスト実行時にエラーが出た場合、エラーメッセージを貼り付けるだけで原因と修正案を提示してくれます。
注意点・課題
1. そのままでは動かないことも
生成されたコードが100%正しいとは限りません。実際の画面構成と異なるセレクタが生成されることもあるので、必ず動作確認は必要です。
2. プロジェクト固有の知識は教える必要がある
認証の仕組みや、特殊なコンポーネントの使い方など、プロジェクト固有の情報は事前に伝える必要があります。
3. セキュリティへの配慮
コードや設計情報をAIに入力することになるため、機密情報の取り扱いには注意が必要です。
まとめ
AIコーディングアシスタントは「コードを全部書いてもらう」ものではなく、「たたき台を作ってもらい、人間がレビュー・修正する」という使い方が現実的です。
特にPlaywrightのようなE2Eテストは、パターン化しやすい部分が多いため、AIとの相性が良いと感じました。
皆さんもぜひ、小さなタスクから試してみてはいかがでしょうか。
