VS Codeで複数条件をスマートに検索！作業効率が劇的に上がる方法

プログラミング・IT

「VS Codeで複数のキーワードを一気に検索したいけど、どうやればいいの？」
「特定のファイルは検索したくない…」

そんな悩み、ありませんか？

VS Codeはシンプルに見えて、実は強力な検索機能を備えています。

ちょっとしたコツを知るだけで、複数条件での検索や除外が一気に楽になります。

この記事では、以下の内容を具体的に解説します：

  • VS Codeの基本検索機能の確認
  • 正規表現を使った複数条件検索
  • ファイル・フォルダの絞り込みと除外
  • 実際の開発での活用例
  • 検索結果の効率的な活用法
  • よくあるトラブルと解決方法

複数条件検索をマスターして、開発効率を劇的に向上させましょう！

スポンサーリンク

VS Code検索機能の基本確認

基本的な検索ショートカット

VS Codeでの検索は以下が基本です：

操作ショートカット効果
ファイル内検索Ctrl + F現在開いているファイル内を検索
プロジェクト全体検索Ctrl + Shift + Fワークスペース全体を検索
ファイル内置換Ctrl + H現在のファイル内で検索・置換
プロジェクト全体置換Ctrl + Shift + Hワークスペース全体で検索・置換

検索オプションの活用

検索バーの右側に並ぶオプションを理解しましょう：

基本オプション

Aa – 大文字小文字を区別

検索: "User"
区別あり: User, UserInfo
区別なし: user, User, USER, userInfo

Ab – 完全一致

検索: "user"
完全一致あり: user のみ
完全一致なし: user, username, userInfo

.* – 正規表現

検索: "user.*"
結果: user, username, userInfo, userManager

プロジェクト全体検索の詳細

Ctrl + Shift + Fを押すと、左のサイドバーに検索パネルが表示されます：

? 検索キーワード入力欄
? 置換文字列入力欄
? 検索対象ファイル指定
? 除外ファイル指定
⚙️ 検索オプション
? 検索結果表示

正規表現を使った複数条件検索

OR検索（いずれかのキーワードを含む）

基本的なOR検索

構文: (キーワード1|キーワード2|キーワード3)

例1: エラー関連のキーワードを検索

(error|warning|exception)

結果

console.error("Something went wrong");     // ヒット
throw new Error("Invalid input");          // ヒット
console.warn("This is deprecated");        // ヒット (warning の省略形)
if (result.hasException) {                 // ヒット

例2: HTTPメソッドの検索

(GET|POST|PUT|DELETE)

結果

app.get('/users', handler);                // ヒット
fetch('/api/data', { method: 'POST' });   // ヒット
router.put('/users/:id', updateUser);     // ヒット

より複雑なOR検索

例3: 異なる関数名パターン

(function\s+\w+|const\s+\w+\s*=|let\s+\w+\s*=)

結果

function calculateTotal() {}               // ヒット
const processData = () => {};             // ヒット
let handleSubmit = function() {};         // ヒット

AND検索（複数キーワードをすべて含む）

先読みアサーションを使用

構文: (?=.*キーワード1)(?=.*キーワード2).*

例1: 非同期処理での検索

(?=.*async)(?=.*await).*

結果

async function fetchData() {
    const result = await fetch('/api');   // ヒット（async と await を含む）
    return result.json();
}

例2: エラーハンドリングの検索

(?=.*try)(?=.*catch).*

結果

try {                                     // この行から
    const data = await apiCall();
} catch (error) {                        // この行まで（try と catch を含む範囲）
    console.log(error);
}

順序を指定したAND検索

例3: 特定の順序でのキーワード

function.*async.*await

結果

function async processData() {
    const result = await fetch();         // ヒット
}

NOT検索（特定のキーワードを除外）

否定的先読みを使用

構文: (?!.*除外キーワード)検索キーワード

例1: console.logを除外したconsole文

console\.(?!log).*

結果

console.log("debug");                     // 除外
console.error("error message");           // ヒット
console.warn("warning message");          // ヒット

例2: テストファイルを除外した関数検索

(?!.*test).*function.*

ファイル・フォルダの絞り込みと除外

検索対象ファイルの指定

ファイル拡張子での絞り込み

特定の拡張子のみ

**/*.js
**/*.ts
**/*.jsx
**/*.tsx

複数拡張子の指定

**/*.{js,ts,jsx,tsx}

特定フォルダ内のファイル

src/**/*.js
components/**/*.tsx

実用的なファイル指定例

フロントエンド関連ファイルのみ

**/*.{js,ts,jsx,tsx,vue,html,css,scss}

設定ファイルのみ

**/*.{json,yaml,yml,toml,ini,conf}

ドキュメントファイルのみ

**/*.{md,txt,rst,adoc}

ファイル・フォルダの除外

よく使われる除外パターン

node_modules の除外

**/node_modules/**

ビルド成果物の除外

**/dist/**
**/build/**
**/out/**

テストファイルの除外

**/*.test.*
**/*.spec.*
**/test/**
**/tests/**

包括的な除外設定

**/node_modules/**,**/dist/**,**/build/**,**/*.min.js,**/*.bundle.js,**/coverage/**

高度なパターンマッチング

グロブパターンの活用

特定の深さのフォルダ

src/*/components/*.tsx

否定パターン

!**/node_modules/**
!**/*.test.js

複雑な条件の組み合わせ

src/**/*.{js,ts}

除外:

**/node_modules/**,**/*.test.*,**/*.spec.*

実際の開発での活用例

バグ調査での複数条件検索

例1: API エラーの調査

検索条件

正規表現: (error|exception|fail.*|400|404|500)
対象ファイル: **/*.{js,ts,jsx,tsx}
除外: **/node_modules/**,**/*.test.*

結果の活用

  • エラーハンドリングの漏れを発見
  • 一貫していないエラーメッセージを統一
  • 404エラーの対応漏れをチェック

例2: メモリリークの調査

検索条件

正規表現: (addEventListener|setInterval|setTimeout)
AND検索: (?=.*addEventListener)(?!.*removeEventListener).*

目的: イベントリスナーの削除漏れを発見

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

例3: 古いAPIの使用箇所特定

検索条件

正規表現: (\.then\(|\.catch\(|new Promise)
対象ファイル: src/**/*.js

目的: Promise を async/await に移行する対象を特定

例4: 未使用のimport文の検索

検索条件1: import文を検索

正規表現: ^import.*from

検索条件2: 使用箇所を検索

各import名で個別検索

セキュリティ監査での活用

例5: 機密情報の検索

検索条件

正規表現: (password|secret|token|api[_-]?key|private[_-]?key)
除外: **/node_modules/**,**/*.md

結果の確認

  • ハードコードされた認証情報
  • 環境変数として外出しすべき設定
  • ログに出力される機密情報

例6: SQLインジェクション脆弱性

検索条件

正規表現: (SELECT|INSERT|UPDATE|DELETE).*\+.*

目的: 文字列連結でのSQL構築を発見

検索結果の効率的な活用

検索結果の操作

一括置換の実行

手順

  1. Ctrl + Shift + F で検索実行
  2. 置換フィールドに新しい値を入力
  3. 置換アイコンまたは Ctrl + Shift + 1 で一つずつ置換
  4. Ctrl + Alt + Enter ですべて置換

実例: ログレベルの変更

検索: console\.log\(
置換: console.debug(

検索結果のフィルタリング

検索実行後、結果をさらに絞り込むことができます：

方法1: ファイル名での絞り込み

  • 検索結果のファイル名をクリックして特定ファイルのみ表示

方法2: 追加の除外条件

  • 歯車アイコンから除外条件を追加

Search Editor の活用

Search Editor とは

検索条件と結果を永続化できる機能です。

起動方法

  1. Ctrl + Shift + F で検索実行
  2. 検索パネル上部の「エディターで開く」アイコンをクリック
  3. または Ctrl + Shift + P → “Search Editor: New Search Editor”

Search Editor の利点

再利用可能な検索

# 定期的なコードレビュー用検索
(TODO|FIXME|HACK|XXX)
files to include: src/**/*.{js,ts}
files to exclude: **/*.test.*

検索結果の保存

  • 検索結果をファイルとして保存
  • チーム間での共有が可能
  • 調査レポートとしても活用

実用例: 定期監査用検索

ファイル名: security-audit.code-search

# セキュリティ監査用検索設定
query: (password|secret|token|api[_-]?key)
flags: RegExp
otherFlags: 
filesToInclude: src/**/*.{js,ts,jsx,tsx}
filesToExclude: **/node_modules/**,**/*.test.*

カスタム設定と最適化

検索設定のカスタマイズ

settings.json での設定

{
  // 検索関連の設定
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true,
    "**/coverage": true,
    "**/dist": true,
    "**/build": true,
    "**/.git": true,
    "**/.vscode": true,
    "**/*.min.js": true
  },
  
  // 検索結果の表示設定
  "search.showLineNumbers": true,
  "search.smartCase": true,
  "search.searchOnType": true,
  
  // パフォーマンス関連
  "search.maxResults": 20000,
  "search.followSymlinks": false,
  
  // 検索時のファイル監視
  "search.useReplacePreview": true,
  "search.useIgnoreFiles": true
}

よく使う検索パターンの登録

スニペットとして保存

User Snippets に登録

{
  "Error Search": {
    "prefix": "search-error",
    "body": [
      "(error|exception|fail.*|\\berr\\b)"
    ],
    "description": "エラー関連キーワードの検索"
  },
  
  "API Search": {
    "prefix": "search-api",
    "body": [
      "(?=.*fetch)(?=.*await).*"
    ],
    "description": "非同期API呼び出しの検索"
  }
}

検索の自動化

タスクランナーとの連携

.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Find TODOs",
      "type": "shell",
      "command": "grep",
      "args": [
        "-r",
        "--include=*.js",
        "--include=*.ts",
        "TODO\\|FIXME\\|HACK",
        "src/"
      ],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    }
  ]
}

よくあるトラブルと解決方法

正規表現が効かない

症状1: 正規表現モードが無効

確認方法: 検索バーの .* アイコンが青くなっているか確認

解決方法: .* アイコンをクリックして有効化

症状2: エスケープの問題

よくある間違い

間違い: .js（ドットがワイルドカード扱い）
正しい: \.js（ドットをエスケープ）

間違い: function(
正しい: function\(

検索結果が多すぎる

対策1: より具体的な条件指定

改善前

検索: user
結果: 1000+ hits

改善後

検索: (?=.*user)(?=.*function).*
対象: **/*.js
結果: 50 hits

対策2: 段階的な絞り込み

  1. 大まかな検索: user
  2. ファイル種別で絞り込み: **/*.js
  3. 除外条件追加: !**/*.test.js
  4. さらに詳細な条件: (?=.*user)(?=.*create)

検索が遅い

原因: 大きなファイル・フォルダの包含

解決策1: 効率的な除外設定

{
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.git": true,
    "**/coverage": true,
    "**/*.min.js": true,
    "**/*.bundle.js": true
  }
}

解決策2: 検索対象の限定

対象ファイル: src/**/*.{js,ts}
（プロジェクト全体ではなく、srcフォルダのみ）

実践的な活用シナリオ

シナリオ1: 新規参加プロジェクトの理解

フェーズ1: 全体構造の把握

API エンドポイントの確認

検索: /api/[^"'\s]+
対象: **/*.{js,ts,jsx,tsx}

主要な設定ファイルの確認

検索: (config|setting|env)
対象: **/*.{js,ts,json,yaml}

フェーズ2: 開発パターンの理解

状態管理の確認

検索: (useState|useReducer|redux|store)
対象: **/*.{js,ts,jsx,tsx}

エラーハンドリングのパターン

検索: (try.*catch|\.catch\(|error.*handler)
対象: **/*.{js,ts}

シナリオ2: パフォーマンス改善の調査

重い処理の特定

同期的な重い処理

検索: (for.*length|while.*|\.map\(.*\.map\()
対象: **/*.{js,ts}
除外: **/*.test.*

メモリリークの可能性

検索: (?=.*addEventListener)(?!.*removeEventListener).*
対象: **/*.{js,ts,jsx,tsx}

シナリオ3: セキュリティ監査

機密情報の漏洩チェック

ハードコードされた認証情報

検索: (password\s*[=:]\s*["']|api[_-]?key\s*[=:]\s*["']|secret\s*[=:]\s*["'])
対象: **/*.{js,ts,json,yaml}
除外: **/node_modules/**

SQLインジェクション脆弱性

検索: (SELECT|INSERT|UPDATE|DELETE).*\$\{.*\}
対象: **/*.{js,ts}

まとめ

VS Codeの複数条件検索をマスターすることで、以下の効果が得られます：

主要なテクニック

  • 正規表現でのOR/AND検索 – 複雑な条件を一度に処理
  • ファイル・フォルダの絞り込み – 必要な範囲だけを効率的に検索
  • 除外設定の活用 – 不要なファイルを検索対象から除外
  • Search Editor – 検索条件の保存と再利用

実用的な検索パターン

基本パターン

OR検索: (keyword1|keyword2|keyword3)
AND検索: (?=.*keyword1)(?=.*keyword2).*
NOT検索: (?!.*exclude).*keyword.*

ファイル指定

JavaScript系: **/*.{js,ts,jsx,tsx}
設定ファイル: **/*.{json,yaml,yml,toml}
ドキュメント: **/*.{md,txt,rst}

除外設定

開発環境: **/node_modules/**,**/dist/**,**/build/**
テスト: **/*.test.*,**/*.spec.*,**/test/**

効果的な活用法

  1. 段階的な絞り込み – 大まかな検索から詳細条件へ
  2. 検索条件の保存 – Search Editor で再利用可能に
  3. チーム共有 – 検索設定をプロジェクトで共有
  4. 自動化 – タスクランナーと連携した定期実行

Youtube

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

スポンサーリンク

コメント

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