Visual Studio Codeのショートカットキー＆正規表現検索まとめ｜作業効率を劇的アップ！

はじめに：マウス操作から卒業しよう
⌨️ H2：よく使うショートカットキー一覧
正規表現検索の使い方（実例つき）
1. 目的別の検索例
2. VSCodeでの使い方手順
ショートカットを使いこなすコツ
まとめ｜覚えれば一生モノの効率化術

はじめに：マウス操作から卒業しよう

コーディング中に「もっと速く作業したい」と感じたことはありませんか？
Visual Studio Code（以下 VSCode）では、ショートカットキーと正規表現検索を活用することで、作業効率を飛躍的に向上させることができます。

この記事では、VSCodeを使うすべての人が覚えておくべき便利なショートカットと検索テクニックを初心者向けに解説します。
✅ 「よく使う操作が一瞬で終わる」
✅ 「大量のコードを一括置換」
✅ 「正確に欲しい文字列だけ抽出」
といった操作ができるようになります。

⌨️ H2：よく使うショートカットキー一覧

検索・置換系ショートカット

Ctrl + F：現在のファイル内で検索
Ctrl + H：ファイル内で置換
Ctrl + Shift + F：ワークスペース全体を検索
Ctrl + Shift + H：ワークスペース全体で置換
F3 / Shift + F3：検索結果の次・前へ移動
Alt + Enter：すべての検索結果を選択

複数選択・編集系

Ctrl + D：同じ単語を順に選択
Ctrl + Shift + L：選択単語を全て選択
Alt + Click：マルチカーソルの追加
Ctrl + /：行コメントの切り替え
Shift + Alt + A：ブロックコメント切り替え

ファイル操作・ナビゲーション

Ctrl + P：クイックファイルオープン
Ctrl + N / O / S：新規作成／開く／保存
Ctrl + Tab：タブ移動
Ctrl + B：サイドバー表示／非表示

ターミナル＆デバッグ操作

`Ctrl + “：ターミナル表示／非表示
F5：デバッグ開始
F10 / F11 / Shift + F11：ステップ操作

正規表現検索の使い方（実例つき）

下記のコードを参考に検索します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <title>サンプルWebページ</title>
</head>
<body>
  <header id=”main-header”>
    <h1 class=”header-title”>ようこそ、サンプルページへ</h1>
  </header>
  <nav id=”main-nav”>
    <ul class=”nav-links”>
      <li class=”nav-item”><a href=”#” class=”nav-link”>ホーム</a></li>
      <li class=”nav-item”><a href=”#” class=”nav-link”>概要</a></li>
      <li class=”nav-item”><a href=”#” class=”nav-link”>サービス</a></li>
      <li class=”nav-item”><a href=”#” class=”nav-link”>お問い合わせ</a></li>
    </ul>
  </nav>
  <div id=”content” class=”container”>
    <section id=”about-section” class=”content-section”>
      <h2 class=”section-title”>このページについて</h2>
      <p class=”section-text”>このページは、基本的なHTML構造を示すために作成されたサンプルページです。ナビゲーションバー、コンテンツセクション、フッターを含んでいます。</p>
    </section>

    <section id=”why-section” class=”content-section”>
      <h3 class=”section-title”>なぜこのページを作ったのか？</h3>
      <p class=”section-text”>HTMLはWeb開発の基礎となる言語です。このページは、HTMLの構造がどのように組み合わさって、シンプルで整理されたレイアウトを作るかを示すためのものです。</p>
    </section>

    <section id=”features-section” class=”content-section”>
      <h3 class=”section-title”>このページの特徴</h3>
      <ul class=”features-list”>
        <li class=”feature-item”>意味のある要素を使用した構造化されたレイアウト</li>
        <li class=”feature-item”>ナビゲーションバーでページ間移動を容易に</li>
        <li class=”feature-item”>コンテンツを見やすく整理したセクション</li>
        <li class=”feature-item”>フッターで補足情報を記載</li>
      </ul>
    </section>
  </div>
  <footer id=”main-footer” class=”footer”>
    <p class=”footer-text”>© 2025 サンプルページ. All rights reserved.</p>
  </footer>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルWebページ</title>
</head>
<body>
  <header id="main-header">
    <h1 class="header-title">ようこそ、サンプルページへ</h1>
  </header>
  <nav id="main-nav">
    <ul class="nav-links">
      <li class="nav-item"><a href="#" class="nav-link">ホーム</a></li>
      <li class="nav-item"><a href="#" class="nav-link">概要</a></li>
      <li class="nav-item"><a href="#" class="nav-link">サービス</a></li>
      <li class="nav-item"><a href="#" class="nav-link">お問い合わせ</a></li>
    </ul>
  </nav>
  <div id="content" class="container">
    <section id="about-section" class="content-section">
      <h2 class="section-title">このページについて</h2>
      <p class="section-text">このページは、基本的なHTML構造を示すために作成されたサンプルページです。ナビゲーションバー、コンテンツセクション、フッターを含んでいます。</p>
    </section>

    <section id="why-section" class="content-section">
      <h3 class="section-title">なぜこのページを作ったのか？</h3>
      <p class="section-text">HTMLはWeb開発の基礎となる言語です。このページは、HTMLの構造がどのように組み合わさって、シンプルで整理されたレイアウトを作るかを示すためのものです。</p>
    </section>

    <section id="features-section" class="content-section">
      <h3 class="section-title">このページの特徴</h3>
      <ul class="features-list">
        <li class="feature-item">意味のある要素を使用した構造化されたレイアウト</li>
        <li class="feature-item">ナビゲーションバーでページ間移動を容易に</li>
        <li class="feature-item">コンテンツを見やすく整理したセクション</li>
        <li class="feature-item">フッターで補足情報を記載</li>
      </ul>
    </section>
  </div>
  <footer id="main-footer" class="footer">
    <p class="footer-text">© 2025 サンプルページ. All rights reserved.</p>
  </footer>
</body>
</html>

HTML

目的別の検索例

✅ <a>タグ内のテキストだけを抽出したい場合

(?<=<li class="nav-item"><a href="#" class="nav-link">)(.*?)(?=</a>)

Bash

この正規表現は：

(?<=…)：特定のタグの直後を対象にする（前方肯定の後読み）
(.*?)：最短一致で中身のテキストを取得
(?=</a>)：</a>の直前までを対象にする（後方肯定の先読み）

✅ 特定の文字列を「含む行だけを残す」

例えば .nav-item を含む行だけを検索・抽出したい場合は、次の正規表現を使います。

^.*nav-item.*$

Bash

このパターンで、.nav-item を含むすべての行が選択されます。

✅ 特定の文字列を「含まない行だけを残す」

逆に、.nav-item を含まない行だけを抽出したいときは以下の否定の先読みを使います。

^(?!.*nav-item).+$

Bash

これは：

^：行の先頭
(?!.*nav-item)：nav-item を含まないという条件の否定先読み
.+$：残りの行を対象にする（空行は無視）

VSCodeでの使い方手順

検索バー（Ctrl + F）を開く
.*（正規表現モード）をONにする
上記の正規表現を貼り付ける
Alt + Enterで一致箇所すべて選択
DeleteやCtrl + Cで一括削除・コピー可能

🔽 例：以下のようなHTMLからナビリンクだけを抽出可能

<li class="nav-item"><a href="#" class="nav-link">ホーム</a></li>
<li class="nav-item"><a href="#" class="nav-link">概要</a></li>

HTML

※画像や補足図をここに挿入することでさらに理解が深まります。

ショートカットを使いこなすコツ

最初は毎日1～2個だけ覚える
自然と手が覚えるまで繰り返す
よく使う操作は紙に書いてモニターに貼る

筆者もかつてはマウスで全部操作していましたが、ショートカットを覚えてから日常の作業が2倍速に感じるほど快適になりました。

まとめ｜覚えれば一生モノの効率化術

Visual Studio Codeのショートカットキーと正規表現検索を使いこなすことで、コーディング効率は格段に向上します。

繰り返しの作業が一瞬で終わる
コードの修正が楽になる
集中力が途切れにくくなる

毎日数分の短縮でも、1ヶ月・1年単位で見れば膨大な時間の節約になります。