1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Playwright Agentsでのテスト自動化:Claude Skillsの導入

1
Last updated at Posted at 2026-02-17

Claude Skillsでプロジェクト固有のAIアシスタントを作る

はじめに

Claude Codeの「Skills」機能を使うと、プロジェクト固有のルールや方針をAIに学習させることができます。
毎回同じ説明をする必要がなくなり、一貫性のあるコード生成が可能になります。

私はSkillsで設計方針とコーディング規約を初めに定めておくことで、Playwight Agentsを使ったテスト追加時のコード生成に一貫性を持たせようと考えました。

※今回の記事はお試し中のもので、実運用前のサンプルとしてみてください。

導入方法

1. ディレクトリ作成

mkdir -p .claude/skills

2. Skillsファイル作成

プロジェクトルートに.claude/skills/ディレクトリを作成し、Markdownファイルで方針を定義します。

design-principles/
└── SKILL.md
coding-standards/
└── SKILL.md

3. 設定内容の例

design-principles:

# プロジェクト設計方針

## テスト設計原則
- 1:1マッピング: テスト計画とテスト実装ファイルは1対1で対応
- Japanese First: コメント・テストケース名は日本語で記述
- テストID管理: T-001形式でテストケースを識別

## ディレクトリ構造
tests/
├── login.spec.ts
├── helpers/
│   ├── auth-helper.ts
│   └── test-data.ts

coding-standards:

# コーディング規約

### 変数・関数命名
// ✅ Good
const emailInput = page.locator(selectors.login.emailInput);

// ❌ Bad  
const e = page.locator('#email');

### セレクタ優先度
data-testid > id > type属性 > name属性 > class

導入メリット

1. 説明工数の削減

// Before: 毎回説明が必要
「日本語でコメント書いて、T-001形式でテストID付けて...」

// After: 自動的にプロジェクト方針に従う
test('T-009: 新機能テスト', async () => {
  // ログイン処理実行
  await authHelper.loginAsAdmin();
});

2. コード品質の向上

  • 一貫したネーミング規則
  • 統一されたファイル構造
  • プロジェクト固有のベストプラクティス自動適用

3. チーム開発効率化

  • 新メンバーへの暗黙知の伝達
  • レビュー指摘項目の削減
  • 設計決定の記録・共有

4. メンテナンス性向上

  • ルール変更時の一元管理
  • 過去の設計判断の可視化

導入デメリット

1. 初期設定コスト

  • Skillsファイル作成・メンテナンスの工数
  • チーム内でのルール合意形成

初期のみで継続的なコスト削減になる

2. 柔軟性の制約

  • 定義したルール外の提案が少なくなる可能性
  • 新しいアプローチの発見機会減少

新しい技術の取り込みが遅れる可能性、提案も出してもらう設計にすると良いかも

3. ファイル管理

  • Skillsファイル自体のバージョン管理
  • 古いルールの削除タイミング判断

効果測定

導入前後の比較例

あくまで想定であり、具体的な数値は必要に応じて別資料を作ります

項目 導入前 導入後(想定)
設計説明時間 30分/回 0分
コードレビュー指摘 3-5件/PR 1-2件/PR
新メンバー立ち上がり 1-2週間 2-3日

まとめ

Claude Skillsは小さな投資で大きな効率化を実現できる機能です。
特に以下のような場面で効果を発揮します:

  • ✅ チーム開発でのルール統一
  • ✅ 新メンバーのオンボーディング効率化
  • ✅ 長期プロジェクトの一貫性維持

まずは簡単な設計方針から始めて、徐々に充実させていくのが良いと思います。

今まではドキュメントは別資料として管理していたが、プロジェクト内の修正をドキュメントに適用する作業、管理もClaudeにお任せすることで、ドキュメントの更新忘れがなくなるので大きなメリットになると感じています。


1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?