VS Codeで一括置換する方法｜複数ファイルもまとめて検索・置換

プログラミング・IT

プログラミングやテキスト編集をしていて、こんな場面に遭遇したことはありませんか？

「変数名を変更したけど、プロジェクト全体で同じ名前を使っている箇所がたくさんある」
「APIのエンドポイントURLが変わったので、全ファイルで一括変更したい」
「コメントの誤字を全て修正したい」

こうした作業を手動で行うと、時間がかかるだけでなく、修正漏れのリスクもあります。

VS Codeの一括置換機能を使えば、これらの作業を安全かつ効率的に実行できます。

この記事では、VS Codeで一括置換を行う方法を基本から応用まで、初心者にもわかりやすく解説します。

スポンサーリンク

一括置換の基本概念

一括置換とは

一括置換は、指定した文字列パターンに一致するすべての箇所を、別の文字列に同時に変更する機能です。

一括置換の利点

効率性の向上

  • 手動修正に比べて圧倒的に高速
  • 数百、数千箇所の変更も一瞬で完了
  • 作業時間の大幅短縮

正確性の確保

  • 人的ミスによる修正漏れを防止
  • 一貫した変更の適用
  • 変更履歴の明確な記録

開発生産性の向上

  • リファクタリング作業の効率化
  • 仕様変更への迅速な対応
  • コードの保守性向上

VS Codeの置換機能の種類

1. ファイル内置換

  • 現在開いているファイル内のみで置換
  • 小規模な修正に適している
  • リアルタイムプレビューが可能

2. プロジェクト全体置換

  • ワークスペース内の全ファイルを対象
  • 大規模なリファクタリングに適している
  • ファイル種別やディレクトリでの絞り込み可能

3. 選択範囲置換

  • 選択したテキスト範囲内のみで置換
  • 部分的な修正に適している
  • 慎重な変更作業に有効

ファイル内一括置換の方法

基本的な置換手順

ショートカットキーでの起動

Windows/Linux:

Ctrl + H

macOS:

Cmd + Option + F

置換パネルの構成

置換パネルが表示されると、以下の要素が確認できます：

  1. 検索フィールド: 置換対象の文字列を入力
  2. 置換フィールド: 置換後の文字列を入力
  3. オプションボタン: 大文字小文字の区別、完全一致、正規表現など
  4. 置換ボタン: 個別置換、一括置換の実行

実践的な置換例

例1: 変数名の変更

// 置換前
let userName = 'Alice';
console.log(userName);
if (userName === 'Alice') {
  alert('Hello, ' + userName);
}

// 検索: userName
// 置換: currentUser

// 置換後
let currentUser = 'Alice';
console.log(currentUser);
if (currentUser === 'Alice') {
  alert('Hello, ' + currentUser);
}

例2: 文字列リテラルの修正

# 置換前
print("エラーが発生しました")
log_message = "エラーが発生しました"
error_text = "エラーが発生しました"

# 検索: エラーが発生しました
# 置換: 予期しないエラーが発生しました

# 置換後
print("予期しないエラーが発生しました")
log_message = "予期しないエラーが発生しました"
error_text = "予期しないエラーが発生しました"

置換オプションの活用

大文字小文字の区別

<!-- 大文字小文字を区別しない場合 -->
<div class="Container">
<div class="container">
<div class="CONTAINER">

<!-- 検索: container（大文字小文字区別なし）-->
<!-- 置換: wrapper -->

<!-- 結果: 全て置換される -->
<div class="wrapper">
<div class="wrapper">
<div class="wrapper">

完全一致モード

/* 完全一致を使用しない場合 */
.container { width: 100%; }
.sub-container { width: 50%; }
.mini-container { width: 25%; }

/* 検索: container */
/* 置換: wrapper */

/* 結果: 部分一致で全て置換 */
.wrapper { width: 100%; }
.sub-wrapper { width: 50%; }
.mini-wrapper { width: 25%; }

/* 完全一致を使用した場合 */
/* 検索: container（完全一致有効）*/
/* 置換: wrapper */

/* 結果: 完全一致のみ置換 */
.wrapper { width: 100%; }
.sub-container { width: 50%; }
.mini-container { width: 25%; }

段階的置換の手順

安全な置換プロセス

  1. 事前確認: 置換対象の箇所数を確認
  2. テスト置換: 最初の数箇所を個別に置換
  3. 結果確認: 意図した通りに置換されているかチェック
  4. 一括実行: 問題なければ残り全てを一括置換

置換前のバックアップ

# Gitでの変更追跡（推奨）
git add .
git commit -m "置換作業前のバックアップ"

# ファイルの手動バックアップ
cp important_file.js important_file.js.backup

プロジェクト全体での一括置換

グローバル検索・置換の起動

方法1: サイドバーから

  1. 左サイドバーの虫眼鏡アイコンをクリック
  2. 検索パネルが表示される
  3. 検索フィールドに対象文字列を入力
  4. 置換フィールド（▼アイコンで展開）に新しい文字列を入力

方法2: ショートカットキー

Windows/Linux:

Ctrl + Shift + H

macOS:

Cmd + Shift + H

ファイル・ディレクトリの絞り込み

インクルードパターンの指定

# JavaScript/TypeScriptファイルのみ対象
**/*.{js,ts,jsx,tsx}

# 特定ディレクトリ内のファイルのみ
src/**/*.*

# 複数の拡張子を指定
**/*.{html,css,js}

# 特定のファイル名パターン
**/component*.js

エクスクルードパターンの活用

# node_modulesを除外
**/node_modules/**

# ビルド成果物を除外
**/dist/**
**/build/**

# 設定ファイルを除外
**/.vscode/**
**/.*

実践的なプロジェクト全体置換

例1: API エンドポイントの変更

// 複数ファイルでのAPI URL変更
// 置換前（多数のファイルに散在）
const API_BASE = 'https://api-old.example.com';
fetch('https://api-old.example.com/users');
axios.get('https://api-old.example.com/posts');

// 検索: https://api-old.example.com
// 置換: https://api-new.example.com
// 対象: **/*.{js,ts}

// 置換後
const API_BASE = 'https://api-new.example.com';
fetch('https://api-new.example.com/users');
axios.get('https://api-new.example.com/posts');

例2: CSSクラス名の統一

/* 複数のCSSファイルでクラス名変更 */
/* 置換前 */
.btn-primary { background: blue; }
.button-primary { background: blue; }
.primary-btn { background: blue; }

/* 検索パターン: btn-primary|button-primary|primary-btn */
/* 置換: primary-button */
/* 対象: **/*.{css,scss,less} */

/* 置換後 */
.primary-button { background: blue; }
.primary-button { background: blue; }
.primary-button { background: blue; }

置換結果の確認と管理

置換プレビュー機能

  1. 置換実行前に結果をプレビュー
  2. ファイル別の変更箇所を一覧表示
  3. 個別の変更可否を選択可能
  4. 最終確認後に一括実行

変更履歴の管理

# VS Code のタイムライン機能
# - ファイルの変更履歴を時系列で表示
# - 任意の時点への復元が可能

# Git での変更管理
git diff  # 変更内容の確認
git add . # 変更をステージング
git commit -m "プロジェクト全体でAPI URLを変更"

正規表現を使った高度な置換

正規表現モードの有効化

正規表現モードの開始

  1. 置換パネルを開く
  2. 検索フィールド右側の**「.*」アイコン**をクリック
  3. アイコンがハイライトされ、正規表現モードが有効になる

基本的な正規表現パターン

# 数字にマッチ
\d+

# 英数字にマッチ
[a-zA-Z0-9]+

# 空白文字にマッチ
\s+

# 任意の文字にマッチ
.*

# 行の開始/終了
^  # 行の開始
$  # 行の終了

実用的な正規表現置換例

例1: 数字のフォーマット変更

// 置換前
const price1 = 1000;
const price2 = 2500;
const price3 = 150;

// 検索パターン: (\d+)
// 置換パターン: $1円

// 置換後
const price1 = 1000円;
const price2 = 2500円;
const price3 = 150円;

例2: 日付フォーマットの統一

// 置換前（様々な日付形式）
2024/01/15
2024-01-15
2024.01.15

// 検索パターン: (\d{4})[/-.](\d{2})[/-.](\d{2})
// 置換パターン: $1年$2月$3日

// 置換後
2024年01月15日
2024年01月15日
2024年01月15日

例3: HTMLタグの変更

<!-- 置換前 -->
<div class="old-style">Content 1</div>
<div class="old-style">Content 2</div>
<div class="old-style">Content 3</div>

<!-- 検索パターン: <div class="old-style">(.*?)</div> -->
<!-- 置換パターン: <section class="new-style">$1</section> -->

<!-- 置換後 -->
<section class="new-style">Content 1</section>
<section class="new-style">Content 2</section>
<section class="new-style">Content 3</section>

キャプチャグループの活用

基本的なキャプチャグループ

// 関数名の変更例
// 置換前
function getUserData() { }
function getProductData() { }
function getOrderData() { }

// 検索パターン: function get(\w+)Data\(\)
// 置換パターン: function fetch$1Info()

// 置換後
function fetchUserInfo() { }
function fetchProductInfo() { }
function fetchOrderInfo() { }

複数キャプチャグループの組み合わせ

/* CSSプロパティの値変更 */
/* 置換前 */
margin: 10px 20px;
padding: 5px 15px;
border: 2px 8px;

/* 検索パターン: (margin|padding|border):\s*(\d+)px\s*(\d+)px */
/* 置換パターン: $1: $2rem $3rem */

/* 置換後 */
margin: 10rem 20rem;
padding: 5rem 15rem;
border: 2rem 8rem;

高度な正規表現テクニック

先読み・後読みアサーション

// パスワード形式の変更（特定の条件を含む場合のみ）
// 置換前
const password1 = "abc123";     // 英数字混在
const password2 = "abcdef";     // 英字のみ
const password3 = "123456";     // 数字のみ

// 検索パターン: (?=.*\d)(?=.*[a-zA-Z])\w+
// （英字と数字の両方を含む文字列のみマッチ）
// 置換パターン: STRONG_PASSWORD

// 置換後
const password1 = "STRONG_PASSWORD";  // 置換される
const password2 = "abcdef";           // 置換されない
const password3 = "123456";           // 置換されない

条件付き置換

<!-- 特定の属性を持つタグのみ置換 -->
<!-- 置換前 -->
<img src="image1.jpg" alt="Description">
<img src="image2.jpg">
<img src="image3.jpg" alt="Another description">

<!-- 検索パターン: <img src="([^"]+)"(?=\s+alt="[^"]+") -->
<!-- 置換パターン: <picture><source srcset="$1"><img src="$1" -->

<!-- alt属性がある場合のみ置換 -->

よくあるトラブルとその対処法

置換後の意図しない結果

問題1: 部分一致による誤置換

// 問題のある例
// 検索: "user"
// 置換: "customer"

// 置換前
const user = 'Alice';
const userData = {...};
const userInfo = {...};
const superUser = 'Admin';

// 意図しない結果
const customer = 'Alice';           // 意図した置換
const customerData = {...};         // 意図しない置換
const customerInfo = {...};         // 意図しない置換
const supercustomer = 'Admin';      // 意図しない置換

解決方法:

# 完全一致パターンを使用
\buser\b

# または具体的なパターンを指定
^user$|user(?=\s|$|[^a-zA-Z])

問題2: 正規表現の特殊文字

// 問題のある例
// 検索: "price.$"（ドットを文字として検索したい）
// しかし、正規表現では"."は任意の文字を意味

const price1$ = 100;
const price2A = 200;  // 意図せずマッチしてしまう

解決方法:

# 特殊文字をエスケープ
price\.\$

# または正規表現モードを無効にして通常検索を使用

パフォーマンスの問題

大規模プロジェクトでの置換

問題: 数万ファイルを含むプロジェクトで置換が遅い

解決策:

  1. ファイル種別で絞り込み **/*.{js,ts,jsx,tsx} # JavaScriptファイルのみ
  2. 除外パターンの活用 !**/node_modules/** !**/dist/** !**/*.min.js
  3. 段階的な置換実行 # ディレクトリ別に分けて実行 src/**/*.* # まずsrcディレクトリ tests/**/*.* # 次にtestsディレクトリ

メモリ使用量の最適化

// settings.json での最適化
{
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/*.log": true
  },
  "files.exclude": {
    "**/node_modules": true,
    "**/.git": true
  }
}

データ保護とバックアップ

置換前の安全対策

# 1. Gitでの変更管理
git add .
git commit -m "置換作業前のコミット"

# 2. ブランチでの作業
git checkout -b feature/mass-replace
# 置換作業実行
git add .
git commit -m "一括置換完了"

# 3. 問題があった場合の復元
git checkout main
git branch -D feature/mass-replace

VS Code の復元機能

// VS Code タイムライン機能の活用
// - ファイルエクスプローラーでファイルを右クリック
// - "タイムライン"を表示
// - 任意の時点のバージョンを表示・復元可能

// Ctrl + Z による段階的な取り消し
// - 置換操作は一つの操作として記録
// - Ctrl + Z で一括で取り消し可能

高度な置換テクニック

スニペットとの組み合わせ

カスタムスニペットでの置換パターン登録

// .vscode/settings.json
{
  "editor.snippetSuggestions": "top",
  "editor.suggest.snippetsPreventQuickSuggestions": false
}

// スニペットファイル例
{
  "Console log replacement": {
    "prefix": "clog-replace",
    "body": [
      "console.log('$1:', $1);"
    ],
    "description": "Console log with variable name"
  }
}

マクロ機能との連携

複雑な置換パターンの自動化

// マクロ設定例
{
  "macros": {
    "replaceAndFormat": [
      "editor.action.startFindReplaceAction",
      "editor.action.formatDocument",
      "workbench.action.files.save"
    ]
  }
}

拡張機能との連携

置換作業を支援する拡張機能

Multiple Replace

  • 複数の置換パターンを一度に実行
  • 設定ファイルでパターンを管理

Regex Previewer

  • 正規表現パターンのリアルタイムプレビュー
  • マッチ結果の視覚的確認

Find and Transform

  • より柔軟な変換ルールの設定
  • 条件付き置換の実行

実際の開発での活用例

リファクタリングでの活用

クラス名の変更

// 置換前（複数ファイルに散在）
class UserManager {
  constructor() { }
}

const manager = new UserManager();
const userMgr = new UserManager();

// 検索パターン: UserManager
// 置換パターン: AccountManager
// 対象ファイル: **/*.{js,ts}

// 置換後
class AccountManager {
  constructor() { }
}

const manager = new AccountManager();
const userMgr = new AccountManager();

設定値の更新

# 設定ファイルの一括更新
# 置換前
DATABASE_HOST = "localhost"
DATABASE_PORT = 5432
DATABASE_NAME = "development"

# 検索パターン: DATABASE_(\w+) = "([^"]*)"
# 置換パターン: DB_$1 = "$2"

# 置換後
DB_HOST = "localhost"
DB_PORT = 5432
DB_NAME = "development"

ドキュメンテーションの更新

APIドキュメントの修正

<!-- バージョン情報の一括更新 -->
<!-- 置換前 -->
## API Version 1.0
This API version 1.0 provides...
For version 1.0 documentation...

<!-- 検索パターン: version 1\.0 -->
<!-- 置換パターン: version 2.0 -->

<!-- 置換後 -->
## API Version 2.0
This API version 2.0 provides...
For version 2.0 documentation...

国際化対応

文字列の多言語化

// 文字列リテラルの置換
// 置換前
alert("Hello, World!");
console.log("Error occurred");
const message = "Welcome to our site";

// 検索パターン: "([^"]*)"
// 置換パターン: t('$1')

// 置換後
alert(t("Hello, World!"));
console.log(t("Error occurred"));
const message = t("Welcome to our site");

まとめ

VS Codeの一括置換機能は、開発効率を大幅に向上させる強力なツールです。

重要なポイント

  • ファイル内置換: Ctrl + Hで現在のファイル内を効率的に置換
  • プロジェクト全体置換: グローバル検索で複数ファイルを一括処理
  • 正規表現活用: 柔軟なパターンマッチングで高度な置換を実現
  • 安全な作業: バックアップと段階的実行で安全性を確保

効果的な活用方法

  • 事前準備: バックアップとテスト実行で安全性を確保
  • 段階的実行: 小規模テストから大規模実行への段階的アプローチ
  • パターン活用: 正規表現とキャプチャグループで柔軟な変換
  • ツール連携: 拡張機能やマクロとの組み合わせで更なる効率化

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました