こんにちは!開発現場で日々コードと向き合っていると、「マウスを握る時間、もったいないな…」と感じること、ありませんか?キーボードから手を離してマウスに伸び、目的の場所をクリックして、またキーボードに戻る。このわずか数秒のロストモーションが、1日の中で何十回、何百回と積み重なると、ものすごい時間のロスになりますし、何より「思考のフロー状態(ゾーン)」が途切れてしまいます。
今回は、世界中のエンジニアに愛されている「VS Code(Visual Studio Code)」を使って、マウス操作を極限まで減らし、キーボードだけで風のようにコードを操るための「ショートカット完全攻略」をお届けします。
初心者の方でもつまずかないよう、ツールの本質的な役割から、今日から使える爆速テクニック、そして自分好みにキーバインドを調律する方法まで、優しく丁寧に、そして徹底的に解説していきますね。これをマスターすれば、毎日のコーディングが劇的に楽になりますよ。一緒に「脱・マウス」の扉を開きましょう!
—
1. なぜVS Codeなのか?:エディタの本質と「脱マウス」の思想
私たちがコードを書くとき、エディタは単なる「文字入力ソフト」ではありません。あなたの思考をダイレクトに画面へと出力するための「インターフェース」です。
VS Codeがこれほどまでに支持されている理由は、軽量でありながら拡張性が高く、そして何よりも「キーボード駆動(Keyboard-driven)開発」を強烈にサポートする設計思想にあります。画面上のメニューやアイコンをクリックする操作は、すべて裏側で「コマンド」として定義されており、それらはすべてショートカットキーに割り当てることが可能です。
マウス操作を減らすということは、単に手が疲れないというだけでなく、「脳内のアイデアを最速でコードに変換する」というエンジニアにとって最も価値のある体験を手に入れることを意味します。
—
2. 基礎セットアップ:まずはここから始めるショートalta環境
ショートカットを覚える前に、VS Codeを「キーボード操作しやすい状態」にチューニングする、極めて重要な初期設定を行いましょう。
2-1. コマンドパレットという「魔法の杖」を召喚する
VS Codeにおけるすべての操作のハブ(中心地)となるのが「コマンドパレット」です。メニューバーを探し回る必要はもうありません。
- Windows / Linux: `Ctrl` + `Shift` + `P` (または `F1`)
- Mac: `Cmd` + `Shift` + `P` (または `F1`)
これを押すと、画面中央に検索窓が現れます。ここに「settings」と打ち込んでみてください。「基本設定: 設定 (JSON) を開く」という項目が出てきますよね。VS Codeの設定は、すべて `settings.json` というテキストファイルで管理・バージョン管理することができます。
2-2. 現場のプロが推す!生産性を底上げする初期設定
まずは、エディタの挙動を最適化するための設定を `settings.json` に書き込んでみましょう。
{
// 1. 保存時に自動でコード整形(Formatter)を実行し、インデントや構文の乱れを一瞬で修正する
“editor.formatOnSave”: true,
// 2. ミニマップ(画面右側の全体像プレビュー)を非表示にし、コードの表示領域を広げる(視線の移動を減らす)
“editor.minimap.enabled”: false,
// 3. 括弧のペアを色分けし、ネストが深い複雑なコードでも一目で構造を把握できるようにする
“editor.bracketPairColorization.enabled”: true,
// 4. 単語の補完ポップアップを自動表示させ、タイピング量を物理的に減らす
“editor.quickSuggestions”: {
“other”: true,
“comments”: false,
“strings”: false
}
}
これらの設定により、「コードを綺麗にする」「全体像を見るためにスクロールする」といった無駄なマウス操作が自動化され、キーボードから手を離さずにコーディングに没頭できる環境が整います。
—
3. 爆速コーディングの真髄:覚えておくべき「神」ショートカット一覧
ここからが本番です。数あるショートカットの中から、実務での使用頻度が圧倒的に高く、投資対効果(覚えたときの恩恵)が最大のものだけを厳選しました。
OS共通で、Macは `Cmd`、Windows/Linuxは `Ctrl` として読み替えてください(一部 `Alt` / `Option` も含まれます)。
3-1. 移動・ナビゲーション系(「探す」を瞬殺する)
| 操作内容 | Mac キーバインド | Windows / Linux キーバインド | 現場での活用シーン |
| :— | :— | :— | :— |
| コマンドパレット | `Cmd` + `Shift` + `P` | `Ctrl` + `Shift` + `P` | あらゆる機能や設定を呼び出す。迷ったらこれ。 |
| クイックオープン | `Cmd` + `P` | `Ctrl` + `P` | ファイル名の一部を入力して、プロジェクト内のファイルを一瞬で開く。 |
| 行のジャンプ | `Ctrl` + `G` | `Ctrl` + `G` | エラーログにある「〇行目」へダイレクトにワープする。 |
| 定義へ移動 | `F12` | `F12` | 関数や変数が「どこで定義されたか」を即座に追いかける。 |
> 先輩からのアドバイス:
> プロジェクト内のファイルを移動するときに、左側のファイルツリー(エクスプローラー)をマウスでクリックしていませんか? `Ctrl / Cmd + P` のクイックオープンを使えば、ファイル名の頭文字を数文字打つだけで目的のファイルが開きます。これに慣れると、ファイルツリーを開くことがなくなりますよ。
3-2. 編集・行操作系(「書く・直す」を加速する)
| 操作内容 | Mac キーバインド | Windows / Linux キーバインド | 現場での活用シーン |
| :— | :— | :— | :— |
| 行の複製 | `Shift` + `Option` + `↓` | `Shift` + `Alt` + `↓` | 現在の行をごっそり真下にコピーする。 |
| 行の上下移動 | `Option` + `↑` / `↓` | `Alt` + `↑` / `↓` | コードのブロックをマウスで切り取らずに、行単位で入れ替える。 |
| 行の削除 | `Cmd` + `Shift` + `K` | `Ctrl` + `Shift` + `K` | 不要になった1行を、わざわざ選択して消さずに一発で削除。 |
| 行のコメントアウト | `Cmd` + `/` | `Ctrl` + `/` | 選択中(または行全体)のコードを瞬時にコメントアウト/解除。 |
3-3. マルチカーソル系(コピペ作業を絶滅させる伝説の機能)
複数箇所を同時に編集する「マルチカーソル」は、VS Codeの真骨頂です。これが使えるようになると、単純作業のスピードが文字通り10倍になります。
| 操作内容 | Mac キーバインド | Windows / Linux キーバインド | 現場での活用シーン |
| :— | :— | :— | :— |
| 一致する語句を順次選択 | `Cmd` + `D` | `Ctrl` + `D` | 選択した単語と同じ次の単語にもカーソルを追加し、一括編集する。 |
| すべての同一語句を選択 | `Cmd` + `Shift` + `L` | `Ctrl` + `Shift` + `L` | ファイル内にあるすべての同一変数名を一斉に選択して書き換える。 |
| 任意の場所へ自由配置 | `Option` + クリック | `Alt` + クリック | (例外的にマウスを使いますが超強力)クリックした複数の場所に同時にカーソルを置く。 |
マルチカーソルのイメージ:
例えば、HTMLのリストタグが大量にあって、すべての `class=”item”` を `class=”card”` に変えたいとき。`class=”item”` の `item` をダブルクリックして選択し、`Cmd/Ctrl + D` を連打するだけで、すべての該当箇所にカーソルが光り、一文字変えるだけで一瞬で書き換わります。置換ダイアログを開く必要すらありません。
—
4. 自分だけのカスタムキーバインド:ショートカットを掌に馴染ませる
標準のショートカットキーも素晴らしいですが、「既存の他のソフト(例えばブラウザやExcelなど)の操作と競合して押しづらい」「もっと自分の手の形に合ったキー配置にしたい」という欲求が必ず生まれてきます。
VS Codeでは、すべてのキーバインドを完全に自分好みにカスタマイズできます。
4-1. キーボードショートカット設定画面の開き方
コマンドパレット(`Cmd/Ctrl + Shift + P`)を開き、`Preferences: Open Keyboard Shortcuts (JSON)` と入力して開きます。すると、`keybindings.json` という設定ファイルが開きます。
4-2. 実践!自分好みのキーバインドを追加する
例えば、「ターミナルを開閉するショートカット(標準では `Ctrl + ~` など)」を、もっと押しやすい `Cmd + J` や独自のキーに割り当てたい場合、以下のように記述します。
[
{
// 割り当てたいキーの組み合わせ
“key”: “ctrl+j”,
// 実行したいVS CodeのコマンドID(例:統合ターミナルの表示/非表示)
“command”: “workbench.action.terminal.toggleTerminal”,
// このショートカットが有効になる条件(エディタがフォーカスされている時など)
“when”: “editorTextFocus”
}
]
このように、自分が「よく使うのに、今のショートカットは押しにくいな」と感じる操作があれば、遠慮なく自分の手に馴染むキーへとカスタマイズしていきましょう。開発環境は、エンジニアの身体の一部です。自分に最適化された環境こそが、最高のパフォーマンスを生み出します。
—
5. おわりに:明日からのコーディングを劇的に変えるために
今回は、VS Codeのショートカットキーの基本から、現場で即座に役立つテクニック、そしてキーバインドのカスタマイズ手法までを解説しました。
最後に一つだけ、先輩エンジニアとして大切なアドバイスを贈ります。
「一度にすべてのショートカットを覚えようとしないでください」
人間は、一度にたくさんのことを覚えることはできません。明日から試すなら、まずはこの3つだけに絞ってみてください。
1. `Cmd/Ctrl + P` (ファイルを開く)
2. `Cmd/Ctrl + Shift + P` (コマンドパレットを開く)
3. `Cmd/Ctrl + D` (マルチカーソルで同じ文字を選択する)
この3つを意識して使い続けるだけで、マウスに手を伸ばす回数が劇的に減り、画面から目を離さずにコードを書き続ける心地よさを実感できるはずです。その快感を知ったとき、あなたのコーディングスタイルはすでに次のステージへと進化しています。
明日からの開発が、よりスピーディーで楽しいものになりますように。それでは、快適なエディタライフを!