VSCodeの「検索と置換」を極める｜現場で使える効率化テクニック

2026年06月25日

クリオ

Web制作ディレクター / フロントエンジニア

こんにちは！
今日は「VSCodeの検索と置換を極める｜正規表現で一括修正を爆速化する方法」について解説します。

検索と置換の基本機能と僕の失敗談

皆さんは普段、VSCodeの検索機能をどれくらい活用していますか？
僕も昔は Ctrl+H（Macは Cmd+H）で検索と置換を開いても、ほんま基本的な使い方だけで終わってました。
手作業で一個一個修正してる後輩を見るたびに「あ、あの子も昔の僕やなあ」って思うんですよね。

覚えておいてほしいのは、VSCodeの検索と置換にはめっちゃ強力な機能が隠れてるということです。
特に「正規表現」を使うと、複数ファイルでの一括置換がめっちゃ効率よくなるんですよ。

基本的な操作としては：

昔、僕が案件で失敗したのは、クラス名を一括変更するときに「正規表現」をオンにせずに置換して、想定外の文字列まで置き換わってしまったことです。
その時から「正規表現をちゃんと理解しておくことの大切さ」を痛感しました。

VSCodeの検索パネルには、左下に3つのアイコンがあるのをご存知ですか？
左から「大文字小文字を区別」「単語全体で検索」「正規表現を使用」の順です。
この3番目のアイコン（正規表現ボタン）が、ほんま魔法の杖なんですよ。

例えば、古い属性を新しい属性に一括置換したいとしましょう。
単純な検索と置換では対応できない「複雑なパターン」ってめっちゃあるんですよね。
そこで活躍するのが正規表現です。

正規表現の基本パターンをいくつか紹介しますね：

そして置換で最も使うのは「キャプチャグループ」という機能です。
括弧 () で囲んだ部分は置換文で $1、$2… として参照できるんですよ。
これを使うと、複数の情報を入れ替えたり、前後に文字を付け加えたりできちゃうわけです。

古いコードでよくある class="btn" を class="btn btn-primary" みたいに追加クラスを足したいとき。

検索：class="btn"
置換：class="btn btn-primary"

でも、すべてのbtnじゃなくて、特定の条件だけ変えたい場合は、正規表現を活用します。
例えば、 <button class="btn"> という特定のパターンだけ置換したいなら：

検索（正規表現ON）：<button class="btn">
置換：<button class="btn btn-primary">

現場でよくあるのが、 data-id="123" みたいな古いデータ属性を data-product-id="123" に変更するパターン。
複数ファイルにある場合は大変ですよね。

検索（正規表現ON）：data-id="([^"]*)"
置換：data-product-id="$1"

この場合、括弧 () で囲んだ [^"]* は「ダブルクォートじゃない任意の文字」を意味します。
つまり、123のような値を $1 として置換文で再利用できるわけです。
めっちゃ便利でしょ？

JavaScriptの関数を修正するとき、複数行の処理を一括で変更したいことってありますよね。
例えば、古い console.log の記述をすべて削除したいとか。

複数ファイルから検索する場合、 Ctrl+Shift+F を使います。
そして正規表現で console\.log$.*$; みたいに指定すれば、マッチした部分をすべて置換できるんです。
ほんま手作業の数分の1の時間で終わります。

僕の現場での経験では、こういう一括置換で月に数時間は時間が浮くんですよ。
その浮いた時間を設計とか品質向上に使えるから、ほんまに大事なスキルやと思います。

VSCodeの検索と置換は、多くの人が「テキストを探すだけ」という浅い使い方をしています。
でも正規表現を理解して、複数ファイルでの一括置換を使いこなせば、もう手作業では戻れなくなりますよ。

最初は正規表現が難しく感じるかもしれません。
でも「括弧で囲んだ部分を $1 で参照する」ということだけ覚えておけば、基本的なパターンは対応できちゃいます。

次に何か大量のコードを修正するときがあったら、ぜひこの検索と置換機能を試してみてください。
時間削減の快感を一度知ったら、やめられませんよ。

Web制作で困ったことがあったら、またこのブログを覗いてくださいね！

― クリオ