VSCodeのマルチカーソル機能で編集速度を3倍にする方法｜現場で使える実践テクニック

#VSCode #ショートカット #フロントエンド #マルチカーソル #編集効率化
C
クリオ
Web制作ディレクター / フロントエンジニア

こんにちは！

今日は「VSCodeのマルチカーソル機能で編集速度を3倍にする方法」について解説します。

マルチカーソルって何？僕が最初に感動した話

マルチカーソル機能って、知ってますか？
正直、僕も最初はこの機能の存在を知りませんでした。
HTMLで同じクラス名を10個の要素に付与するときに、1個ずつ手作業で編集してたんです。
めっちゃ時間かかるやん。

ある日、先輩エンジニアが「それ、一気にやれるで」って教えてくれたのがマルチカーソル。
その瞬間、僕の編集速度が一気に変わりました。
今では、このテクニックなしでは仕事ができません。

マルチカーソルとは、ファイル内の複数の場所に同時にカーソルを配置して、一度に複数箇所を編集できる機能です。
同じ名前を変更したり、複数行に同じテキストを追加したり、本当に便利なんですよ。

基本的なマルチカーソルの使い方3パターン

では、実際のやり方を説明していきますね。

パターン1：同じ単語をすべて選択して編集する

これは本当に使頻度が高いです。
例えば、userNameという変数名をuserEmailに変更したいとします。

やり方はこんな感じです。

  1. 変数名の上にカーソルを置く
  2. Ctrl+D（Mac: Cmd+D）を何度か押す
  3. 同じ単語が全て選択される
  4. そのまま新しい名前を入力

一度に全部変わるので、めっちゃ気持ちいいですよ。
ほんま、手作業でやってた時代に戻りたくないです。

パターン2：同じ単語をまとめて選択（Ctrl+Shift+L）

これは「すべての出現箇所を一気に選択したい」ときに使います。
手順は以下の通りです。

  1. 変更したい単語にカーソルを置く
  2. Ctrl+Shift+L（Mac: Cmd+Shift+L）を押す
  3. ファイル内のすべての該当単語にカーソルが配置される
  4. 同時に入力して編集

ただ、注意点があります。
大文字小文字を区別するので、うっかり違う単語も一緒に変わってしまうことはありませんが、複雑な検索をしたいときは「検索と置換」機能の方が安全ですね。

パターン3：複数行に同時に文字を追加する

例えば、複数行のコードの前にコメント記号 // を付けたいとき、地味に便利です。

  1. 編集したい複数行を選択
  2. Altキーを押しながら、各行の先頭をクリック
  3. 複数のカーソルが同時に配置される
  4. 一度に入力して、全行に追加

これもほんま時間短縮になります。

実践的な活用例｜現場でよく使うテクニック

理論だけじゃなくて、実際の案件でどう使うのか、具体例を話しますね。

例1：HTMLの属性を一括追加

複数の <button> タグに、一度に data-tracking="btn" を追加したいとします。
マルチカーソルでやると、こんな感じです。

1. <button の上にカーソルを置いて Ctrl+D を連打
2. すべての <button が選択される
3. カーソルを属性の場所に移動させる
4. 一気に属性を追加

最初は「えっ、こんなことできるん？」って感じでしたが、今は毎週のように使ってますよ。

例2：CSSクラスの統一

デザイン修正で .btn-primary を .btn-main に変更するという指示が来た場合。
HTMLファイルとCSSファイルで複数箇所あります。

  1. ファイル内で Ctrl+H（置換機能）を使う方法もありますが
  2. 複数ファイルで同じクラス名を変更するなら、VSCodeの「すべてを置換」機能と組み合わせるのが確実です
  3. その際、マルチカーソルで事前にチェックしておくと、間違いが防げます

例3：JavaScriptのオブジェクトキー設定

こんなコードがあるとします。

const data = {
  name: '',
  email: '',
  phone: '',
};

全てのプロパティに初期値を設定したい場合、マルチカーソルで:

  1. 最初の空文字列にカーソルを置く
  2. Ctrl+D で全て選択
  3. 一度に値を入力

地味ですけど、この積み重ねが1日トータルで30分、1ヶ月で数時間の時間短縮になるんです。

よくある勘違い

「マルチカーソルは複雑だから、初心者には難しい」って思う人、いると思うんです。
でも実は、そんなことないんですよ。
単純な Ctrl+D と Ctrl+Shift+L の2つさえ覚えたら、9割の場面で使えます。

僕も最初は「これ、使いこなせるのかな」って心配でしたが、案外シンプルです。
1週間もあれば、体が覚えます。

まとめ

マルチカーソル機能は、一度使うとやめられません。
特に大規模なリファクタリングやコード変更の際に、本当に活躍します。

今日紹介した機能は:

  • Ctrl+D / Cmd+D：同じ単語を1つずつ選択
  • Ctrl+Shift+L / Cmd+Shift+L：全出現箇所を一気に選択
  • Alt+クリック：任意の位置に複数カーソル配置

この3つをマスターするだけで、編集速度が大きく変わります。
最初は「これ、本当に必要？」って思うかもしれませんが、使ってみるとその便利さがわかりますよ。

明日から、ぜひ試してみてください。
きっと「なんで今まで使わ