VSCode on Macを120%活用するショートカットキー術！開発効率を爆上げする15の裏技

MacユーザーがVSCodeで生産性を高めるための基本ショートカット

プログラミングの世界では、効率的なコーディングが生産性向上の鍵となります。特にMacユーザーがVSCodeを使う場合、独自のショートカットがあるため、それらを習得することで作業効率が劇的に向上します。ここでは、すぐに実践できる基本的なショートカットを紹介します。

編集操作の基本ショートカット

まずは基本的な編集操作のショートカットを確認しましょう。これらは日常的に使用頻度が高いものです。

これらの基本操作は、単純ですがコーディング速度を大幅に向上させます。例えば、行の移動ショートカットを使用すると、以下のようなコード整理が素早く行えます。

// 移動前
const calculateTotal = (items) => {
  console.log('計算を開始します');
  return items.reduce((sum, item) => sum + item, 0);
  const itemCount = items.length;
};

// ⌥ + ↑を使って行を移動
const calculateTotal = (items) => {
  console.log('計算を開始します');
  const itemCount = items.length;
  return items.reduce((sum, item) => sum + item, 0);
};

ファイル操作のショートカット

ファイル操作は開発作業では非常に頻繁に行われます。以下のショートカットを覚えることで、ファイル間のナビゲーションが快適になります。

特に頻繁に使うのが「⌘ + P」によるクイックオープンです。プロジェクト内のファイル名を一部入力するだけでファイルを素早く開けます。

// ⌘ + P を押した後、以下のように入力するだけで関連ファイルが表示されます
user.js     // user.jsファイルを検索
*.css       // すべてのCSSファイルを表示
src app     // srcフォルダ内のappを含むファイルを検索

検索と置換のショートカット

コード内の特定の文字列を探したり置換したりする作業も頻繁に行われます。

以下は検索と置換を使った例です。例えば、あるコンポーネント名をリファクタリングする場合：

// 検索文字列: UserProfile
// 置換文字列: UserAccount

// 置換前
import { UserProfile } from './components';
const UserProfileComponent = () => {
  return <UserProfile data={userData} />;
};

// ⇧ + ⌘ + H で一括置換後
import { UserAccount } from './components';
const UserAccountComponent = () => {
  return <UserAccount data={userData} />;
};

これらの基本ショートカットを習得するだけでも、日々のコーディング作業の効率が格段に向上します。次のセクションでは、さらに効率を高めるマルチカーソル編集のテクニックについて説明します。

マルチカーソル編集のパワーを解放するテクニック

VSCodeの隠れた強力機能の一つが「マルチカーソル編集」です。一度に複数の場所を同時に編集できるこの機能は、繰り返し作業を劇的に効率化します。特にリスト項目の編集やコードのリファクタリングで真価を発揮します。

マルチカーソルを作成する方法

VSCodeでは複数の方法でマルチカーソルを作成できます。

実践的なマルチカーソル活用例

例1: データリストの迅速な作成

JSONデータを整形する場合を考えてみましょう。

// 変換前のテキスト
apple
banana
cherry
orange
grape

// ⌘ + ⌥ + ↓ でカーソルを増やした後、一括編集
"apple",
"banana",
"cherry",
"orange",
"grape",

// さらに [ と ] を追加すると完成
[
  "apple",
  "banana",
  "cherry",
  "orange",
  "grape"
]

例2: 変数名のリファクタリング

特定のパターンに一致する変数名を一括で変更するケースです。

// 変更前
const userData = {
  userName: 'John',
  userAge: 30,
  userEmail: '[email protected]',
  userPhone: '123-456-7890'
};

// userという接頭辞を削除したい場合
// ⌘ + D を繰り返し押して "user" を選択 → 削除 → 最初の文字を小文字に変更

const userData = {
  name: 'John',
  age: 30,
  email: '[email protected]',
  phone: '123-456-7890'
};

例3: HTMLタグの一括編集

クラス名を複数の要素に一度に追加する例です。

<!-- 変更前 -->
<div>Header</div>
<div>Navigation</div>
<div>Content</div>
<div>Sidebar</div>
<div>Footer</div>

<!-- ⌥ + ⌘ + ↓ で複数カーソルを作り、各divタグを編集 -->
<div class="section">Header</div>
<div class="section">Navigation</div>
<div class="section">Content</div>
<div class="section">Sidebar</div>
<div class="section">Footer</div>

マルチカーソル活用のコツ

マルチカーソルを効果的に使うためのコツをいくつか紹介します。

1. 正規表現を使った選択: 検索ボックス(⌘ + F)で正規表現を有効にして複雑なパターンを選択できます。例えば、\b\w+\bですべての単語を選択できます。

2. 選択範囲の拡張: ⌘ + D を繰り返し押すことで、同じ単語を順に追加選択できます。選びすぎた場合は ⌘ + U で一つ戻れます。

3. 箱型選択: ⇧ + ⌥ + ドラッグで長方形領域を選択できます。表形式のデータ編集に便利です。

// 箱型選択の例
名前   年齢   職業
John   25     Engineer
Lisa   30     Designer
Mike   28     Developer

// ⇧ + ⌥ + ドラッグで年齢の列だけを選択可能

4. 編集のキャンセル: Esc キーを押すとマルチカーソルモードを終了できます。

マルチカーソルとスニペットの組み合わせ

マルチカーソル編集とスニペットを組み合わせることで、さらに強力な編集が可能になります。

// 以下のような変数名リストがあるとします
firstName
lastName
email
phone

// 各行にカーソルを配置し、一括でconst定義に変換
const firstName = '';
const lastName = '';
const email = '';
const phone = '';

マルチカーソル編集は慣れるまで少し時間がかかるかもしれませんが、マスターすれば日々の編集作業が驚くほど効率化します。特に同じパターンの繰り返し作業では、その真価を発揮するでしょう。

あわせて読みたい

GitHub Copilotで開発効率を10倍にする実践的な使い方

GitHub Copilot

モノレポ管理で開発効率を10倍にする方法：2025年最新のツールと実践的手法

プログラミング

npm scriptで開発効率を劇的に向上させる方法：package.jsonだけで実現する自動化テクニック

npm

Gitの脱初心者コマンド集！開発効率を上げる実践的な使い方

Git

エディタ操作を効率化するナビゲーションショートカット

コードを書く時間の多くは、実は既存コードの中を移動して参照したり編集したりする時間です。VSCodeには、エディタ内の移動を素早く行うための様々なナビゲーションショートカットが用意されています。これらを習得することで、マウスに頼ることなく効率的にコード間を移動できます。

基本的なカーソル移動

まずは基本的なカーソル移動のショートカットです。これらは他のアプリケーションと共通のものも多いですが、VSCode特有の強力な移動コマンドもあります。

コードナビゲーション

より高度なコードナビゲーションのショートカットも覚えておくと便利です。

これらのナビゲーションショートカットを使うことで、大きなコードベースでも迷うことなく素早く移動できます。例えば、関数の定義を確認したい場合：

// 関数を呼び出している場所
const result = calculateTotal(items);

// ⌘ + クリックまたはF12を押すと、関数の定義に直接ジャンプ
function calculateTotal(items) {
  // 関数の定義
  return items.reduce((sum, item) => sum + item, 0);
}

エディタとパネルの管理

VSCodeでは複数のエディタやパネルを開いて作業することが多いです。これらを素早く切り替えるショートカットも重要です。

たとえば、HTMLファイルとCSSファイルを同時に編集する場合、エディタを分割すると効率的です：

// ⌘ + \ を押してエディタを分割
// 左側でHTMLを編集しながら、右側でCSSを確認・編集できます

// ⌘ + 1 で左のエディタグループに
// ⌘ + 2 で右のエディタグループに素早く切り替え

コードアウトライン活用のテクニック

VSCodeのアウトライン機能を活用すると、大きなファイル内の特定の関数やクラスにすばやく移動できます。

たとえば大きなクラスファイル内の特定のメソッドに移動したい場合：

// 大きなクラスファイル内で...
class UserManager {
  constructor() { /* ... */ }
  
  // ⇧ + ⌘ + O を押して「createUser」と入力すると
  // このメソッドに直接ジャンプできます
  createUser(userData) { /* ... */ }
  
  updateUser(id, userData) { /* ... */ }
  
  deleteUser(id) { /* ... */ }
  
  // 他にも多数のメソッド...
}

ブックマークの活用

頻繁に参照する場所をブックマークしておくと、後で素早く戻ることができます。

これらのナビゲーションショートカットを身につけることで、大規模なプロジェクトでも迷うことなく素早く移動でき、開発効率が大幅に向上します。最初は覚えるのに時間がかかるかもしれませんが、少しずつ習得していくことで、コーディング体験が格段に向上するでしょう。

ファイル・シンボル検索を駆使したコード探索術

大規模なプロジェクトでは、コードベース内で効率的に情報を探し出す能力が非常に重要です。VSCodeには、コードを探索するための強力なショートカットと機能が用意されています。

ファイル検索のショートカット

まずはファイル検索に関するショートカットから見ていきましょう。

高度なファイル検索テクニック

VSCodeのファイル検索（⌘ + P）は、単純なファイル名検索だけでなく、高度な検索も可能です。

// ファイル検索（⌘ + P）での高度な使い方例

user.js         // user.jsファイルを検索
component *.tsx // "component"を含む.tsxファイルを検索
auth* login.ts  // "auth"で始まり"login.ts"を含むファイルを検索
:42             // アクティブファイルの42行目に移動
@user           // ワークスペース内で"user"シンボルを検索

これらのパターンを組み合わせることで、大規模なプロジェクト内でも目的のファイルやシンボルを素早く見つけることができます。

シンボル検索を活用したコードナビゲーション

関数やクラスなどのシンボルを検索するショートカット（⌘ + T）を使うと、大規模なコードベースでも目的の場所に素早く移動できます。

// 大規模なプロジェクト内で...
// ⌘ + T を押して "UserAuthentication" と入力すると
// どのファイルにあるかに関わらず、そのクラスや関数に直接ジャンプできます

class UserAuthentication {
  login(username, password) {
    // ...
  }
  
  logout() {
    // ...
  }
}

ファイル内のシンボル検索（⇧ + ⌘ + O）も非常に便利です。特に長いファイル内で特定のメソッドやプロパティを探す場合に効果を発揮します。

// 長いReactコンポーネントファイル内で...
// ⇧ + ⌘ + O を押して "handleSubmit" と入力すると
// そのメソッドに直接ジャンプできます

function ComplexComponent() {
  // 大量のステートと関数...
  
  const handleSubmit = async (event) => {
    // フォーム送信処理...
  };
  
  // さらに大量のヘルパー関数...
  
  return (
    // 複雑なJSX...
  );
}

高度な検索と置換のテクニック

VSCodeの検索と置換機能（⇧ + ⌘ + F、⇧ + ⌘ + H）は、正規表現をサポートしています。これを使うことで、複雑なパターンの検索と置換が可能になります。

// 正規表現を使った検索例

// すべてのコンソールログを検索
console\.(log|warn|error)\(.*\)

// キャメルケースの変数名を検索
[a-z][a-zA-Z0-9]*[A-Z][a-zA-Z0-9]*

// HTMLタグを検索
<[a-zA-Z][^>]*>

正規表現を使った置換では、キャプチャグループを活用することで、より高度な置換が可能になります。

// 正規表現とキャプチャグループを使った置換例

// 検索: const ([a-zA-Z0-9]+) = new ([a-zA-Z0-9]+)\(\);
// 置換: const $1 = create$2();

// 変換前
const user = new User();
const product = new Product();

// 変換後
const user = createUser();
const product = createProduct();

ワークスペース検索の絞り込みテクニック

大規模プロジェクトでの検索（⇧ + ⌘ + F）では、検索範囲を絞り込むことが重要です。VSCodeの検索パネルには、ファイルを絞り込むための様々なオプションがあります。

// 検索の絞り込み例

// 特定の拡張子のファイルのみを検索
*.ts, *.tsx

// 特定のディレクトリを除外
!node_modules, !dist

// 特定のファイルパターンのみを検索
src/**/*.js

これらのパターンを「ファイルを含める/除外する」欄に入力することで、検索結果を効率的に絞り込むことができます。

コードレンズとピークの活用

VSCodeの「ピーク定義」機能は、コードを理解する上で非常に役立ちます。

これらの機能を使うと、コードの流れをより理解しやすくなります。

// ピーク機能の使用例
import { calculateTotal } from './utils';

// calculateTotalにカーソルを合わせて ⌥ + F12 を押すと
// 元の定義がインラインで表示されるため、ファイルを切り替えずに確認できます
const total = calculateTotal(items);

これらのファイルとシンボル検索テクニックをマスターすることで、大規模なコードベースでも迷うことなく素早く必要な情報を探し出すことができます。VSCodeの検索機能を最大限に活用して、開発効率を高めましょう。

関連記事

Chrome DevToolsで開発効率を10倍にする！プロが教える効果的なデバッグ手法

Chrome DevTools

【2025年最新】開発現場で使える実践的デバッグ技法：エラー解決の効率を10倍にする方法

プログラミング

【2025年最新】CSS-in-JSの完全ガイド：パフォーマンスと開発効率を両立する最適な実装

CSS

TypeScript開発を劇的に効率化する13のベストプラクティス

IT技術

ターミナル連携とデバッグを加速するショートカット

VSCodeの強力な機能の一つに、統合ターミナルとデバッグ機能があります。これらの機能をショートカットで効率的に操作することで、開発ワークフローが大幅に向上します。

統合ターミナルの操作

VSCodeの統合ターミナルを使うと、エディタから離れることなくコマンドを実行できます。

統合ターミナルは、エディタで編集しながらすぐにコマンドを実行できるため、開発効率が大幅に向上します。

# 統合ターミナルで使用できる便利なコマンド例
npm run dev     # 開発サーバーを起動
git status      # Gitの状態を確認
npx prettier --write .  # コードのフォーマット

タスク実行のショートカット

反復的なタスクは、VSCodeのタスク機能で自動化できます。

タスクを使うことで、複雑なコマンドやスクリプトを簡単に実行できます。特に、ビルド、テスト、デプロイなどの頻繁に実行するタスクを自動化するのに役立ちます。

// tasks.json の例
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "開発サーバー起動",
      "type": "shell",
      "command": "npm run dev",
      "problemMatcher": []
    },
    {
      "label": "テスト実行",
      "type": "shell",
      "command": "npm test",
      "group": {
        "kind": "test",
        "isDefault": true
      }
    }
  ]
}

デバッグのショートカット

デバッグ機能は、コードの問題を素早く特定して修正するのに役立ちます。

これらのショートカットを使うと、デバッグ作業が格段に効率化されます。

// デバッグの例
function calculateTotal(items) {
  let total = 0;
  // ここにF9でブレークポイントを設定
  for (const item of items) {
    total += item.price * item.quantity;
  }
  return total;
}

実践的なデバッグワークフロー

JavaScriptやTypeScriptプロジェクトでの実践的なデバッグワークフローを見てみましょう。

1. デバッグ構成の設定: まず、.vscode/launch.jsonファイルを作成します。

// launch.json の例
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "サーバーをデバッグ",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chromeでデバッグ",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

2. ブレークポイントの設定: デバッグしたい行にブレークポイントを設定します（F9）。

3. デバッグの開始: F5キーを押してデバッグを開始します。

4. 変数の検査: デバッグビューで変数の値を確認します。

5. ステップ実行: F10（ステップオーバー）、F11（ステップイン）、⇧+F11（ステップアウト）を使ってコードを1行ずつ実行します。

ターミナルからエディタへのスムーズな連携

ターミナルの出力からファイルに直接ジャンプすることもできます。多くのコマンドラインツールはファイルパスと行番号を出力しますが、VSCodeでは⌘ + クリックでその場所に直接ジャンプできます。

# エラーメッセージの例
Error: Unexpected token at /Users/username/project/src/components/Button.js:42:5

# 上記の行でファイルパスの部分を ⌘ + クリック すると、
# Button.jsの42行目にジャンプします

統合ターミナルの高度な活用

統合ターミナルは単なるコマンド実行だけでなく、様々な方法で開発ワークフローを向上させます。

# 結果をエディタで開く
git diff | code -

# 外部コマンドの結果を現在のファイルに挿入
command | pbcopy  # 結果をクリップボードにコピー
# その後エディタで⌘ + Vで貼り付け

デバッグと実行の組み合わせ

VSCodeでは、デバッグをタスク実行と組み合わせることができます。これにより、ビルドしてからデバッグを開始するなどの複雑なワークフローを自動化できます。

// launch.json での preLaunchTask の例
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "ビルドしてから実行",
      "program": "${workspaceFolder}/dist/index.js",
      "preLaunchTask": "ビルド"
    }
  ]
}

これらのターミナルとデバッグのショートカットを活用することで、コード編集からテスト、デバッグまでシームレスに行えるようになり、開発効率が大幅に向上します。次のセクションでは、VSCodeを自分の作業スタイルに合わせてカスタマイズする方法を紹介します。

カスタムショートカットでワークフローを自分好みに最適化

VSCodeの標準ショートカットは非常に強力ですが、自分の作業スタイルや好みに合わせてカスタマイズすることで、さらに効率が向上します。このセクションでは、ショートカットのカスタマイズ方法と、特に役立つカスタマイズの例を紹介します。

ショートカットのカスタマイズ方法

VSCodeでは、キーボードショートカットを簡単にカスタマイズできます。

よく使うカスタムショートカットの例

以下に、多くの開発者が便利だと感じるカスタムショートカットの例を紹介します。

コードフォーマット関連

// keybindings.json の例
[
  {
    "key": "cmd+shift+f",
    "command": "editor.action.formatDocument",
    "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "cmd+k cmd+f",
    "command": "editor.action.formatSelection",
    "when": "editorHasDocumentSelectionFormattingProvider && editorTextFocus && !editorReadonly && editorHasSelection"
  }
]

ファイル操作の効率化

// ファイル操作を効率化するカスタムショートカット
[
  {
    "key": "cmd+n",
    "command": "explorer.newFile",
    "when": "explorerViewletVisible && filesExplorerFocus"
  },
  {
    "key": "cmd+shift+n",
    "command": "explorer.newFolder",
    "when": "explorerViewletVisible && filesExplorerFocus"
  },
  {
    "key": "cmd+w",
    "command": "workbench.action.closeActiveEditor"
  }
]

コマンドパレットとショートカットの組み合わせ

VSCodeのコマンドパレット（⌘ + Shift + P）を使うと、キーボードショートカットが設定されていないコマンドにも素早くアクセスできます。よく使うコマンドには独自のショートカットを割り当てると便利です。

// よく使うコマンドの例
エディタを再起動      // VSCodeを再起動せずにエディタだけを再起動
設定を開く            // ユーザー設定を開く
ターミナルをクリア     // 統合ターミナルの内容をクリア
言語モードの変更      // 現在のファイルの言語モードを変更

拡張機能のショートカットカスタマイズ

多くのVSCode拡張機能は独自のコマンドを提供しており、これらにもショートカットを割り当てることができます。例えば、GitLensやPrettierなどの人気拡張機能の機能に独自のショートカットを設定できます。

// 拡張機能用のカスタムショートカットの例
[
  {
    "key": "cmd+shift+g",
    "command": "gitlens.showQuickRepoStatus",
    "when": "gitlens:enabled && gitlens:keymap == 'alternate'"
  },
  {
    "key": "alt+cmd+p",
    "command": "prettier.forceFormatDocument",
    "when": "editorTextFocus && !editorReadonly"
  }
]

ショートカットの競合を解決する

ショートカットをカスタマイズする際、既存のショートカットとの競合が発生することがあります。VSCodeのショートカット設定画面では、競合が検出されると通知され、解決方法が提案されます。

// 競合を解決するためのwhen条件を追加する例
{
  "key": "cmd+k cmd+s",
  "command": "myExtension.specialCommand",
  "when": "editorTextFocus && resourceExtname == '.js'"  // JavaScriptファイルでのみ有効
}

macOSシステムとの競合を避ける

macOSには多くのシステムショートカットがあり、これらとVSCodeのショートカットが競合する場合があります。その場合は、システムショートカットを変更するか、VSCode側で別のショートカットを選択するとよいでしょう。

特に注意すべきmacOSショートカットの例：

• ⌘ + Space: Spotlight検索（VSCodeの入力補完と競合する可能性がある）
• ⌃ + ↑/↓: Mission Control（VSCodeのスクロールと競合する可能性がある）
• ⌘ + Tab: アプリケーション切り替え（VSCodeのタブ切り替えとは別）

JSON形式でショートカットをエクスポート・共有する

カスタマイズしたショートカット設定はJSON形式で保存され、チームメンバーやプロジェクト間で共有できます。設定ファイルは以下の場所にあります：

~/Library/Application Support/Code/User/keybindings.json

このファイルを共有したり、Gitリポジトリで管理することで、一貫したショートカット設定を複数の環境で使用できます。

ショートカットチートシートの作成

多くのショートカットを覚えるのは大変です。自分が頻繁に使うショートカットをチートシートとしてまとめておくと便利です。VSCodeには「キーボードショートカットリファレンス」を生成する機能もあります。

// コマンドパレットで以下を実行
キーボードショートカットリファレンスを開く

まとめ：効率的なワークフローの構築

VSCodeのショートカットをマスターし、自分の作業スタイルに合わせてカスタマイズすることで、コーディングの効率が大幅に向上します。最初は少しずつ覚えて、徐々に自分のワークフローに統合していくことをおすすめします。

マウスからキーボードへの移行は、短期的には少し時間がかかるかもしれませんが、長期的には大きな時間の節約になります。特に、以下のショートカットを優先的に習得すると効果的です：

1. ファイル操作とナビゲーション
2. マルチカーソル編集
3. 検索と置換
4. ターミナルとデバッグの操作

これらのテクニックを組み合わせることで、VSCodeを強力な開発ツールとして最大限に活用できます。自分のニーズに合わせて徐々にカスタマイズし、より効率的なコーディング体験を築いていきましょう。

おすすめ記事

GitHub Copilotで開発効率を10倍にする実践的な使い方

GitHub Copilot

モノレポ管理で開発効率を10倍にする方法：2025年最新のツールと実践的手法

プログラミング

npm scriptで開発効率を劇的に向上させる方法：package.jsonだけで実現する自動化テクニック

npm

Gitの脱初心者コマンド集！開発効率を上げる実践的な使い方

Git