正規表現チャレンジ（初級〜上級）
初心者が段階的に「読める・書ける・使える」ようになる内容です。
各問題には 自動採点HTML デモ付き（ブラウザで動作）も用意します。
初級レベル：パターンの基本を覚えよう
🧠 問題1：数字を含むかどうか
入力文字列が「数字を含む」場合にマッチする正規表現を作ろう。
✅ 例
| 入力 | 判定 |
|---|---|
abc | ❌ |
abc123 | ✅ |
1banana | ✅ |
ヒント: 数字は \d
答え: /\d/
問題2：文字列が「Hello」で始まる
✅ 例
| 入力 | 判定 |
|---|---|
Hello world | ✅ |
Hi Hello | ❌ |
ヒント: 行頭は ^
答え: /^Hello/
問題3：「.com」で終わる
✅ 例
| 入力 | 判定 |
|---|---|
example.com | ✅ |
example.net | ❌ |
ヒント: 行末は $
答え: /\.com$/
中級レベル：繰り返し・グループを使いこなそう
問題4：郵便番号（7桁の数字）
✅ 例
| 入力 | 判定 |
|---|---|
1234567 | ✅ |
123-4567 | ❌ |
答え: /^\d{7}$/
問題5：英数字のみのユーザー名
✅ 例
| 入力 | 判定 |
|---|---|
user_01 | ✅ |
user! | ❌ |
ヒント: 英数字＋アンダースコアは \w
答え: /^\w+$/
問題6：「2025-10-13」形式の日付
✅ 例
| 入力 | 判定 |
|---|---|
2025-10-13 | ✅ |
25-10-13 | ❌ |
ヒント: \d{4}-\d{2}-\d{2}
答え: /^\d{4}-\d{2}-\d{2}$/
上級レベル：実践的なパターン
問題7：メールアドレス（簡易版）
✅ 例
| 入力 | 判定 |
|---|---|
test@example.com | ✅ |
test@.com | ❌ |
答え: /^[\w.-]+@[\w.-]+\.\w+$/
問題8：URL（http or https）
✅ 例
| 入力 | 判定 |
|---|---|
https://example.com | ✅ |
ftp://example.com | ❌ |
答え: /^https?:\/\/[\w.-]+\.\w+/
問題9：HTMLタグを抽出
✅ 例
| 入力 | 判定 |
|---|---|
<p>Hello</p> | ✅ |
Hello | ❌ |
答え: /^<[^>]+>.*<\/[^>]+>$/
自動採点HTMLデモ
以下をそのままコピーしてブラウザで開くと、
あなたの正規表現が「正解かどうか」をリアルタイムで判定できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>正規表現チャレンジ</title>
<style>
body { font-family: "Segoe UI", sans-serif; margin: 2em; background: #fafafa; }
h2 { margin-top: 1.5em; color: #2c3e50; }
input, textarea { width: 100%; padding: .5em; margin: .3em 0; }
.result { font-weight: bold; }
.correct { color: green; }
.wrong { color: red; }
</style>
</head>
<body>
<h1>🧩 正規表現チャレンジ</h1>
<h2>問題：メールアドレスを判定</h2>
<p>正規表現を入力して、メールっぽい文字列が正しいか判定してみよう！</p>
<label>あなたの正規表現：</label>
<input id="regex" placeholder="/^[\\w.-]+@[\\w.-]+\\.\\w+$/" value="/^[\\w.-]+@[\\w.-]+\\.\\w+$/">
<label>テスト文字列：</label>
<textarea id="inputText">test@example.com
user@domain.co.jp
wrong@.com
a@b</textarea>
<button onclick="runTest()">採点する</button>
<div id="output"></div>
<script>
function runTest() {
const regexInput = document.getElementById("regex").value.trim();
let pattern, flags = "";
const m = regexInput.match(/^\/(.+)\/([a-z]*)$/);
if (m) { pattern = m[1]; flags = m[2]; }
else { alert("正規表現は /pattern/flags の形で入力してください。"); return; }
const re = new RegExp(pattern, flags);
const lines = document.getElementById("inputText").value.split("\n");
const out = lines.map(str => {
const ok = re.test(str);
return `<div class="result ${ok ? 'correct' : 'wrong'}">${ok ? '✅' : '❌'} ${str}</div>`;
}).join("");
document.getElementById("output").innerHTML = out;
}
</script>
</body>
</html>
このHTMLでは：
/pattern/flags形式で正規表現を入力- 改行区切りのテスト文字列をまとめて採点
- 結果が ✅ / ❌ でリアルタイム表示されます