コードを書いていると、同じようなパターンの文字列を大量に変更したくなることがありますよね。
「変数名を一括で変えたい」「特定のパターンの数字を別の形式に変換したい」「HTMLタグの中身だけを置換したい」
そんな時、一つずつ手作業で変更していたら時間がいくらあっても足りません。
Visual Studio Code（VSCode）には、正規表現を使った強力な置換機能が備わっています。これを使えば、複雑なパターンマッチングも一発で処理できるんです。
この記事では、VSCodeでの正規表現を使った置換方法を、初心者の方にも分かりやすく解説します。難しそうに見える正規表現も、基本を押さえれば意外と簡単。実践的な例を交えながら、今日から使える技術を身につけましょう！
そもそも正規表現って何？基本を理解しよう
専門用語を使う前に、基本をしっかり押さえておきましょう。
正規表現とは
簡単に言うと：
文字列のパターンを表現するための特殊な記号です。「このようなルールに当てはまる文字列を探してください」と指示する言語のようなもの。
イメージ：
「03で始まる電話番号」「@を含むメールアドレス」「数字3桁-数字4桁」のような、文字列のパターンを表現できます。
普通の置換と何が違うの？
普通の置換：
「apple」を「orange」に置換 → 完全一致のみ
正規表現を使った置換：
「数字2桁」を「数字3桁」に置換 → パターンに一致するすべて
実例：
普通の置換では「apple」という文字列しか置換できませんが、正規表現を使えば「aで始まる5文字の単語」すべてを一度に置換できます。
正規表現が役立つ場面
場面1：大量のデータを一括変換
CSVファイルの日付形式を変更したい時など
場面2：コードのリファクタリング
変数名の命名規則を一括で変更したい時
場面3：フォーマットの統一
電話番号やメールアドレスの表記を統一したい時
【準備編】VSCodeで正規表現置換を始める
実際の作業に入る前に、基本的な使い方を確認しましょう。
置換画面を開く
ショートカットキー：
- Windowsの場合：
Ctrl + H - Macの場合：
Command + Option + F
または
- 編集メニュー → 置換
正規表現モードをオンにする
置換画面が開いたら、正規表現モードを有効にします。
手順：
- 置換パネルの検索ボックスの右側にあるアイコンを確認
- 「.*」のようなアイコン（正規表現ボタン）をクリック
- ボタンが青くハイライトされれば有効
ショートカット：
Alt + R（WindowsとMac共通）で正規表現モードのオン/オフを切り替えられます。
基本的な操作の流れ
- 検索ボックスに正規表現パターンを入力
- 置換ボックスに置き換え後のパターンを入力
- プレビューで確認
- 置換を実行
【基礎編】正規表現の基本パターン
正規表現で使う記号の意味を理解しましょう。
よく使う基本的な記号
.（ドット）：
任意の1文字にマッチします。
例：
a.c→ 「abc」「adc」「a5c」などにマッチ
*（アスタリスク）：
直前の文字が0回以上繰り返される場合にマッチ。
例：
ab*c→ 「ac」「abc」「abbc」「abbbc」などにマッチ
+（プラス）：
直前の文字が1回以上繰り返される場合にマッチ。
例：
ab+c→ 「abc」「abbc」「abbbc」にマッチ（「ac」は含まない）
?（疑問符）：
直前の文字が0回または1回出現する場合にマッチ。
例：
colou?r→ 「color」「colour」の両方にマッチ
^（キャレット）：
行の先頭にマッチ。
例：
^hello→ 行頭の「hello」のみにマッチ
$（ドル記号）：
行の末尾にマッチ。
例：
world$→ 行末の「world」のみにマッチ
文字クラスの指定
[abc]：
角括弧内のいずれか1文字にマッチ。
例：
[abc]→ 「a」「b」「c」のいずれかにマッチ[0-9]→ 任意の数字1桁にマッチ[a-z]→ 小文字のアルファベット1文字にマッチ
[^abc]：
角括弧内の文字以外にマッチ。
例：
[^0-9]→ 数字以外の文字にマッチ
便利なショートハンド
\d：
数字（0-9）にマッチ。[0-9]と同じ。
\D：
数字以外にマッチ。[^0-9]と同じ。
\w：
単語を構成する文字（アルファベット、数字、アンダースコア）にマッチ。
\W：
単語を構成しない文字にマッチ。
\s：
空白文字（スペース、タブ、改行）にマッチ。
\S：
空白文字以外にマッチ。
繰り返しの指定
{n}：
直前の文字がちょうどn回繰り返される場合にマッチ。
例：
\d{3}→ 3桁の数字にマッチ（「123」など）
{n,}：
直前の文字がn回以上繰り返される場合にマッチ。
例：
\d{2,}→ 2桁以上の数字にマッチ
{n,m}：
直前の文字がn回以上、m回以下繰り返される場合にマッチ。
例：
\d{2,4}→ 2桁から4桁の数字にマッチ
【実践編】すぐに使える置換パターン集
実際の作業でよく使うパターンを紹介します。
例1：電話番号のハイフンを削除
目的：
「090-1234-5678」を「09012345678」に変換
検索パターン：
(\d{3})-(\d{4})-(\d{4})置換パターン：
$1$2$3説明：
\d{3}で3桁の数字にマッチ()で囲むとグループ化され、$1、$2、$3で参照できます- ハイフンを含めずに再構成
例2：日付形式の変換
目的：
「2024/01/15」を「2024-01-15」に変換
検索パターン：
(\d{4})/(\d{2})/(\d{2})置換パターン：
$1-$2-$3説明：
年、月、日をそれぞれキャプチャして、スラッシュをハイフンに置き換えます。
例3：HTMLタグの削除
目的：
「
こんにちは」から「こんにちは」を抽出
検索パターン：
<[^>]+>置換パターン：
（空欄）説明：
<でタグの開始[^>]+で「>」以外の文字が1回以上>でタグの終了- すべて空文字に置換してタグを削除
例4：変数名の一括変更
目的：
「user_name」を「userName」に変換（スネークケースからキャメルケースへ）
検索パターン：
(\w+)_(\w)(\w+)置換パターン：
$1${2:/upcase}$3説明：
$1は最初の単語${2:/upcase}はアンダースコア後の最初の文字を大文字に変換$3は残りの文字
注意：
VSCodeのバージョンによって記法が異なる場合があります。シンプルに以下でも可能：
検索： user_(\w)
置換： user${1:/upcase}
例5：行頭にテキストを追加
目的：
すべての行の先頭に「// 」を追加
検索パターン：
^置換パターン：
// 説明：
^ は行頭にマッチするので、すべての行頭に文字列を追加できます。
例6：行末のスペースを削除
目的：
行末の不要な空白を削除
検索パターン：
\s+$置換パターン：
（空欄）説明：
\s+で1個以上の空白文字にマッチ$で行末を指定- 空文字に置換して削除
例7：URLからドメインを抽出
目的：
「https://www.example.com/page」から「example.com」を抽出
検索パターン：
https?://(?:www\.)?([^/]+).*置換パターン：
$1説明：
https?で「http」または「https」にマッチ(?:www\.)?で「www.」があってもなくてもマッチ（非キャプチャグループ）([^/]+)でスラッシュ以外の文字列（ドメイン部分）をキャプチャ
例8：数字に3桁ごとのカンマを追加
目的：
「1000000」を「1,000,000」に変換
これは少し複雑なので、複数ステップで行います。
ステップ1：
検索： \B(?=(\d{3})+(?!\d))
置換： ,
説明：
先読みアサーションを使って、3桁の数字の前にカンマを挿入します。
【応用編】キャプチャグループと後方参照
正規表現の真価を発揮する機能です。
キャプチャグループとは
説明：
() で囲んだ部分は「グループ」として扱われ、置換時に再利用できます。
基本的な使い方：
$1で最初のグループを参照$2で2番目のグループを参照$9まで使えます
実例：姓名の順序を入れ替え
目的：
「山田 太郎」を「太郎 山田」に変換
検索パターン：
(\S+)\s+(\S+)置換パターン：
$2 $1説明：
(\S+)で空白以外の文字列（姓）をキャプチャ\s+で空白(\S+)で空白以外の文字列（名）をキャプチャ$2 $1で順序を入れ替え
実例：引用符の種類を変更
目的：
「’シングルクォート’」を「”ダブルクォート”」に変換
検索パターン：
'([^']*)'置換パターン：
"$1"説明：
'でシングルクォート開始([^']*)でシングルクォート以外の文字（中身）をキャプチャ'でシングルクォート終了- ダブルクォートで囲み直す
実例：Markdownのリンクを変換
目的：
検索パターン：
\[([^\]]+)\]\(([^)]+)\)置換パターン：
<a href="$2">$1</a>説明：
\[でエスケープされた角括弧([^\]]+)でリンクテキストをキャプチャ\(([^)]+)\)でURLをキャプチャ- HTMLのアンカータグに変換
【便利機能】VSCode特有の機能
VSCodeならではの便利な機能を紹介します。
大文字・小文字の変換修飾子
VSCodeでは、キャプチャグループに修飾子を付けて大文字・小文字を変換できます。
修飾子一覧：
\U→ 大文字に変換（次の\Eまで）\L→ 小文字に変換（次の\Eまで）\u→ 次の1文字だけ大文字に\l→ 次の1文字だけ小文字に\E→ 変換の終了
実例：
検索： (\w+)
置換： \U$1\E → すべて大文字に
検索： (\w)(\w+)
置換： \u$1$2 → 先頭だけ大文字に（タイトルケース）
複数行にまたがる置換
説明：
VSCodeの正規表現は、デフォルトで改行を含む複数行マッチに対応しています。
実例：
目的： 複数行のコメントを一行に
検索パターン：
/\*\s*([\s\S]*?)\s*\*/置換パターン：
// $1説明：
[\s\S]*?で改行を含むすべての文字にマッチ（非貪欲）?を付けることで最短マッチになります
条件付き置換（先読み・後読み）
先読みアサーション (?=...)：
後ろに特定のパターンが続く場合のみマッチ
実例：
検索： \d(?=px) → 「px」の前の数字のみ
置換： 10 → すべて「10px」に
後読みアサーション (?<=...)：
前に特定のパターンがある場合のみマッチ
実例：
検索： (?<=\$)\d+ → 「$」の後の数字のみ
置換： 100 → 「$100」に
否定先読み (?!...)：
後ろに特定のパターンが続かない場合のみマッチ
実例：
検索： \d(?!px) → 「px」が続かない数字のみ
【エスケープ】特殊文字の扱い
正規表現で特別な意味を持つ文字をそのまま検索したい場合は、エスケープが必要です。
エスケープが必要な文字
以下の文字は正規表現で特別な意味を持つため、文字そのものを検索したい場合は \ を前に付けます。
. * + ? ^ $ { } [ ] ( ) | \実例：
目的： 「2.5」という文字列を検索
間違い： 2.5 → 「2」+「任意の1文字」+「5」にマッチ（「2a5」なども該当）
正解： 2\.5 → 「2.5」のみにマッチ
よくあるエスケープの例
URL内のドット：
https://example\.com括弧：
\(これは括弧です\)バックスラッシュそのもの：
C:\\Users\\Documents【トラブルシューティング】よくある問題と解決法
問題1：何もマッチしない
原因：
- 正規表現モードがオフになっている
- パターンが間違っている
- エスケープが足りない
確認すること：
- 「.*」アイコン（正規表現ボタン）が青くハイライトされているか
- パターンを簡略化して段階的に試す
- エスケープが必要な文字に
\を付けているか
問題2：意図しない箇所までマッチする（貪欲マッチ）
原因：
デフォルトで貪欲マッチ（できるだけ長くマッチ）になっています。
解決法：
? を付けて非貪欲マッチにします。
実例：
貪欲： <.*> → 「
test」全体にマッチ
非貪欲：<.*?> → 「
」「」それぞれにマッチ
問題3：改行がマッチしない
原因：
. は改行にマッチしません。
解決法：
[\s\S] を使います。これはすべての文字（空白と非空白）にマッチします。
実例：
検索： start[\s\S]*?end → 「start」と「end」の間のすべて（改行含む）
問題4：日本語がうまくマッチしない
解決法：
日本語の場合、文字クラスを使います。
ひらがな： [ぁ-ん]
カタカナ： [ァ-ヴ]
漢字： [一-龯]
実例：
検索： [ぁ-ん]+ → ひらがなの単語にマッチ
問題5：置換後にやがそのまま表示される
原因：
正規表現モードがオフになっています。
解決法：
Alt + R または「.*」アイコンをクリックして正規表現モードをオンに。
【実務編】実際の作業でよくある使用例
使用例1：ログファイルから特定の情報を抽出
目的：
「[2024-01-15 10:30:45] INFO: メッセージ」から時刻だけを残す
検索パターン：
\[(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})\] \w+: (.*)置換パターン：
$1 - $2使用例2：CSSのカラーコードを変換
目的：
「#FFFFFF」を「#FFF」に短縮
検索パターン：
#([0-9A-F])\1([0-9A-F])\2([0-9A-F])\3置換パターン：
#$1$2$3説明：
\1 は最初のグループと同じ文字にマッチする後方参照です。
使用例3：JSONの整形
目的：
一行のJSONを見やすくする（この場合は外部ツールの方が効率的ですが、例として）
検索パターン：
,置換パターン：
,\nこれで各項目が改行されます。
使用例4：コメントアウトの一括解除
目的：
「// console.log(‘debug’);」から「//」を削除
検索パターン：
^(\s*)//\s*置換パターン：
$1説明：
行頭のインデントは保持しつつ、コメント記号だけを削除します。
【効率化】知っておくと便利なショートカット
置換関連のショートカット
すべて置換：
- Windows:
Ctrl + Alt + Enter - Mac:
Command + Option + Enter
次を置換：
- Windows:
Ctrl + Shift + 1 - Mac:
Command + Shift + 1
次を検索してスキップ：
- Windows:
Ctrl + K Ctrl + D - Mac:
Command + K Command + D
検索オプションの切り替え
正規表現モード： Alt + R
大文字小文字の区別： Alt + C
単語単位での検索： Alt + W
複数選択での一括編集
説明：
正規表現で検索したすべての箇所を選択状態にできます。
手順：
Ctrl + Fで検索- 正規表現モードをオン
- パターンを入力
Alt + Enterで全マッチを選択- そのまま編集
これで正規表現にマッチしたすべての箇所を同時に編集できます。
まとめ：正規表現置換を使いこなして作業を効率化しよう
VSCodeでの正規表現置換をマスターすれば、作業効率が劇的に向上します。
基本の流れ：
Ctrl + Hで置換パネルを開く- 正規表現モード（.*アイコン）をオン
- 検索パターンを入力
- 置換パターンを入力
- プレビュー確認後に実行
よく使う基本パターン：
.→ 任意の1文字*→ 0回以上の繰り返し+→ 1回以上の繰り返し\d→ 数字\w→ 単語を構成する文字\s→ 空白文字^→ 行頭$→ 行末
キャプチャグループの活用：
()でグループ化$1,$2で参照- グループの順序を入れ替えたり、再構成したりできる
実践的な使用例：
- 電話番号のフォーマット変更
- 日付形式の変換
- 変数名の一括変更
- タグの削除や変換
- コメントアウトの一括処理
覚えておきたいポイント：
- エスケープが必要な文字：
. * + ? ^ $ { } [ ] ( ) | \ - 貪欲マッチを避けるには
?を付ける - 改行を含めるには
[\s\S]を使う - VSCode独自の修飾子（
\U,\Lなど）で大文字小文字変換
効率化のコツ：
- よく使うパターンはスニペットとして保存
- 複雑なパターンは段階的に構築
- 置換前に必ずプレビューで確認
- ショートカットキーを活用
コメント