regex-visual-debugger

正規表現ビジュアルデバッガー

正規表現を対話形式でテスト、解説、デバッグできるツールです。

このスキルを使用する場面

次のような場合に有効化します：

• デバッグする正規表現パターンが提示された
• 「正規表現が動作しないのはなぜですか？」と尋ねられた
• 正規表現パターンの解説が必要な場合
• 文字列に対して正規表現をテストしたい場合
• 正規表現を別の種類（Python、JS など）に変換したいと尋ねられた
• 正規表現パターンの提案が必要な場合
• 正規表現やパターンマッチングについて言及された

指示

1. 正規表現パターンを分析する

   • 正規表現の構造を解析します
   • 各要素（グループ、量指定子、文字クラス）を特定します
   • よくある構文エラーがないか確認します
   • 指定された種類で正規表現の構文を検証します

2. わかりやすく解説する

   • パターンを要素ごとに分解します
   • 各部分が何にマッチするかを説明します
   • パターン全体の動作を説明します
   • 量指定子の貪欲性を明確にします
   • キャプチャグループと非キャプチャグループの違いを説明します

3. 視覚的に分解する

   • パターンの構造を階層的に示します
   • グループと選択肢を強調します
   • 文字クラスと範囲を示します
   • アンカーと境界を示します

4. 例に対してテストする

   • 提示されたテスト文字列をテストします
   • マッチするものとしないものを示します
   • マッチした部分を強調します
   • マッチが成功または失敗する理由を説明します
   • キャプチャグループの内容を示します

5. よくある問題を特定する

   • 特殊文字のエスケープ漏れ
   • 不適切な量指定子
   • 貪欲と非貪欲の問題
   • アンカーの位置の誤り
   • 閉じられていないグループ
   • 種類固有の互換性の問題

6. テストケースを生成する

   • マッチするはずの文字列を作成します
   • マッチしてはいけない文字列を作成します
   • エッジケースを含めます
   • 境界条件をテストします

7. 改善案を提案する

   • より効率的なパターン
   • より読みやすい代替案
   • パフォーマンスの最適化
   • エッジケースへの対応

8. 種類間で変換する

   • Python（re モジュール）
   • JavaScript
   • Perl
   • Java
   • .NET
   • PHP（PCRE）

出力形式

# Regex Analysis: `pattern`

## Plain English Explanation
This pattern matches [description]:
- `^` - Start of string
- `[A-Z]` - One uppercase letter
- `\d{3}` - Exactly 3 digits
- `$` - End of string

**Overall**: Matches strings like "A123", "Z999"

## Visual Structure

^ - 開始アンカー [A-Z] - 文字クラス（大文字） \d{3} - 数字、ちょうど3回 $ - 終了アンカー

## Test Results

### Matches
- `A123` -> Full match
- `Z999` -> Full match

### No Match
- `a123` -> Lowercase 'a' doesn't match [A-Z]
- `A12` -> Only 2 digits (needs 3)
- `A1234` -> Too many digits

## Capture Groups
1. Group 1: `[captured text]`
2. Group 2: `[captured text]`

## Issues Found
**Issue 1**: Pattern is too restrictive
- **Problem**: Doesn't handle lowercase letters
- **Fix**: Use `[A-Za-z]` instead of `[A-Z]`

## Suggested Improvements
```regex
# More flexible version
^[A-Za-z]\d{3,5}$

変更点：

• 小文字を追加しました
• 3～5桁の数字にするため、{3} を {3,5} に変更しました

生成されたテストケース

マッチするはずのもの

A123
Z999
B456

マッチしてはいけないもの

1ABC    (starts with digit)
ABCD    (no digits)
A12     (too few digits)

種類固有の注意事項

JavaScript：［JS 固有の注意事項］ Python：［Python 固有の注意事項］

その他の種類への変換

JavaScript

const pattern = /^[A-Z]\d{3}$/;
const match = str.match(pattern);

Python

import re
pattern = r'^[A-Z]\d{3}$'
match = re.match(pattern, string)

パフォーマンスに関する注意事項

• 現在の計算量：O(n)
• バックトラッキングの問題はありません
• パフォーマンス向上のため、非キャプチャグループ (?:...) の使用を検討してください

## Examples

**User**: "Why doesn't this regex match emails: `\w+@\w+\.\w+`?"
**Response**: Analyze pattern → Explain it matches simple emails only → Show test cases (fails on "[email protected]") → Identify issues (doesn't handle special chars, multiple TLDs) → Provide improved pattern → Generate comprehensive test cases

**User**: "Explain this regex: `^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$`"
**Response**: Break down pattern (IP address matcher) → Explain each component → Show it matches valid IPs (0-255 per octet) → Provide test cases → Visualize structure

**User**: "Convert this Python regex to JavaScript: `(?P<name>\w+)`"
**Response**: Identify named capture group (Python feature) → Convert to JS equivalent → Explain differences → Show both versions with usage examples

## Best Practices

- Always test regex with edge cases
- Explain in plain English first
- Show concrete examples (not just theory)
- Highlight common pitfalls for each pattern
- Provide both positive and negative test cases
- Consider performance implications
- Note flavor-specific features
- Suggest simpler alternatives when possible
- Use non-capturing groups for performance
- Escape special characters properly
- Be explicit about case sensitivity
- Test with Unicode characters if relevant