【VSCode】連番・特定パターンを一括置換!正規表現を使った一括テキスト編集テクニック

Visual Studio Code (VSCode) でコーディングやドキュメント作成を行っていると、特定のパターンを持つテキスト大量に編集置換したい場面がよくありますよね。一つ一つ手作業で修正するのは非常に時間がかかり、ミスも発生しやすくなります。

そんな時、VSCodeに搭載されている検索・置換機能の中でも、「正規表現」を活用することで、複雑な条件に一致する文字列を一括で、かつ正確に変更することが可能です。特に、連番を含む文字列や、特定のフォーマットで記述されたタグなどを、別の形式にまとめて変換したい場合に絶大な効果を発揮します。

この記事では、VSCodeの正規表現を用いた置換機能を使って、連番を含む特定のパターンの文字列を一括で別形式に変換する具体的な手順と、知っておくと便利なVSCodeの検索オプションについて解説します。このテクニックをマスターすれば、テキスト編集の効率が格段に向上するはずです。


この記事の内容

  1. 置換したい文字列の例(連番パターン)
  2. 正規表現を使った置換手順 (VSCode)
  3. VSCode検索・置換の便利オプション
  4. まとめ:正規表現でVSCodeのテキスト編集を効率化

置換したい文字列の例(連番パターン)

今回は例として、以下のような[A1_xxxx](xxxxは4桁の連番)という形式の文字列を、|#A1_xxxx|という形式に一括で変換するケースを考えます。

置換前後の文字列比較例

置換前:


[A1_0001]
[A1_0002]
[A1_0003]
[A1_0004]
[A1_0005]
[A1_0006]
[A1_0007]
[A1_0008]
[A1_0009]
... (続く)

置換後(目標):


|#A1_0001|
|#A1_0002|
|#A1_0003|
|#A1_0004|
|#A1_0005|
|#A1_0006|
|#A1_0007|
|#A1_0008|
|#A1_0009|
... (続く)

これはあくまで一例ですが、ログデータのフォーマット変換、マークダウン記法の変更、特定の命名規則を持つIDの一括編集など、様々な場面で応用できるテクニックです。


正規表現を使った置換手順 (VSCode)

VSCodeで上記の置換を行う手順は以下の通りです。

  1. ファイルを開く: 置換対象のテキストが含まれるファイルをVSCodeで開きます。
  2. 検索・置換バーを表示:
    • Windows/Linux: Ctrl + H キーを押します。(Ctrl + F は検索のみ)
    • Mac: Cmd + Option + F キーを押します。(Cmd + F は検索のみ)

    これにより、検索フィールドと置換フィールドが表示されます。

  3. 正規表現モードを有効化: 検索フィールドの右側にある「.*」アイコン(正規表現を使用)をクリックしてオン(選択状態)にします。

    VSCodeの検索置換バーと正規表現アイコン
  4. 検索パターン(正規表現)を入力: 検索フィールド(上の入力欄)に、置換したい文字列のパターンを正規表現で入力します。今回の例では以下を入力します。
    \[A1_(\d{4})\]

    • \[\] : 角括弧は正規表現で特別な意味を持つため、バックスラッシュ \ を付けて文字そのものとして扱います(エスケープ)。
    • A1_ : この文字列に完全に一致します。
    • (\d{4}) :
      • \d : 任意の数字(0-9)を表します。
      • {4} : 直前の\dがちょうど4回繰り返されることを意味します(つまり4桁の数字)。
      • (...) : カッコで囲むことで、この部分(4桁の数字)を「キャプチャグループ」として後で利用できるようにします。これが$1の正体です。

    この正規表現は、「[A1_ で始まり、4桁の数字が続き、] で終わる」文字列にマッチします。

  5. 置換パターンを入力: 置換フィールド(下の入力欄)に、置換後の文字列形式を入力します。ここでは「キャプチャグループ」を利用します。
    |#A1_$1|

    • |#A1_ : 置換後の文字列の先頭部分です。
    • $1 : 検索パターン内の1番目のキャプチャグループ(\d{4})にマッチした内容(つまり元の4桁の数字)を参照します。
    • | : 置換後の文字列の末尾部分です。

    これにより、元の4桁の数字を保持したまま、前後に指定した文字を追加する形で置換が行われます。

  6. 置換の実行:
    • 置換フィールドの右側にある「すべて置換 (Replace All)」ボタン(アイコンは通常、複数の四角形が重なった形)をクリックします。
    • これにより、ファイル内で検索パターンに一致するすべての箇所が、指定した置換パターンに従って一括で変更されます。(個別に確認しながら置換したい場合は、「置換 (Replace)」ボタンを一つずつ押します)

正規表現のキャプチャグループ($1など)を活用することで、単なる文字列の置き換えだけでなく、元の文字列の一部を保持しながらフォーマットを変換する、といった複雑な置換作業も簡単に行えます。これにより、手作業では時間のかかる定型的な編集作業の効率を大幅に向上させることができます。


VSCode検索・置換の便利オプション

VSCodeの検索・置換バーには、正規表現以外にも便利なオプションがあります。これらを使いこなすことで、より効率的で正確な検索・置換が可能になります。(アイコンは検索フィールドの右側に並んでいます)

  1. 大文字と小文字を区別 (Match Case / Aaアイコン):
    大文字と小文字を区別オプション

    このオプションをオンにすると、検索文字列の大文字と小文字が厳密に区別されます。例えば、「Apple」で検索した場合、「apple」や「APPLE」はヒットしません。特定の変数名や定数名などを正確に検索・置換したい場合に有効です。

  2. 単語単位で検索 (Match Whole Word / [ab]アイコンのようなアイコン):
    単語単位で検索オプション

    このオプションをオンにすると、検索文字列が単語として完全に一致する場合のみヒットします。例えば、「cat」で検索した場合、「category」や「concatenate」に含まれる「cat」は無視され、「cat」(スペースや記号で区切られている) のみがヒットします。意図しない部分的な一致を防ぎたい場合に便利です。

  3. 正規表現を使用 (Use Regular Expression / .*アイコン):

    この記事で解説したように、正規表現を使ってより複雑なパターンマッチングを行うためのオプションです。オンにすることで、\d, [], (), $1 などの正規表現特有の記法が利用可能になります。

これらのオプションを状況に応じて組み合わせることで、より柔軟かつ正確なテキスト検索・置換を実現できます。


まとめ:正規表現でVSCodeのテキスト編集を効率化

VSCodeの検索・置換機能で正規表現を活用することで、手作業では時間と手間がかかる複雑なテキスト編集作業を、迅速かつ正確に行うことができます。特に、連番や特定のフォーマットを持つ文字列を一括で変更したい場合には非常に強力です。

今回紹介したキャプチャグループ($1など)を使った置換パターンは、元のデータの一部を活かしながらフォーマットを変換する上で基本的なテクニックとなります。また、「大文字/小文字の区別」や「単語単位検索」といったオプションと組み合わせることで、より精度の高い操作が可能です。

最初は正規表現の記法に戸惑うかもしれませんが、基本的なパターンをいくつか覚えるだけでも、VSCodeでのテキスト編集の生産性は格段に向上します。日々の開発やドキュメント作成で、ぜひこの強力な機能を活用してみてください。

【VSCode】ファイル名の大文字/小文字変更でimport警告(ts1261)? Reload Windowで解決!

VSCodeを使ってWeb開発などを進めていると、コンポーネントのファイル名などを後から変更したくなることがありますよね。例えば、homeHero.jsHomeHero.js のように、大文字/小文字だけを変更した場合。

そんな時、他のファイルからのimport文で、以下のような警告 (ts1261) が表示されて困った経験はありませんか?

Already included file name ‘src/components/home/HomeHero.js’ differs from file name ‘src/components/home/homeHero.js’ only in casing. The file is in the program because: Imported via “./home/HomeHero” from file ‘src/components/Layout.js’ Root file specified for compilationts(1261)

(ファイル名 ‘src/components/home/HomeHero.js’ は、ファイル名 ‘src/components/home/homeHero.js’ と大文字/小文字の区別のみが異なりますが、すでに含まれています。)

パスの指定は間違っていないし、Gitのcore.ignorecase設定も確認済み…。それでも警告が消えない場合、それはエディタ(VSCode)内部のキャッシュや認識の問題である可能性が高いです。

この記事では、この厄介な警告を簡単に解消する方法を紹介します。


解決策:VSCodeのウィンドウを再読み込み (Developer: Reload Window)

結論から言うと、多くの場合、VSCodeのウィンドウを再読み込みするだけでこの警告は解消します。

手順:

  1. VSCode上で Ctrl + Shift + P (Macの場合は Cmd + Shift + P) を押して、コマンドパレットを開きます。
  2. コマンドパレットに「Developer: Reload Window」と入力し、表示されたコマンドを実行します。

これだけでVSCodeのウィンドウがリロードされ、ファイル名の変更が正しく認識されてimport文の警告が消えるはずです。

この「Developer: Reload Window」コマンドは、今回のファイル名変更時の警告以外にも、例えば以下のようなVSCodeのちょっとした不調時にも役立つことがあります。

  • 新しいファイルを作成したのに、コード補完(IntelliSense)がうまく効かない。
  • 拡張機能を入れた後、シンタックスハイライトがおかしくなった。
  • その他、エディタの動作がなんとなく不安定な時。

VSCodeの調子が悪いなと感じたら、まずは「Developer: Reload Window」を試してみるのが手軽で効果的な対処法の一つです。


おまけ: Gitのcore.ignorecase設定について

今回のimport警告(ts1261)の直接的な原因ではありませんでしたが、ファイル名の大文字/小文字変更に関連して、Git側の設定でつまずくこともあります。備忘録としてメモしておきます。

Web開発などで、ファイル名の大文字/小文字だけを変更(例: `index.js` → `Index.js`)しても、Gitがその変更を差分として認識してくれず、コミットできない、あるいはリモートリポジトリに反映されない、という問題が発生することがあります。

これは、Gitのデフォルト設定(特にWindowsやmacOS)で、ファイル名の大文字と小文字を区別しない (`core.ignorecase = true`) ようになっているためです。Gitにとっては `index.js` も `Index.js` も同じファイルだと認識されてしまうのです。

このような場合は、リポジトリの設定でGitに大文字/小文字を区別させるように変更することで解決できます。ターミナル(またはコマンドプロンプト)で、対象リポジトリのディレクトリに移動し、以下のコマンドを実行します。

git config core.ignorecase false

このコマンドを実行すると、そのリポジトリではGitがファイル名の大文字と小文字を区別するようになり、index.js から Index.js への変更なども正しく差分として認識されるようになります。

ファイル名変更がGitに反映されなくて困った場合は、この設定を確認・変更してみてください。(※OSのファイルシステム自体が大文字/小文字を区別しない場合は、別途注意が必要です)