🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【VSCodeショートカット一覧】作業効率が劇的に上がる便利キーまとめ（Windows/Mac対応）

こんにちは！ほんの数ヶ月前までプログラミングの知識が全くなかったのですが、AIの力を借りながら何とか2つのWebサイトを自力で立ち上げることができました。

この経験を通じて痛感したのは、「もっと早く知っておけばよかった…」と感じるテクニックの多さです。その中でも、特に作業効率に直結するのが「ショートカットキー」でした。

最初は「たくさんありすぎて覚えられない！」と敬遠していました。しかし、本当に役立つキーは実はそれほど多くありません。この記事では、私がWebサイト制作の現場で「これなしではもうコーディングできない！」と心から思う、選りすぐりのショートカットキーを、私の実体験と共にご紹介します。

よくあるショートカットキーの羅列ではなく、「なぜ便利なのか」「どんな場面で使うのか」を、初心者だった頃の私自身に教えるような気持ちで、噛み砕いて解説していきます。さあ、一緒に作業スピードを劇的に向上させましょう！

はじめに：ショートカットを覚えるのが苦手なあなたへ

「ショートカットキー一覧」と聞くと、アルファベットと記号がズラッと並んだ表を想像して、そっとページを閉じたくなりませんか？私もそうでした。

そんな私がショートカットを使いこなせるようになった秘訣は、たった2つです。

  1. 一度に全部覚えようとしないこと。まずは、この記事で紹介する「神ショートカット」の中から、1日1つでもいいので意識して使ってみてください。
  2. 「これって、もっと楽にできないかな？」と常に考えること。そして、その疑問をAI（ChatGPTなど）に「VSCodeで、同じ単語を全部一括で変更するショートカットありますか？」のように、具体的な言葉で質問するのです。

この記事では、私が実際にAIに助けられながら習得した、本当に使えるショートカットだけを厳選しています。さあ、最初のステップを踏み出しましょう。

これだけは絶対！コーディングが爆速になる「神ショートカット」BEST 5

数あるショートカットの中でも、私が毎日、いえ、1時間に何十回も使っている「神ショートカット」を5つ厳選しました。これらを覚えるだけで、あなたのコーディング体験は一変します。

第1位：同じ単語を一瞬で選択・修正！マルチカーソル編集

Windows: Ctrl + D
Mac: Cmd + D

これは、私が最初に覚えて感動したショートカットです。ページ内にある同じ単語やコードを複数選択し、一括で編集できます。

体験談： HTMLで商品リストを作っていた時、クラス名を<div class="card">から<div class="product-card">に変更したくなったとします。以前の私は、検索機能で一つずつ置換していましたが、このショートカットを知ってからは、"card"をダブルクリックして選択し、あとはCtrl + D（MacならCmd + D）を必要な回数だけ押すだけ。カーソルがどんどん増えていき、一回のタイピングで全てのクラス名を修正できた時の衝撃は忘れられません。

使い方のコツ： 修正したい単語をマウスでダブルクリックしてから、このショートカットを使い始めると、より正確かつスピーディーに選択できます。

Ctrl+Dを使って、複数の'card'という単語を同時に選択し、'product-card'に一括で書き換えている様子のアニメーションGIF

第2位：コピペ不要！行を丸ごと移動

Windows: Alt + ↑ / ↓
Mac: Option + ↑ / ↓

現在カーソルがある行、または選択している複数行を、上下にそのまま移動できます。もう、行を選択 → Ctrl + X → 移動先をクリック → Ctrl + V という面倒な手順は必要ありません。

体験談： HTMLのリスト<li>の順番を入れ替えたり、CSSのプロパティの順序を整えたりする時に、このショートカットは絶大な威力を発揮します。コードを切り取って貼り付ける際に起こりがちなインデントの崩れや、うっかりコードの一部を消してしまうミスが完全になくなりました。安全かつ直感的にコードの構造を変更できる、まさに「魔法の杖」です。

Altと矢印キーを使って、リストの項目を上下に移動させている様子のアニメーションGIF

第3位：行の複製も一瞬で

Windows: Shift + Alt + ↑ / ↓
Mac: Shift + Option + ↑ / ↓

現在いる行を、上または下にそのまま複製します。同じようなコードを何度も書く時に、作業時間を劇的に短縮できます。

体験談： 例えば、ナビゲーションメニューやリスト項目など、同じ構造のHTML要素を量産したい時。以前は一行コピーして、改行して、貼り付けて…と繰り返していました。このショートカットなら、Shift + Alt + ↓を連打するだけで、あっという間に必要な数のリスト項目が完成します。第2位の「行の移動」と組み合わせれば、コーディングの速度が数倍に跳ね上がります。

第4位：どこからでもファイルを開く！コマンドパレット

Windows: Ctrl + P
Mac: Cmd + P

このショートカットを押すと、画面上部に検索ボックスが現れ、プロジェクト内のファイル名を入力して瞬時に開くことができます。左側のエクスプローラーからファイルを探す必要はもうありません。

体験談： サイト制作に慣れてくると、ファイル数が数十個、数百個に増えていきます。そうなると、「あのCSSファイルはどこのフォルダに入れたっけ…？」と探すだけで一苦労。Ctrl + Pを覚えてからは、ファイルを探す時間がほぼゼロになりました。styleと入力すればstyle.cssが候補に出てくる。まさに思考を止めないコーディングを実現してくれます。

第5位：すべてはここから始まる。コマンドパレット

Windows: Ctrl + Shift + P
Mac: Cmd + Shift + P

第4位と似ていますが、こちらはファイルだけでなく、VSCodeの「すべての機能（コマンド）」を検索して実行できます。ショートカットキーを忘れても、やりたい操作の名前（例えば format や theme）を入力すれば、VSCodeがその機能を呼び出してくれます。

体験談： 「あれ、コードを綺麗に整形するショートカットって何だっけ？」と思った時、Ctrl + Shift + P を押して format と入力すれば、「ドキュメントのフォーマット」というコマンドが見つかります。これさえ覚えておけば、他のショートカットを忘れても何とかなる、まさに「最後の砦」です。新しい拡張機能を入れた時も、まずはここからどんな機能が追加されたかを探しにいきます。

【応用編】自分だけの最強環境を作る：キーバインドの変更

VSCodeの素晴らしい点は、ショートカットキーを自分好みにカスタマイズできることです。「このショートカット、便利だけどキーが押しにくいな…」と感じたら、変更してしまいましょう。

ここでは、その設定ファイルであるkeybindings.jsonの開き方と、私が実際に試して便利だったカスタマイズ例をご紹介します。コピペするだけで、あなたのVSCodeがさらに使いやすくなりますよ。

1. keybindings.jsonを開く

  1. まず、コマンドパレットを開きます。（Windows: Ctrl + Shift + P / Mac: Cmd + Shift + P）
  2. 検索ボックスにkeybindingsと入力します。
  3. 候補の中から「基本設定: キーボード ショートカットを開く (JSON)」を選択して、Enterキーを押します。

すると、keybindings.jsonという設定ファイルが開きます。最初は[]とだけ書かれているかもしれません。この括弧の中に、設定を書き込んでいきます。

2. コピペでOK！おすすめカスタマイズ設定

以下は私のおすすめカスタマイズです。このコードブロックを丸ごとコピーして、あなたのkeybindings.jsonの[]の中に貼り付けてみてください。

[
    // {
    //   "key": "元のキー",
    //   "command": "実行したいコマンド",
    //   "when": "特定の条件下でのみ有効にする"
    // },
    
    // 例1: ターミナルを開くショートカットを押しやすくする
    // デフォルトの`Ctrl + ``は押しにくいので変更
    {
        "key": "ctrl+shift+t", // Windows
        "command": "workbench.action.terminal.toggleTerminal"
    },
    {
        "key": "cmd+shift+t", // Mac
        "command": "workbench.action.terminal.toggleTerminal"
    },

    // 例2: エディタ(タブ)を閉じるのを押しやすくする
    // デフォルトの`Ctrl+W`を上書き
    {
        "key": "ctrl+q", // Windows
        "command": "workbench.action.closeActiveEditor"
    },
    {
        "key": "cmd+w", // Macはデフォルトで押しやすいのでそのままでもOK
        "command": "workbench.action.closeActiveEditor"
    }
]

解説：

このように、keyの部分に自分の好きなキーの組み合わせを、commandに割り当てたい機能を記述します。どんなcommandがあるかは、公式サイトのキーバインドのドキュメントや、コマンドパレットで探すことができます。ぜひ、自分だけの最強のショートカット環境を構築してみてください。

注意点： keybindings.jsonはJSON形式のファイルです。最後の項目以外は、各}の後にカンマ,が必要なので、編集する際は文法エラーに気をつけてください。もしエラーが出たら、VSCodeが教えてくれるので、指示に従って修正しましょう。

まとめ：ショートカットで開く、新しいコーディングの世界

今回は、私がプログラミング初心者の頃から愛用している、本当に役立つVSCodeのショートカットキーをご紹介しました。最後にもう一度、神ショートカット5選をおさらいしましょう。

最初は全部覚える必要はありません。まずは1位のCtrl + D（Cmd + D）から、ぜひ今日のコーディングで意識して使ってみてください。指が動きを覚えたとき、あなたの作業スピードは間違いなく向上しているはずです。

ショートカットキーは、あなたの思考を止めずに、アイデアを直接コードに変換するための強力なツールです。この記事が、あなたの快適なコーディングライフの第一歩となれば、これほど嬉しいことはありません。

次のステップへ

ショートカットをマスターしたら、次は「拡張機能」でVSCodeをさらにパワーアップさせてみませんか？あなたの生産性をさらに高める、おすすめの拡張機能を紹介しています。

【拡張機能おすすめ】VSCodeの生産性を高める人気エクステンション10選

関連テンプレート