キーボードショートカットでコーディングを高速化する
ファイルを開いたり、メニューをクリックしたり、検索を実行するためにマウスに手を伸ばすたびに、集中力が途切れます。こうした小さな中断が積み重なっていきます。朗報があります。開発者向けの厳選されたキーボードショートカットを使えば、100個ものキーの組み合わせを暗記することなく、これらの中断のほとんどを排除できます。
この記事では、ワークフロー別に分類された高効果のショートカットに焦点を当て、VS CodeとブラウザDevToolsをカバーします。すべてのショートカットはWindows/Linux | macOSの形式で記載しています。ショートカットはエディタのバージョン、OS、ユーザー設定によって異なる場合があるため、期待通りに動作しない場合は自分の環境で確認してください。
重要なポイント
- 厳選された少数のキーボードショートカットで、マウスへの依存を大幅に減らし、フロー状態を維持できます。
- ナビゲーション、編集、検索、デバッグには、それぞれ最初に学ぶ価値のある高効果のショートカットがあります。
- マルチカーソル編集とシンボルのリネーム(
F2)は、VS Codeで最も時間を節約できる機能の一つです。 - ショートカットはエディタ、OSバージョン、カスタムキーバインディングによって異なる場合があります。常に自分の環境で確認してください。
ナビゲーション:マウスに触れずにコード内を移動する
これらのVS Codeショートカットは、最も一般的なナビゲーションタスクを処理します。
| 操作 | Windows/Linux | macOS |
|---|---|---|
| ファイル名でクイックオープン | Ctrl+P | Cmd+P |
| 定義へジャンプ | F12 | F12 |
| 前の場所に戻る | Alt+← | Ctrl+- |
| ファイル内のシンボルへジャンプ | Ctrl+Shift+O | Cmd+Shift+O |
| コマンドパレットを開く | Ctrl+Shift+P | Cmd+Shift+P |
Ctrl+P / Cmd+Pだけで、サイドバーでのブラウジングのほとんどを置き換えられます。ファイル名の一部を入力して即座に開けます。F12と組み合わせて定義にジャンプし、Alt+← / Ctrl+-で戻る—マウスは不要です。
編集:コードをより速く記述・整形する
これらのコーディング生産性ショートカットは、作業を遅らせる反復的なテキスト操作を処理します。
- 行コメントの切り替え:
Ctrl+//Cmd+/— 現在の行または選択範囲に機能します。 - 行を上下に移動:
Alt+↑/Option+↑とAlt+↓/Option+↓— カット&ペーストなしでロジックを並べ替えます。 - 行を複製:
Shift+Alt+↓/Shift+Option+↓— 現在の行を直下にコピーします。 - 行を削除:
Ctrl+Shift+K/Cmd+Shift+K - マルチカーソル:
Alt+Click/Option+Click— 追加のカーソルを配置し、すべての位置を同時に編集できます。
マルチカーソル編集は、繰り返される変数名の変更や、複数の行に同じテキストを同時に追加する際に特に便利です。
検索とリファクタリング:ファイル間でコードを変更する
| 操作 | Windows/Linux | macOS |
|---|---|---|
| ファイル内検索 | Ctrl+F | Cmd+F |
| プロジェクト全体で検索 | Ctrl+Shift+F | Cmd+Shift+F |
| ファイル内置換 | Ctrl+H | Option+Cmd+F |
| シンボルのリネーム(すべての参照) | F2 | F2 |
| 単語のすべての出現箇所を選択 | Ctrl+Shift+L | Cmd+Shift+L |
F2は変数や関数をリネームする最もクリーンな方法です。スコープ内のすべての参照を自動的に更新します—手動の検索置換よりも安全で高速です。
Discover how at OpenReplay.com.
デバッグ:重要なDevToolsキーボードショートカット
VS CodeまたはブラウザDevToolsでデバッグする場合、これらのショートカットが基本的なワークフローをカバーします。
- ブレークポイントの切り替え:
F9(VS Code) - 開始/続行:
F5 - ステップオーバー:
F10 - ステップイン:
F11 - ステップアウト:
Shift+F11
Chrome DevToolsでは、F12またはCtrl+Shift+I / Cmd+Option+Iでパネルを開きます。パネル内では、Ctrl+P / Cmd+Pでファイルピッカーが開きます—VS Codeと同じマッスルメモリです。完全なリストはDevToolsショートカットドキュメントで確認できます。
常に移植できるわけではないショートカットについて
人気のガイドに記載されているショートカットの中には、エディタ固有のものや、OSレベルのバインディングと競合するものがあります。たとえば、VS CodeのCtrl+Dは、ハイライトされた単語の次の出現箇所を選択します—行を複製するわけではありません。これは他のエディタから引き継がれた一般的な誤解です。デフォルトを想定する前に、必ず環境設定 → キーボードショートカット(Ctrl+K Ctrl+S / Cmd+K Cmd+S)または公式のVS Codeキーバインディングリファレンスでキーバインディングを確認してください。
まとめ
このリストから、最も繰り返す操作に合った5つのショートカットを選んでください。1週間それらだけを使用してください。自動的に感じられるようになったら、さらに5つ追加します。ショートカットによる開発者ワークフローの最適化は、すべてを暗記することではありません—最も頻繁に思考を中断する特定の摩擦点を取り除くことです。
よくある質問
Windows/Linuxでは Ctrl+P、macOSでは Cmd+P を押してクイックオープンダイアログを開きます。ファイル名の一部を入力して結果から選択します。これはサイドバーをナビゲートするよりも高速で、多数のファイルがある大規模プロジェクトでもうまく機能します。
Windows/Linuxでは Alt、macOSでは Option を押しながら、カーソルを配置したい各位置をクリックします。その後、すべてのカーソル位置で同時に入力、削除、またはペーストができます。これは変数名や類似したコード行などの繰り返しパターンを編集する際に特に便利です。
F2はシンボルのリネームをトリガーします。テキストベースの検索置換とは異なり、コードのコンテキストを理解し、そのスコープ内のシンボルへの実際の参照のみをリネームします。これにより、同じ文字列に一致する無関係なテキストへの誤った変更を回避できます。
必ずしもそうではありません。ショートカットはエディタ間で大きく異なる場合があります。たとえば、Ctrl+D はVS Codeでは次の出現箇所を選択しますが、他のエディタでは行を複製する場合があります。依存する前に、必ずエディタのキーバインディング設定を確認して、各ショートカットが何をするかを確認してください。
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.