VS Codeの検索を使いこなそう|ファイル内からプロジェクト全体まで一発検索

プログラミング・IT

「この関数どこに書いたっけ?」「プロジェクト全体からキーワードを一気に探したい!」そんな経験はありませんか?

Visual Studio Code(VS Code)の強力な検索機能を使えば、ファイル内はもちろん、プロジェクト全体のソースコードや設定ファイルから一瞬で目的の文字列を探し出せます

この記事では、VS Codeの検索の基本的な使い方から、複数ファイル検索・正規表現・除外設定まで 初心者にもわかりやすく紹介します。これらの機能をマスターすれば、大規模なプロジェクトでも効率的に作業できるようになります。

スポンサーリンク

VS Code検索機能の種類と特徴

検索機能の概要

VS Codeには主に3つの検索機能があります:

検索タイプ対象範囲主な用途ショートカット
ファイル内検索現在のファイル特定の変数や関数を探すCtrl + F
グローバル検索プロジェクト全体複数ファイルから文字列を探すCtrl + Shift + F
ファイル検索ファイル名ファイル名で素早く開くCtrl + P

検索の使い分け

ファイル内検索を使う場面

  • 現在編集中のファイルで特定の変数を探したい
  • 関数の定義箇所を確認したい
  • 同じ文字列がファイル内に何回出てくるか知りたい

グローバル検索を使う場面

  • 関数がどこで使われているか調べたい
  • プロジェクト全体で設定値を変更したい
  • 特定のAPIやライブラリの使用箇所を調べたい

ファイル検索を使う場面

  • ファイル名の一部だけ覚えている場合
  • 素早く別のファイルに移動したい
  • エクスプローラーを開かずにファイルを開きたい

ファイル内検索の詳細な使い方

基本的な検索操作

検索の開始

ショートカットキー

Windows / Linux

Ctrl + F

macOS

Cmd + F

このショートカットを押すと、画面右上に検索ボックスが表示されます。

基本的な操作

検索結果の移動

  • Enter または F3:次の結果へ移動
  • Shift + Enter または Shift + F3:前の結果へ移動
  • Esc:検索ボックスを閉じる

実際の使用例

function calculateTotal(items) {
    let total = 0;
    for (let item of items) {
        total += item.price;
    }
    return total;
}

function displayTotal(total) {
    console.log(`合計: ${total}円`);
}

// 「total」を検索すると、4箇所がハイライトされる

検索オプションの活用

大文字小文字の区別

アイコン: Aa

使用例:

  • 検索語:Total
  • 大文字小文字を区別する場合:Total のみマッチ
  • 区別しない場合:total, Total, TOTAL すべてマッチ

単語単位での検索

アイコン: Ab

使用例:

# ファイル内容
user_name = "田中"
username = "tanaka"
get_user_name_from_id = user_id

# 「user」で検索した場合
# 単語単位OFF:user_name, username, get_user_name_from_id すべてヒット
# 単語単位ON:該当なし(独立した「user」がないため)

正規表現検索

アイコン: .*

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

パターン意味
\d+1つ以上の数字123, 45
[a-zA-Z]+1つ以上の英字hello, World
\w+@\w+\.\w+メールアドレスtest@example.com
function\s+\w+関数定義function getName

実用例:

// 関数定義を検索
検索パターン: function\s+\w+\(

// 該当箇所
function calculateTotal(items) {
function displayTotal(total) {
function getUserName(id) {

検索と置換の組み合わせ

置換機能の起動

ショートカット:

Ctrl + H (Windows/Linux)
Cmd + Option + F (macOS)

実用的な置換例

変数名の一括変更

// 変更前
let userName = "田中";
console.log(userName);
setUserName(userName);

// 検索: userName
// 置換: currentUser
// ↓
// 変更後
let currentUser = "田中";
console.log(currentUser);
setUserName(currentUser);

文字列の統一

/* 色の値を統一 */
/* 検索: #ff0000 */
/* 置換: #red */

.error { color: #ff0000; }
.warning { border: 1px solid #ff0000; }
/* ↓ */
.error { color: #red; }
.warning { border: 1px solid #red; }

プロジェクト全体検索(グローバル検索)

基本的な使い方

検索の開始

ショートカットキー

Windows / Linux

Ctrl + Shift + F

macOS

Cmd + Shift + F

アクティビティバーから: 左側の虫眼鏡アイコン(?)をクリック

検索結果の見方

検索結果は以下の形式で表示されます:

? プロジェクトフォルダ
  ? src/main.js (3)
    12: function calculateTotal(items) {
    18:   return total;
    25: displayTotal(result);
  ? src/utils.js (1)
    5: const total = items.reduce(...);
  • ファイル名の後の数字(3)は該当行数
  • 行番号と該当行の内容が表示される
  • クリックするとその場所にジャンプ

検索対象の指定と除外

対象ファイルの指定

files to include 欄での指定方法:

パターン対象
*.jsすべてのJSファイルmain.js, utils.js
src/**/*.pysrcフォルダ以下のPythonファイルsrc/main.py, src/lib/helper.py
*.{js,ts}JSとTSファイルapp.js, types.ts
test/**testフォルダ以下のすべてのファイルtest/unit.js, test/e2e/app.test.js

除外設定

files to exclude 欄での除外方法:

基本的な除外設定

node_modules
dist
build
.git
*.log

プロジェクト別の除外設定

JavaScript/Node.js プロジェクト

node_modules
dist
build
coverage
.nyc_output
*.min.js

Python プロジェクト

__pycache__
.venv
venv
*.pyc
.pytest_cache
dist
build

Java プロジェクト

target
*.class
.gradle
build

高度な検索テクニック

複数条件での検索

OR検索

(function|class|interface)

特定の拡張子内での検索

files to include: *.{js,jsx,ts,tsx}
検索語: useState

コンテキスト検索

import文の検索

検索パターン: import.*react
結果: import React from 'react'
     import { useState } from 'react'

関数呼び出しの検索

検索パターン: \.map\(
結果: items.map(item => ...)
     numbers.map(n => n * 2)

ファイル検索(クイックオープン)

基本的な使い方

ファイル検索の起動

ショートカット:

Ctrl + P (Windows/Linux)
Cmd + P (macOS)

検索方法

ファイル名の一部で検索

入力: comp
候補: Component.js, CompanyInfo.jsx, styles/components.css

パスを含めた検索

入力: src/comp
候補: src/Component.js, src/components/Header.jsx

特殊なコマンド

シンボル検索

現在のファイル内のシンボル

Ctrl + Shift + O
@で始める: @function, @class

プロジェクト全体のシンボル

Ctrl + T
#で始める: #calculateTotal

行番号へのジャンプ

Ctrl + G
行番号を入力: 150

特定のファイルの特定行へ

Ctrl + P
filename:行番号: app.js:25

正規表現を使った高度な検索

実用的な正規表現パターン

コメントの検索

JavaScript/Java のコメント

検索パターン: //.*$
結果: // これはコメントです

CSS のコメント

検索パターン: /\*.*?\*/
結果: /* スタイル定義 */

関数定義の検索

JavaScript の関数

検索パターン: function\s+(\w+)\s*\(
結果: function calculateTotal(
     function displayMessage(

Python の関数

検索パターン: def\s+(\w+)\s*\(
結果: def calculate_total(
     def display_message(

データパターンの検索

メールアドレス

検索パターン: \b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b
結果: user@example.com, test.email@domain.co.jp

電話番号(日本)

検索パターン: \d{2,4}-\d{2,4}-\d{4}
結果: 03-1234-5678, 090-1234-5678

URL

検索パターン: https?://[^\s]+
結果: https://example.com, http://localhost:3000

置換での正規表現活用

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

関数名の変更

検索: function\s+(\w+)\s*\(
置換: function new$1(
結果: function calculateTotal( → function newCalculateTotal(

HTMLタグの変換

検索: <(\w+)>(.*?)</\1>
置換: [$1]$2[/$1]
結果: <div>content</div> → [div]content[/div]

検索履歴と設定

検索履歴の活用

検索履歴の確認

検索ボックス内で上下矢印キーを押すと、過去の検索履歴を呼び出せます。

履歴のクリア

  1. コマンドパレット(Ctrl + Shift + P)を開く
  2. 「Clear Search History」を選択

検索設定のカスタマイズ

settings.json での設定

{
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/*.log": true
  },
  "search.useGlobalIgnoreFiles": true,
  "search.useIgnoreFiles": true,
  "search.smartCase": true,
  "search.collapseResults": "auto"
}

設定項目の説明

設定説明推奨値
search.exclude検索から除外するファイル/フォルダ上記参照
search.useGlobalIgnoreFiles.gitignoreを検索でも使用true
search.smartCase大文字が含まれる場合のみ大文字小文字を区別true
search.collapseResults結果の折りたたみ"auto"

パフォーマンス最適化

大きなプロジェクトでの検索高速化

除外設定の最適化

効果的な除外パターン

{
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true,
    "**/build": true,
    "**/target": true,
    "**/.git": true,
    "**/.svn": true,
    "**/coverage": true,
    "**/*.min.js": true,
    "**/*.map": true
  }
}

インデックス化の活用

VS Codeは検索インデックスを自動作成しますが、以下の設定で制御可能:

{
  "search.maintainFileSearchCache": true,
  "search.maxResults": 20000
}

メモリ使用量の最適化

検索結果の制限

{
  "search.maxResults": 10000,
  "search.collapseResults": "alwaysCollapse"
}

実用的な検索活用例

開発フローでの活用

バグ調査

エラーメッセージから原因を探す

1. エラーログからキーワードを抽出
2. Ctrl + Shift + F でプロジェクト全体検索
3. 該当箇所を特定して修正

未使用コードの特定

1. 関数名でグローバル検索
2. 定義箇所と使用箇所を確認
3. 使用されていない関数を削除

リファクタリング

変数名の統一

1. 古い変数名で検索
2. 置換機能で新しい名前に一括変更
3. テストを実行して動作確認

ライブラリの移行

1. 古いライブラリ名で検索
2. import文を新しいライブラリに置換
3. API変更に応じてコードを修正

チーム開発での活用

コードレビュー

TODOコメントの確認

検索語: TODO|FIXME|HACK
結果: プロジェクト内の要修正箇所を一覧表示

スタイルガイド違反の検索

検索パターン: console\.log\(
結果: 本番環境に残すべきでないログ出力を発見

ドキュメント管理

設定値の確認

検索語: config|setting|environment
結果: 設定関連のファイルを素早く特定

トラブルシューティング

よくある問題と解決法

検索結果が表示されない

原因1:除外設定が厳しすぎる

解決法: search.exclude の設定を確認
設定 > 検索 > Exclude で不要な除外を削除

原因2:ファイルが認識されていない

解決法: ワークスペースを再読み込み
Ctrl + Shift + P > "Reload Window"

検索が遅い

原因:大量のファイルが対象になっている

解決法1: 除外設定を追加
解決法2: 検索対象を絞り込み(files to include)
解決法3: 最大結果数を制限

正規表現が動作しない

よくあるミス

❌ 間違い: \d+ (エスケープが不適切)
✅ 正しい: \\d+ (適切なエスケープ)

❌ 間違い: [0-9]+ (文字クラスの記述ミス)
✅ 正しい: [0-9]+ (正しい文字クラス)

まとめ

VS Codeの検索機能を効果的に活用することで、開発効率が大幅に向上します。重要なポイントをまとめると:

基本的な検索操作

  • ファイル内検索Ctrl + F(Mac: Cmd + F)で現在のファイルを検索
  • グローバル検索Ctrl + Shift + F(Mac: Cmd + Shift + F)でプロジェクト全体を検索
  • ファイル検索Ctrl + P(Mac: Cmd + P)でファイル名から素早く開く

検索オプションの活用

  • 大文字小文字の区別Aa アイコンで制御
  • 単語単位検索Ab アイコンで精密な検索
  • 正規表現.* アイコンで複雑なパターン検索

効率化のテクニック

  • 除外設定:不要なファイルを検索対象から除外
  • 対象指定:特定の拡張子やフォルダに限定
  • 検索履歴:過去の検索を再利用

実用的な活用法

  • バグ調査:エラーメッセージからの原因特定
  • リファクタリング:変数名やAPI の一括変更
  • コードレビュー:TODO やスタイル違反の発見

コメント

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