0Pricing
JavaScript Academy · レッスン

グループ、キャプチャ、置換

グループでテキストの一部をキャプチャし、名前付きグループを使い、すべての一致を反復します。後方参照や関数による安全な置換も行います。

「グループ、キャプチャ、置換」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

グループを使う理由

目標：テキストを抽出し、形を整えられるようにします。

  • キャプチャグループ：(...)
  • 名前付きグループ：(?<name>...)
  • すべての結果を繰り返すにはmatchAllを使用します
  • $1または関数を使ってreplaceします
グループ、キャプチャ、置換 — イラスト1

番号付きグループ

(...)を使って一部をキャプチャします。インデックスでm[1]、m[2]、…のようにアクセスできます。

// Capture YYYY-MM-DD into groups
const r = /(\\d{4})-(\\d{2})-(\\d{2})/;
const m = r.exec("Today: 2025-09-26");
if (m) {
  console.log("year:", m[1], "month:", m[2], "day:", m[3]);
} else {
  console.log("no match");
}
グループ、キャプチャ、置換 — イラスト2

名前付きグループ

名前付きグループを使うと、m.groups.nameによって読みやすいキーを追加できます。

// Named groups make code clearer
const rx = /(?<y>\\d{4})-(?<m>\\d{2})-(?<d>\\d{2})/;
const hit = rx.exec("Release 2024-01-05");
if (hit) {
  console.log("y:", hit.groups.y, "m:", hit.groups.m, "d:", hit.groups.d);
}
グループ、キャプチャ、置換 — イラスト3

一致を繰り返す

matchAllはイテレーターを返します。gと組み合わせて使うと、すべての一致を繰り返し処理し、グループを読み取れます。

// matchAll with the g flag to get every match and groups
const text = "IDs: A-12, B-7, C-300";
const pattern = /([A-Z])-(\\d+)/g;

for (const match of text.matchAll(pattern)) {
  console.log("letter:", match[1], "num:", match[2]);
}
グループ、キャプチャ、置換 — イラスト4

グループを使った置換

replaceでは、$1、$2、またはコールバックを使って新しいテキストを作成できます。

// Replace order: "2025-09-26" -> "26/09/2025"
const date = "2025-09-26";

// With backreferences
const swapped1 = date.replace(/(\\d{4})-(\\d{2})-(\\d{2})/, "$3/$2/$1");
console.log("swap1:", swapped1);

// With a function for more control
const swapped2 = date.replace(/(?<y>\\d{4})-(?<m>\\d{2})-(?<d>\\d{2})/, function (_all, _y, _m, _d, groups) {
  return groups.d + "/" + groups.m + "/" + groups.y;
});
console.log("swap2:", swapped2);
グループ、キャプチャ、置換 — イラスト5

ヒントと注意点

ヒント：

  • すべての一致が必要な場合はgを追加します（matchAllを使用します）。
  • 分かりやすさを優先して名前付きグループを使用します。
  • パターンは小さく保ち、短いサンプル文字列でテストします。
グループ、キャプチャ、置換 — イラスト6

matchAllの基本クイズ

クイックチェック：グループを使ってすべての一致を繰り返し処理します。

グループ、キャプチャ、置換 — イラスト7

まとめ

まとめ：(...)でキャプチャし、分かりやすさのために名前付きグループを使用します。matchAllですべての一致を繰り返し処理し、後方参照またはコールバックを使ったreplaceでテキストの形を整えます。

グループ、キャプチャ、置換 — イラスト8

よくある質問

「グループ、キャプチャ、置換」レッスンは無料ですか？

はい。「グループ、キャプチャ、置換」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「グループ、キャプチャ、置換」で何を学びますか？

グループでテキストの一部をキャプチャし、名前付きグループを使い、すべての一致を反復します。後方参照や関数による安全な置換も行います。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。

「グループ、キャプチャ、置換」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 正規表現の基礎 — リテラル、test、アンカー、フラグ
  2. グループ、キャプチャ、置換
  3. バリデーションと小さな注意点
← JavaScript Academyに戻る