UnsplashのEmile Perronが撮影した写真

こんにちは。ReactエンジニアのT.C.です。 VSCodeにはいくつもショートカットがありますが、今回はその中でも特に便利でありながら、意外と活用されていないと感じたショートカットを3つ厳選してご紹介します。(普段Windowsで開発しているので、Windowsのキーで表現します。)

コーディングの際にもコードレビューの際にも便利な機能をピックアップしましたので、知らなかったものがあればぜひ使ってみてください。

Ctrl + D（同じ単語を連続選択）
Shift + Alt + → / ←（選択範囲のスマートな拡大・縮小）
F12（定義へ移動） / Shift + F12（参照を検索）
まとめ
おわりに

Ctrl + D（同じ単語を連続選択）

このショートカットは、現在選択している単語と同じ単語を、ドキュメント内で順番に選択範囲に追加していくことができます。例えば、以下のようなコードがあるとします。

const name = "T.C.";
const age = 30;
const hobby = "programming";

このコードの中で、constを全てletに変更したい場合、まずはいずれかの const という文字列の一部または全体を選択し、Ctrl + D を押します。すると、次に現れる const も選択状態になります。さらに Ctrl + D を押すと、その次の const が選択されます。これを繰り返すことで、ファイル内の全ての const を複数選択状態にすることができます。この状態で let と入力すれば、選択した全ての const を一度に let へ変更できます。

let name = "T.C.";
let age = 30;
let hobby = "programming";

一見すると、通常の置換機能（Ctrl + H など）で十分ではないかと思われるかもしれません。しかし、このショートカットの強力な点は、必ずしも置換だけが目的ではない、より柔軟な編集が可能なことです。例えば、以下のようにconstの後ろに続く変数名の頭にmyをつけたい場合を考えます。

まず、3つの const を Ctrl + D で複数選択します。その後、カーソルを右に移動させ（→キーなど）、my と入力することで、それぞれの変数名の前にまとめてプレフィックスを追加できます。

const myName = "T.C.";
const myAge = 30;
const myHobby = "programming";

Ctrl + D で選択していく中で、特定の単語を選択対象から除外したい場合は、Ctrl + K を押してから Ctrl + D を押すことで、現在の選択をスキップして次の候補を選択できます。

また、Ctrl + D を押しすぎてしまい、意図しない単語まで選択してしまった場合は、Ctrl + U を押すことで、最後に追加した選択を解除できます。

このショートカットは、特にリファクタリングなど、コーディングの効率を大きく上げてくれます。

ちなみに、私は単語全体を素早く選択したい場合にも、ダブルクリックする代わりに、単語の先頭（または任意の位置）にカーソルを合わせて Ctrl + D を一度だけ押す、という使い方をすることもあります。

Shift + Alt + → / ←（選択範囲のスマートな拡大・縮小）

このショートカットは、現在のカーソル位置や選択範囲を、構文的に意味のあるブロック単位で段階的に拡大・縮小することができます。例えば、以下のようなJSXコードがあり、className="card" を持つ div タグとその内部要素をまとめてコンポーネントとして切り出したいとします。

<div>
  <a href="https://vite.dev" target="_blank">
    <img src={viteLogo} className="logo" alt="Vite logo" />
  </a>
  <a href="https://react.dev" target="_blank">
    <img src={reactLogo} className="logo react" alt="React logo" />
  </a>
</div>
<h1>Vite + React</h1>
<div className="card">
  <button onClick={() => setCount((count) => count + 1)}>
    count is {count}
  </button>
  <p>
    Edit <code>src/App.tsx</code> and save to test HMR
  </p>
</div>
<p className="read-the-docs">
  Click on the Vite and React logos to learn more
</p>

このとき、className="card" を持つ div タグの開始タグと終了タグの間にカーソルを置くか、内部の要素を適当に選択した状態で Shift + Alt + → を何度か押します。すると、選択範囲が徐々に外側のブロックへと拡大していき、最終的に目的の div タグ全体（開始タグ、内部要素、終了タグ）を正確に選択することができます。選択できたら、あとはコピー (Ctrl + C) や切り取り (Ctrl + X) を行うことで、簡単に再利用できます。

このように、JSXのネストした構造や、複雑な関数呼び出し、オブジェクトリテラルなどで、対応する括弧やタグの範囲を間違えることなく正確に選択・編集できるため非常に便利です。もちろん、選択範囲を狭めたい場合は、Shift + Alt + ← を押すことで、内側のブロックへと選択範囲を縮小できます。

React開発では、JSXによるUI構造やコールバック関数などによってネストが深くなることがよくあります。そのような場面で、「この閉じ括弧はどこに対応しているんだっけ？」と迷う時間を減らしてくれます。このショートカットはまだ使ったことがない方はぜひ試してみてください。

F12（定義へ移動） / Shift + F12（参照を検索）

F12: このショートカットは、カーソル下の関数や変数、コンポーネントなどが定義されている場所にジャンプすることができます。ファイルが異なる場合でも問題なくジャンプできるため、特にコードリーディングや、大規模なプロジェクトでコードの関連性を追跡する際に非常に強力です。

Shift + F12: 一方、こちらはカーソル下の関数や変数、コンポーネントなどがどこで使用されているか（参照されているか）を一覧で表示します。「参照」という言葉が少し分かりにくいかもしれませんが、要するに「その関数を呼び出している箇所」や「その変数を使用している箇所」を全てリストアップしてくれる機能です。

両者の関係性を図で示すと以下のようになります。

参照箇所が複数ある場合は、サイドバーや専用のビューに一覧が表示され、そこから各参照箇所へジャンプできます。これもコードリーディングや影響範囲の調査に非常に役立ちます。

F12（定義へ移動）は多くの方が活用されている印象ですが、Shift + F12（参照を検索）との違いや、その便利さを明確に意識されていないケースもあると思いましたので、紹介してみました。

まとめ

以上、Reactエンジニアがよく使うVSCodeのショートカットを3つ紹介しました。

本当は Ctrl + Shift + K で実行できる行削除や Ctrl + Shift + Enter で実行できる上に空行追加や「Ctrl + K」 → 「Ctrl + Shift + \」で実行できる同一ファイル内分割などなど挙げればいくらでもおすすめはありますが、ショートカット全集は他の記事にお任せします。

このブログを見て、VSCodeのショートカットキーに興味を持って、多くのショートカットを使いこなす人が増えたら嬉しいです。