---

VSCode ショートカットキー大全！キーボード操作で開発速度UP

Visual Studio Code (VSCode) は、その拡張性の高さと豊富な機能から、世界中の開発者に愛用されているコードエディタです。しかし、VSCode の真価は、キーボードショートカットを使いこなすことで最大限に発揮されます。マウス操作を極力減らし、キーボードから手を離さずにコードを書くことで、開発速度は飛躍的に向上します。

この記事では、VSCode の基本的なショートカットキーから、知っておくと便利な高度なショートカットキーまで、網羅的に紹介します。各ショートカットキーの具体的な使用例や、カスタマイズ方法についても解説しますので、ぜひこの記事を参考にして、VSCode をより効率的に使いこなせるようにしてください。

1. 基本的なショートカットキー

まずは、VSCode を使う上で絶対に覚えておきたい、基本的なショートカットキーから見ていきましょう。これらのショートカットキーは、日常的なコーディング作業で頻繁に利用するため、自然と指が動くようになるまで練習することをおすすめします。

1.1 ファイル操作

• 新規ファイル作成: Ctrl + N (Windows/Linux) / Cmd + N (macOS)

  新しいファイルを作成します。ファイルの種類 (テキストファイル、Markdown ファイル、Python ファイルなど) は、必要に応じて後から設定できます。

  使用例: 新しいスクリプトファイルを作成する場合、このショートカットキーを押して新しいファイルを開き、ファイル名を.pyで保存すれば、Python ファイルとして認識されます。

• ファイルを開く: Ctrl + O (Windows/Linux) / Cmd + O (macOS)

  既存のファイルを開きます。ファイルエクスプローラーが表示され、開きたいファイルを選択できます。

  使用例: 以前に作成した HTML ファイルを編集したい場合、このショートカットキーを押して、HTML ファイルを選択して開きます。

• ファイルを保存: Ctrl + S (Windows/Linux) / Cmd + S (macOS)

  現在のファイルを保存します。編集内容を失わないように、こまめに保存することを心がけましょう。

  使用例: コードを少し修正するたびにこのショートカットキーを押して、変更内容を保存します。

• 名前を付けて保存: Ctrl + Shift + S (Windows/Linux) / Cmd + Shift + S (macOS)

  現在のファイルを別の名前で保存します。ファイルのバックアップを作成したり、別の種類のファイルとして保存したりする際に便利です。

  使用例: 現在の Python スクリプトを別のバージョンとして保存する場合、このショートカットキーを押して、新しいファイル名を指定して保存します。

• ファイルを閉じる: Ctrl + W (Windows/Linux) / Cmd + W (macOS)

  現在のファイルを閉じます。複数のファイルを開いている場合に、不要なファイルを閉じる際に使用します。

  使用例: 編集が終わった CSS ファイルを閉じる場合、このショートカットキーを押して、ファイルを閉じます。

• VSCode を閉じる: Ctrl + Shift + W (Windows/Linux) / Cmd + Shift + W (macOS)

  VSCode ウィンドウ全体を閉じます。作業を終える際に使用します。

  使用例: プロジェクトの作業が完了し、VSCode を閉じる場合、このショートカットキーを押して、VSCode を閉じます。

1.2 編集

• 切り取り: Ctrl + X (Windows/Linux) / Cmd + X (macOS)

  選択したテキストを切り取り、クリップボードにコピーします。

  使用例: 不要なコードブロックを削除し、後で別の場所に貼り付ける場合に、このショートカットキーを使用します。

• コピー: Ctrl + C (Windows/Linux) / Cmd + C (macOS)

  選択したテキストをクリップボードにコピーします。

  使用例: ある関数のコードを別の関数にコピーする場合、このショートカットキーを使用します。

• 貼り付け: Ctrl + V (Windows/Linux) / Cmd + V (macOS)

  クリップボードの内容を現在のカーソル位置に貼り付けます。

  使用例: コピーしたコードを別の場所に貼り付ける場合、このショートカットキーを使用します。

• アンドゥ (元に戻す): Ctrl + Z (Windows/Linux) / Cmd + Z (macOS)

  直前の操作を取り消します。誤ってコードを削除してしまった場合などに役立ちます。

  使用例: 間違って削除したコードを元に戻す場合、このショートカットキーを使用します。

• リドゥ (やり直し): Ctrl + Shift + Z (Windows/Linux) / Cmd + Shift + Z (macOS) / Ctrl + Y (Windows/Linux)

  アンドゥで取り消した操作をやり直します。

  使用例: アンドゥしすぎた場合に、操作をやり直す場合、このショートカットキーを使用します。

• すべて選択: Ctrl + A (Windows/Linux) / Cmd + A (macOS)

  現在のファイルの内容をすべて選択します。

  使用例: ファイル全体をコピーする場合、このショートカットキーを使用してすべて選択し、コピーします。

• 行の削除: Ctrl + Shift + K (Windows/Linux) / Cmd + Shift + K (macOS)

  現在のカーソルがある行を削除します。

  使用例: 不要な行を削除する場合、このショートカットキーを使用します。

• 行のコピー (上/下): Alt + Shift + Up/Down (Windows/Linux) / Option + Shift + Up/Down (macOS)

  現在の行を上下にコピーします。同じようなコードを複数行書きたい場合に便利です。

  使用例: ある設定行を複製して、値を少し変更する場合、このショートカットキーを使用します。

• 行の移動 (上/下): Alt + Up/Down (Windows/Linux) / Option + Up/Down (macOS)

  現在の行を上下に移動します。コードの順序を入れ替えたい場合に便利です。

  使用例: 関数の順序を入れ替える場合、このショートカットキーを使用します。

• 行のインデント (右): Ctrl + ] (Windows/Linux) / Cmd + ] (macOS)

  現在の行を右にインデントします。

  使用例: コードブロックをインデントする場合、このショートカットキーを使用します。

• 行のインデント (左): Ctrl + [ (Windows/Linux) / Cmd + [ (macOS)

  現在の行を左にインデントします。

  使用例: インデントが深すぎるコードブロックを修正する場合、このショートカットキーを使用します。

• コメントアウト (行): Ctrl + / (Windows/Linux) / Cmd + / (macOS)

  現在の行をコメントアウトします。複数行を選択している場合は、選択範囲全体をコメントアウトします。

  使用例: 一時的にコードを実行したくない場合、このショートカットキーを使用してコメントアウトします。

• ブロックコメント: Alt + Shift + A (Windows/Linux) / Option + Shift + A (macOS)

  選択した範囲をブロックコメントで囲みます。

  使用例: 複数行のコードをまとめてコメントアウトする場合、このショートカットキーを使用します。

1.3 表示

• コマンドパレット: Ctrl + Shift + P (Windows/Linux) / Cmd + Shift + P (macOS)

  VSCode のすべてのコマンドにアクセスできるコマンドパレットを開きます。ショートカットキーがわからない場合や、マウス操作でしかできないと思っていた操作も、コマンドパレットから実行できる場合があります。

  使用例: 拡張機能をインストールする場合、コマンドパレットを開き、「install extensions」と入力して検索します。

• 検索: Ctrl + F (Windows/Linux) / Cmd + F (macOS)

  現在のファイル内でテキストを検索します。

  使用例: 変数の名前を検索する場合、このショートカットキーを使用して、ファイル全体から変数の出現箇所を検索します。

• 置換: Ctrl + H (Windows/Linux) / Cmd + Option + F (macOS)

  現在のファイル内でテキストを検索し、別のテキストに置換します。

  使用例: 変数の名前をリファクタリングする場合、このショートカットキーを使用して、ファイル全体から変数の名前を置換します。

• サイドバーの表示/非表示: Ctrl + B (Windows/Linux) / Cmd + B (macOS)

  サイドバー (エクスプローラー、検索、Git など) の表示/非表示を切り替えます。

  使用例: コードをより広く表示したい場合、このショートカットキーを使用してサイドバーを非表示にします。

• ターミナルの表示/非表示: Ctrl + \`` (Windows/Linux) /Cmd + “ (macOS)

  統合ターミナルの表示/非表示を切り替えます。

  使用例: プログラムを実行したり、Git コマンドを実行したりする場合、このショートカットキーを使用してターミナルを表示します。

• ズームイン: Ctrl + + (Windows/Linux) / Cmd + + (macOS)

  エディタの表示を拡大します。

  使用例: コードが小さくて見づらい場合、このショートカットキーを使用して表示を拡大します。

• ズームアウト: Ctrl + - (Windows/Linux) / Cmd + - (macOS)

  エディタの表示を縮小します。

  使用例: コードが大きすぎて全体が見づらい場合、このショートカットキーを使用して表示を縮小します。

• ズームリセット: Ctrl + 0 (Windows/Linux) / Cmd + 0 (macOS)

  エディタの表示をデフォルトのサイズに戻します。

  使用例: ズームイン/アウトを繰り返して、表示サイズがわからなくなった場合、このショートカットキーを使用してデフォルトサイズに戻します。

1.4 カーソル移動

• 単語単位で移動: Ctrl + Left/Right (Windows/Linux) / Cmd + Left/Right (macOS)

  カーソルを単語単位で左右に移動します。

  使用例: 長い変数名を修正する場合、このショートカットキーを使用して単語単位でカーソルを移動します。

• 行頭/行末に移動: Home/End (Windows/Linux) / Cmd + Left/Right (macOS)

  カーソルを行の先頭または末尾に移動します。

  使用例: 行の先頭に移動してコメントアウトしたり、行の末尾に移動してセミコロンを追加したりする場合、このショートカットキーを使用します。

• ドキュメントの先頭/末尾に移動: Ctrl + Home/End (Windows/Linux) / Cmd + Up/Down (macOS)

  カーソルをドキュメントの先頭または末尾に移動します。

  使用例: ファイルの先頭に移動してヘッダー情報を確認したり、ファイルの末尾に移動して新しい関数を追加したりする場合、このショートカットキーを使用します。

• 前の単語を選択: Ctrl + Shift + Left (Windows/Linux) / Cmd + Shift + Left (macOS)

  カーソルの左にある単語を選択します。

  使用例: 変数名を変更する場合、このショートカットキーを使用して変数名を選択します。

• 次の単語を選択: Ctrl + Shift + Right (Windows/Linux) / Cmd + Shift + Right (macOS)

  カーソルの右にある単語を選択します。

  使用例: 関数名をコピーする場合、このショートカットキーを使用して関数名を選択します。

2. 便利なショートカットキー

次に、覚えておくとコーディング効率が格段に向上する、便利なショートカットキーを紹介します。

2.1 コード編集

• 複数カーソル: Alt + Click (Windows/Linux) / Option + Click (macOS)

  複数の場所にカーソルを追加します。同じような修正を複数の箇所に同時に行いたい場合に非常に便利です。

  使用例: 複数の変数の名前を同時に変更する場合、各変数の場所をクリックしてカーソルを追加し、同時に編集します。

• 複数行選択: Shift + Alt + Down/Up (Windows/Linux) / Shift + Option + Down/Up (macOS)

  カーソル位置から上下方向に複数行を選択します。

  使用例: 複数行のコードブロックをコメントアウトする場合、このショートカットキーを使用して複数行を選択し、コメントアウトのショートカットキーを使用します。

• 選択範囲の折りたたみ/展開: Ctrl + Shift + [ / Ctrl + Shift + ] (Windows/Linux) / Cmd + Shift + [ / Cmd + Shift + ] (macOS)

  選択したコードブロックを折りたたんだり、展開したりします。長い関数やクラスを一時的に隠して、コードの見通しを良くするのに役立ちます。

  使用例: 長い関数を折りたたんで、他のコードを見やすくする場合、このショートカットキーを使用します。

• 定義へ移動: F12 (Windows/Linux/macOS)

  カーソル位置にある変数、関数、クラスなどの定義元へ移動します。

  使用例: 関数の定義元を確認する場合、関数名にカーソルを置いてこのショートカットキーを使用します。

• 定義をプレビュー: Alt + F12 (Windows/Linux/macOS) / Option + F12 (macOS)

  カーソル位置にある変数、関数、クラスなどの定義をプレビュー表示します。定義元に移動せずに内容を確認できます。

  使用例: 関数の定義を簡単に確認したい場合、関数名にカーソルを置いてこのショートカットキーを使用します。

• 参照の検索: Shift + F12 (Windows/Linux/macOS)

  カーソル位置にある変数、関数、クラスなどが使用されている箇所を検索します。

  使用例: 変数がどこで使用されているか確認する場合、変数名にカーソルを置いてこのショートカットキーを使用します。

• シンボルの変更: F2 (Windows/Linux/macOS)

  カーソル位置にある変数、関数、クラスなどの名前を一括で変更します。リファクタリングに非常に便利です。

  使用例: 変数名をリファクタリングする場合、変数名にカーソルを置いてこのショートカットキーを使用し、新しい名前を入力します。

• コードフォーマット: Shift + Alt + F (Windows/Linux) / Shift + Option + F (macOS)

  現在のファイル全体または選択範囲を、設定されたフォーマッタで整形します。コードの可読性を高めるために、こまめに使用しましょう。

  使用例: コードのインデントが崩れている場合、このショートカットキーを使用してコードを整形します。

2.2 ナビゲーション

• ファイル検索: Ctrl + P (Windows/Linux) / Cmd + P (macOS)

  プロジェクト内のファイルを名前で検索して開きます。

  使用例: プロジェクト内の特定のファイルを開きたい場合、ファイル名を入力して検索します。

• シンボル検索: Ctrl + Shift + O (Windows/Linux) / Cmd + Shift + O (macOS)

  現在のファイル内のシンボル (関数、クラス、変数など) を名前で検索して移動します。

  使用例: ファイル内の特定の関数に移動したい場合、関数名を入力して検索します。

• ワークスペースシンボル検索: Ctrl + T (Windows/Linux) / Cmd + T (macOS)

  ワークスペース内のシンボル (関数、クラス、変数など) を名前で検索して移動します。

  使用例: プロジェクト全体の特定の関数に移動したい場合、関数名を入力して検索します。

• 前の編集箇所へ移動: Alt + Left (Windows/Linux) / Cmd + Alt + Left (macOS)

  以前に編集した箇所へ移動します。

  使用例: 複数のファイルを編集している場合に、前の編集箇所に戻りたい場合に使用します。

• 次の編集箇所へ移動: Alt + Right (Windows/Linux) / Cmd + Alt + Right (macOS)

  次に編集する箇所へ移動します。

  使用例: 複数のファイルを編集している場合に、次の編集箇所に進みたい場合に使用します。

2.3 デバッグ

• ブレークポイントの切り替え: F9 (Windows/Linux/macOS)

  現在の行にブレークポイントを設定/解除します。

  使用例: 特定の行でプログラムの実行を停止して、変数の値を確認したい場合に使用します。

• デバッグの開始/継続: F5 (Windows/Linux/macOS)

  デバッグを開始または継続します。

  使用例: デバッグを開始してプログラムの実行をステップ実行する場合に使用します。

• ステップオーバー: F10 (Windows/Linux/macOS)

  現在の行を実行し、次の行に進みます (関数呼び出しをスキップします)。

  使用例: 関数の中身を詳しく見たくない場合に、関数呼び出しをスキップして次の行に進みます。

• ステップイン: F11 (Windows/Linux/macOS)

  現在の行を実行し、関数呼び出しの中に入ります。

  使用例: 関数の内部の動作を詳しく見たい場合に、関数呼び出しの中に入ります。

• ステップアウト: Shift + F11 (Windows/Linux/macOS)

  現在の関数から抜け出し、呼び出し元に戻ります。

  使用例: 関数の内部の動作を見終わった場合に、呼び出し元に戻ります。

• デバッグの停止: Shift + F5 (Windows/Linux/macOS)

  デバッグを停止します。

  使用例: デバッグを終了する場合に使用します。

3. 高度なショートカットキー

さらに、開発効率を向上させるための高度なショートカットキーを紹介します。これらのショートカットキーは、使いこなすには少し練習が必要ですが、習得することでよりスムーズなコーディングが可能になります。

3.1 リファクタリング

• Extract Method (メソッドの抽出): Ctrl + Shift + R (Windows/Linux) / Cmd + Shift + R (macOS) (Refactor 拡張機能が必要)

  選択したコードブロックを新しいメソッドとして抽出します。コードの再利用性を高め、可読性を向上させるのに役立ちます。

  使用例: 長い関数の中に重複したコードがある場合、そのコードを新しいメソッドとして抽出します。

• Inline Variable (変数のインライン化): Ctrl + Shift + I (Windows/Linux) / Cmd + Shift + I (macOS) (Refactor 拡張機能が必要)

  変数をその使用箇所に直接展開します。一時変数などを削除して、コードを簡潔にするのに役立ちます。

  使用例: 一度しか使用されていない変数を、その使用箇所に直接展開します。

3.2 拡張機能

VSCode の拡張機能は、その機能を大幅に拡張することができます。拡張機能によって、さまざまなショートカットキーが追加されます。ここでは、特によく使われる拡張機能と、それらによって追加されるショートカットキーの例を紹介します。

• Emmet: HTML/CSS のコーディングを効率化する Emmet は、非常に人気のある拡張機能です。Emmet 記法を使って、短いコードから複雑な HTML 構造や CSS スタイルを生成できます。

  • Emmet: Expand Abbreviation: Tab

    Emmet 記法を展開します。

    使用例: ! + Tab で基本的な HTML 構造を生成したり、ul>li*5 + Tab で 5 つのリストアイテムを持つ

    要素を生成したりできます。

  • GitLens: Git の機能を強化する GitLens は、コードの変更履歴や blame 情報を表示するのに役立ちます。

    • Show Commit History: GitLens によって提供されるコマンドパレットから、ファイルのコミット履歴を表示します。

  3.3 ターミナル操作

  VSCode の統合ターミナルは、コマンドライン操作を行う際に非常に便利です。ターミナル操作に関するショートカットキーをいくつか紹介します。

  • 新しいターミナル: Ctrl + Shift + \`` (Windows/Linux) /Cmd + Shift + “ (macOS)

    新しいターミナルを作成します。

  • ターミナルの分割: Ctrl + Shift + 5 (Windows/Linux) / Cmd + Shift + 5 (macOS)

    ターミナルを分割します。複数のコマンドを同時に実行したい場合に便利です。

  • ターミナルの切り替え: Ctrl + PgUp/PgDn (Windows/Linux) / Cmd + Shift + Up/Down (macOS)

    複数のターミナルを切り替えます。

  • ターミナルの閉じる: Ctrl + D (Linux/macOS)

    現在のターミナルを閉じます。

  4. ショートカットキーのカスタマイズ

  VSCode のショートカットキーは、自分の好みに合わせて自由にカスタマイズできます。

  4.1 キーボードショートカットエディタ

  VSCode には、キーボードショートカットを編集するための専用のエディタが用意されています。

  1. コマンドパレットを開く: Ctrl + Shift + P (Windows/Linux) / Cmd + Shift + P (macOS)
  2. 「キーボードショートカットを開く」と入力: コマンドパレットに「キーボードショートカットを開く」と入力し、Enter キーを押します。
  3. キーボードショートカットエディタが開きます: エディタには、すべてのコマンドとそのショートカットキーが表示されます。

  4.2 ショートカットキーの変更

  1. 変更したいコマンドを検索: 検索ボックスにコマンド名を入力して、変更したいコマンドを検索します。
  2. コマンドを右クリック: 変更したいコマンドを右クリックし、「キーバインドの変更」を選択します。
  3. 新しいショートカットキーを入力: 新しいショートカットキーを入力し、Enter キーを押します。
  4. ショートカットキーが変更されます: これで、指定したコマンドに新しいショートカットキーが割り当てられました。

  4.3 keybindings.json を編集

  キーボードショートカットエディタからだけでなく、keybindings.json ファイルを直接編集することもできます。

  1. キーボードショートカットエディタを開く: 上記の手順でキーボードショートカットエディタを開きます。
  2. 「keybindings.json を開く」を選択: エディタの右上にある「keybindings.json を開く」アイコンをクリックします。
  3. keybindings.json ファイルが開きます: このファイルに、ショートカットキーの設定が JSON 形式で記述されています。

  4. ショートカットキーを編集: JSON 形式でショートカットキーを追加、変更、削除します。

     例:

     json
[
{
"key": "ctrl+shift+l",
"command": "editor.action.selectHighlights",
"when": "editorFocus"
}
]

     • key: ショートカットキー
     • command: 実行するコマンド
     • when: ショートカットキーが有効になる条件

  5. ファイルを保存: keybindings.json ファイルを保存すると、変更が適用されます。

  5. まとめ

  この記事では、VSCode のショートカットキーについて、基本的なものから高度なものまで網羅的に解説しました。ショートカットキーを使いこなすことで、コーディング速度が向上し、より効率的に開発を進めることができます。

  • 基本的なショートカットキー: ファイル操作、編集、表示など、日常的な作業で頻繁に使うショートカットキーは、まず最初に覚えましょう。
  • 便利なショートカットキー: コード編集、ナビゲーション、デバッグなど、開発効率を向上させるためのショートカットキーも積極的に活用しましょう。
  • 高度なショートカットキー: リファクタリングや拡張機能など、さらに高度なショートカットキーを習得することで、よりスムーズなコーディングが可能になります。
  • ショートカットキーのカスタマイズ: 自分の好みに合わせてショートカットキーをカスタマイズすることで、さらに快適な開発環境を構築できます。

  ぜひこの記事を参考にして、VSCode のショートカットキーをマスターし、快適なコーディングライフを送ってください。

  ---

  この記事は、VSCode のショートカットキーを網羅的に解説し、開発速度の向上に役立つ情報を提供することを目指しました。各ショートカットキーの説明だけでなく、具体的な使用例やカスタマイズ方法についても解説することで、読者がより実践的にショートカットキーを活用できるように構成しました。