VSCodeのマルチカーソル編集で作業時間を半減させるコツ｜現場で使える実践テクニック

こんにちは！

今日は「VSCodeのマルチカーソル編集で作業時間を半減させるコツ」について解説します。

マルチカーソルの基本：同時に複数箇所を編集する

僕が前職で入社した新人時代のことなんですけど、HTMLテンプレートを修正する際に、複数行の同じ部分を1行ずつ変更していたんですよ。
その時の先輩が「あ、それマルチカーソルでやったらめっちゃ早いで」って教えてくれたんです。
その時から僕の作業効率は一気に変わりました。

マルチカーソルとは、簡単に言うと「複数の場所に同時にカーソルを置いて、一度に編集できる機能」のことです。
これがほんまに強力で、実務では毎日のように活躍してます。

基本的な操作方法は3つです：

• 同じ単語を複数選択：選んだ単語の上で Ctrl+D（Macは Cmd+D）を押すと、次の同じ単語が追加選択されます。
• 任意の場所にマルチカーソルを置く：Ctrl+クリック（Macは Cmd+クリック）で好きな場所にカーソルを追加できます。
• 列を選択して一括編集：Ctrl+L で現在行を選択後、複数行に拡張することで列単位の編集が可能です。

この3つを覚えるだけで、日々の修正作業の時間が大幅に短くなります。

実務で活躍する3つの使い分けパターン

では具体的に、現場でよく出くわすシナリオを紹介していきますね。

パターン1：CSSクラス名の一括変更

例えば、プロジェクト途中で .btn-primary というクラス名を .button-main に変更する必要が出てきたとします。
やり方としては、まず .btn-primary をどこでもいいから選択します。
その状態で Ctrl+D を連打すると、該当する全ての .btn-primary が選択されていきます。
全部選択したら、そのまま .button-main と打つだけで、全て一括置換されてしまうんですよ。

「検索と置換」機能と違う点は、自分の目で見ながら1個ずつ確認できるところです。
うっかり関係ない部分も置換してしまう心配がありません。

パターン2：HTMLの複数タグに属性を追加

これはめっちゃ使う場面です。
複数の <input> タグに aria-label="送信ボタン" という属性を追加したいときとか。

まずは最初の <input> にカーソルを置いて、クロージングタグの直前に Ctrl+クリック で他の <input> タグにもカーソルを追加します。
複数のカーソルが全て同じ位置にそろったら、一度に属性を打ち込めるわけです。

これ、手作業でやってると結構な時間がかかるんですが、マルチカーソルなら秒で終わります。

パターン3：JavaScriptの変数名をまとめてリネーム

あるコンポーネント内で使ってる変数名を変更する場合も活躍します。
例えば userData を currentUser に変えたいケースですね。

関数スコープ内で userData を選択して、Ctrl+D で全て選択した後、リネームすれば、その関数内の全ての userData が一気に置換されます。
グローバルに置換されないから、同じ変数名を使ってる他の関数には影響しません。

マルチカーソル編集のよくある落とし穴

便利なマルチカーソルなんですが、実は僕も初めて使ったときに失敗があったんです。

落とし穴1：予期しない場所も選択されてしまう

最初の失敗は、Ctrl+D で選択してる際に、選択範囲がズレていることに気づかずに編集してしまったことです。
例えば、class という単語を変更しようとしたら、JavaScriptの class キーワードも一緒に選択されてしまったわけです。
そのまま編集したら、もうめちゃくちゃになりました。

それからは、Ctrl+D で選択するときに、毎回ちゃんと対象を確認するようにしてます。
不安だったら「検索と置換」（Ctrl+H）で置換前後を確認するほうが安全ですね。

落とし穴2：マルチカーソルが増えすぎて制御できなくなる

次の落とし穴は、カーソルが多すぎて何が何やら分からなくなるケースです。
いっぱい Ctrl+クリック でカーソル追加してると、どこからどこまで編集対象なのか、視認しづらくなることがあります。
特にコードが複雑な場合は危険です。

こういうときは、いったんカーソルをリセット（Esc キーを押す）して、もう一度落ち着いて整理するといいですよ。

落とし穴3：異なる長さのテキストを同時入力する場合の誤り

あと、これもやらかしたんですけど、複数カーソルが揃ってない状態で編集してしまうパターンです。
例えば、5文字の単語と3文字の単語を同時に選択して、別の単語に置換したいと思っても、長さが違うとうまくいきません。
同じ長さのテキストを置換するときだけ、マルチカーソルが真価を発揮します。

長さが違うものを一括置換したいときは、素直に検索と置換機能を使うほうが無難です。

まとめ

マルチカーソル編集は、一度使い慣れるとほんまに手放せない機能です。
僕も毎日のように活用してますし、チームメンバーにも教えてます。

ポイントをおさらいすると：

• Ctrl+D で同じ単語を連続選択してリネーム
• Ctrl+クリック で任意の箇所に複数カーソルを配置
• 不安な置換は「検索と置換」で確認してから実行
• カーソルが多すぎるときは一度リセットして整理する

これらを意識するだけで、めっちゃ効率的になりますよ。
特に、HTMLテンプレートの修正やスタイルの調整が多いプロジェクトでは、本当に時