VS Codeの検索ショートカットまとめ|ファイル内・プロジェクト全体を一瞬で検索

プログラミング・IT

Visual Studio Code(VS Code)にはとても便利な検索機能が備わっています。

でも
「どのショートカットでファイル内を検索するんだっけ?」
「プロジェクト全体を調べたいときは?」
と迷うことはありませんか?

この記事では、以下の内容を初心者にもわかりやすくまとめました:

  • 基本的な検索ショートカットキー
  • ファイル内検索と置換の活用法
  • プロジェクト全体での検索・置換
  • 高度な検索オプション(正規表現、条件指定)
  • 実際の開発での活用例
  • よく使う検索パターンと時短テクニック

これを覚えるだけで、コードやドキュメントを探す作業が一気にスピードアップします!

スポンサーリンク

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

必須の検索ショートカット

操作Windows/LinuxMac効果
ファイル内検索Ctrl + FCmd + F現在のファイル内を検索
ファイル内置換Ctrl + HCmd + Option + F現在のファイル内で検索・置換
プロジェクト全体検索Ctrl + Shift + FCmd + Shift + Fワークスペース全体を検索
プロジェクト全体置換Ctrl + Shift + HCmd + Shift + Hワークスペース全体で検索・置換

検索ナビゲーション

操作Windows/LinuxMac効果
次の検索結果F3 または EnterCmd + G次のマッチ箇所へ移動
前の検索結果Shift + F3Cmd + Shift + G前のマッチ箇所へ移動
すべて選択Alt + EnterCmd + Enterマッチしたすべての箇所を選択

ファイル内検索の基本と応用

基本的なファイル内検索

使い方の基本

ステップ1: 検索を開始

  • Ctrl + F(Mac: Cmd + F)を押す
  • 画面上部に検索バーが表示される

ステップ2: 検索キーワードを入力

function calculateTotal

ステップ3: 結果をナビゲート

  • Enterで次の結果へ
  • Shift + Enterで前の結果へ
  • Escapeで検索を終了

実際の使用例

JavaScript関数の検索

// この関数を探したい場合
function calculateTotal(items) {
    return items.reduce((sum, item) => sum + item.price, 0);
}

// 検索キーワード: "calculateTotal"

CSS クラスの検索

/* このクラスを探したい場合 */
.header-navigation {
    display: flex;
    justify-content: space-between;
}

/* 検索キーワード: "header-navigation" */

ファイル内置換

基本的な置換操作

ステップ1: 置換モードを開く

  • Ctrl + H(Mac: Cmd + Option + F

ステップ2: 検索と置換の文字列を入力

検索: oldFunctionName
置換: newFunctionName

ステップ3: 置換の実行

  • 一つずつ置換: Ctrl + Shift + 1
  • すべて置換: Ctrl + Alt + Enter

実用的な置換例

変数名の一括変更

// 変更前
let userName = "John";
console.log(userName);
updateUser(userName);

// 検索: userName
// 置換: userDisplayName

// 変更後
let userDisplayName = "John";
console.log(userDisplayName);
updateUser(userDisplayName);

コメントの統一

# 変更前
# TODO: implement this function
# TODO: add error handling

# 検索: TODO:
# 置換: FIXME:

# 変更後  
# FIXME: implement this function
# FIXME: add error handling

プロジェクト全体検索の活用

基本的なプロジェクト検索

全体検索の開始

ショートカット: Ctrl + Shift + F(Mac: Cmd + Shift + F

検索パネルの構成

? 検索バー
? ファイル/フォルダ制限
⚙️ 検索オプション
? 検索結果

検索結果の見方

結果の表示例

src/components/Header.js
  5:   function HeaderComponent() {
  12:    const headerStyle = {

src/styles/header.css  
  3:   .header {
  15:    .header-title {

高度な検索オプション

ファイル・フォルダの制限

特定フォルダのみ検索

検索対象: src/components/
除外: node_modules/, *.test.js

ファイル形式の指定

含める: *.js, *.ts, *.jsx, *.tsx
除外: *.min.js, *.bundle.js

実用的な検索パターン

APIエンドポイントの検索

検索キーワード: "/api/users"
対象: *.js, *.ts, *.json

未使用の関数を探す

検索キーワード: "function unusedFunction"
結果: 定義箇所のみ表示 → 使われていない可能性

環境変数の使用箇所

検索キーワード: "process.env"
対象: *.js, *.ts
除外: node_modules/

検索オプションの詳細活用

大文字小文字の区別

設定方法

検索バーのAaアイコンをクリック、またはショートカット:

  • Alt + C(大文字小文字の区別をトグル)

活用例

// 大文字小文字を区別しない場合
検索: "user"
ヒット: User, user, USER, userInfo

// 大文字小文字を区別する場合  
検索: "User"
ヒット: User, UserInfo (userやUSERは除外)

単語の完全一致

設定方法

検索バーのAbアイコンをクリック、またはショートカット:

  • Alt + W(単語の完全一致をトグル)

活用例

// 完全一致なし
検索: "user"
ヒット: user, username, userInfo, superuser

// 完全一致あり
検索: "user"  
ヒット: user のみ

正規表現検索

基本的な正規表現

設定方法: 検索バーの**.***アイコンをクリック

よく使うパターン

数字のパターン

[0-9]{3}        # 3桁の数字
\d+             # 1桁以上の数字
\d{2,4}         # 2〜4桁の数字

文字列のパターン

^function.*     # 行頭の"function"で始まる行
.*\.js$         # ".js"で終わる行
[A-Z][a-z]+     # 大文字始まりの単語

日付のパターン

\d{4}-\d{2}-\d{2}    # YYYY-MM-DD形式
\d{1,2}/\d{1,2}/\d{4} # MM/DD/YYYY形式

実用的な正規表現例

コメントアウトされたコードを探す

正規表現: ^\s*//.*
説明: 行頭の空白 + // で始まる行

未使用のconsole.logを探す

正規表現: console\.log\(.*\);?
説明: console.log文をすべて検索

HTMLタグの検索

正規表現: <(\w+).*?>.*?</\1>
説明: 開始・終了タグのペアを検索

ファイル・シンボル検索

クイックオープン

ファイル名による検索

ショートカット: Ctrl + P(Mac: Cmd + P

使用例

入力: "header"
結果: Header.js, header.css, HeaderComponent.tsx

高度なファイル検索

パスを含む検索

入力: "components/header"
結果: src/components/Header.js

ファイル形式での絞り込み

入力: "*.test.js"
結果: すべてのテストファイル

シンボル検索

ファイル内シンボル検索

ショートカット: Ctrl + Shift + O(Mac: Cmd + Shift + O

検索対象

  • 関数名
  • クラス名
  • メソッド名
  • 変数名(一部)

使用例

// ファイル内のこれらを検索可能
class UserManager {
    constructor() {}
    
    getUserInfo() {}
    
    updateUser() {}
}

function processData() {}

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

ショートカット: Ctrl + T(Mac: Cmd + T

活用場面

  • 特定のクラスがどこで定義されているか
  • 関数の実装場所を素早く見つける
  • APIエンドポイントの定義を探す

実際の開発での検索活用例

バグ調査での検索

エラーメッセージからの逆引き

手順

  1. エラーメッセージをコピー
  2. Ctrl + Shift + Fでプロジェクト全体検索
  3. エラーが発生する箇所を特定

エラー: "Cannot read property 'name' of undefined"
検索: "Cannot read property"
または: "\.name"(正規表現で.nameアクセスを検索)

機能の影響範囲調査

API変更の影響調査

検索: "/api/v1/users"
結果: このAPIを使用しているすべてのファイル

関数の使用箇所調査

検索: "calculateTotal"
結果: この関数を呼び出しているすべての箇所

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

名前変更の前準備

ステップ1: 使用箇所の確認

検索: "oldFunctionName"
結果確認: 30箇所で使用

ステップ2: 一括置換の実行

検索: "oldFunctionName"
置換: "newFunctionName"
すべて置換実行

ステップ3: 影響確認

プロジェクト全体でテスト実行

コードレビューでの検索

レビュー観点での検索

セキュリティチェック

検索: "password", "token", "secret"
結果: 機密情報の適切な処理を確認

パフォーマンスチェック

検索: "console.log", "debugger"
結果: デバッグコードの削除漏れチェック

コーディング規約チェック

正規表現: "var\s+"
結果: varキーワードの使用をチェック(ES6+ではletやconstを推奨)

時短テクニックと応用

複数キーワードの組み合わせ検索

AND検索的な利用

方法1: 正規表現の活用

正規表現: (?=.*function)(?=.*async).*
説明: "function"と"async"を両方含む行

方法2: 段階的な絞り込み

1. "function"で検索 → 結果をメモ
2. "async"で検索 → 結果と比較

検索履歴の活用

最近の検索を再利用

操作方法

  1. 検索バーにフォーカス
  2. (上矢印)で過去の検索履歴を表示
  3. 必要な検索キーワードを選択

複数ファイルでの同時検索

分割画面での効率的検索

手順

  1. Ctrl + \でエディタを分割
  2. 左側でファイルA、右側でファイルBを開く
  3. それぞれでCtrl + Fで同時検索

タブ間での検索結果比較

活用例

タブ1: model.js で"User"を検索
タブ2: controller.js で"User"を検索
タブ3: view.js で"User"を検索
→ 各層でのUserの扱いを比較

カスタマイズと設定

検索関連の設定

settings.jsonでの設定

{
  // 検索時に除外するファイル・フォルダ
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true,
    "**/coverage": true,
    "**/dist": true,
    "**/build": true
  },
  
  // 検索結果の表示設定
  "search.showLineNumbers": true,
  "search.smartCase": true,
  
  // 大きなファイルでの検索制限
  "search.maxResults": 20000,
  
  // 検索時のアニメーション
  "search.decorations.enabled": true
}

キーバインドのカスタマイズ

keybindings.jsonでの設定

[
  {
    "key": "ctrl+shift+f",
    "command": "workbench.action.findInFiles",
    "when": "!searchViewletVisible"
  },
  {
    "key": "f3",
    "command": "editor.action.nextMatchFindAction",
    "when": "editorFocus"
  },
  {
    "key": "ctrl+f3",
    "command": "editor.action.addSelectionToNextFindMatch",
    "when": "editorFocus"
  }
]

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

検索結果が表示されない

原因1: 検索対象から除外されている

確認方法

// settings.jsonの確認
"search.exclude": {
  "**/*.log": true  // ログファイルが除外されている
}

解決方法

  • 検索パネルで歯車アイコン → 除外設定を確認
  • 一時的に除外を無効化

原因2: ワークスペースが正しく開かれていない

確認方法

  • 左下のステータスバーでワークスペース名を確認
  • ファイル → フォルダを開く で正しいプロジェクトフォルダを開く

検索が遅い

原因: 大きなファイル・フォルダが含まれている

解決方法

// .vscodeフォルダに設定ファイルを作成
{
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.git": true,
    "**/coverage": true
  }
}

正規表現が効かない

よくある間違い

エスケープの忘れ

間違い: .js
正しい: \.js

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

文字クラスの間違い

間違い: [0-9]+
正しい: [0-9]+ (正規表現モードが有効な場合)

まとめ

VS Codeの検索機能を効果的に活用するための要点をまとめます:

基本のショートカット

  • ファイル内検索: Ctrl + F(Mac: Cmd + F
  • ファイル内置換: Ctrl + H(Mac: Cmd + Option + F
  • プロジェクト全体検索: Ctrl + Shift + F(Mac: Cmd + Shift + F
  • プロジェクト全体置換: Ctrl + Shift + H(Mac: Cmd + Shift + H

効率的な検索のコツ

  1. 適切な検索スコープを選択 – ファイル内 vs プロジェクト全体
  2. 検索オプションの活用 – 大文字小文字、完全一致、正規表現
  3. 除外設定の最適化 – 不要なファイル・フォルダを除外
  4. 段階的な絞り込み – 大まかな検索から詳細な条件へ

実用的な活用場面

日常的な開発

  • 変数・関数名の検索と一括変更
  • APIエンドポイントの使用箇所確認
  • エラーメッセージからの問題箇所特定

メンテナンス・リファクタリング

  • 古いコードの削除対象特定
  • 未使用関数・変数の発見
  • コーディング規約違反の検出

デバッグ・調査

  • ログ出力文の一括削除
  • 設定値の変更影響範囲確認
  • 外部ライブラリの使用箇所調査

コメント

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