VScode「選択」メニュー攻略!カーソルを自在に操り、編集速度をハックしよう
こんにちは。ゆうせいです。
「ファイル」メニューでプロジェクトを開き、「編集」メニューでコードを修正する方法を学びましたね。これで基本的な作業はバッチリです。
では、さらに一歩進んで、プロのエンジニアのように「効率よく」編集するにはどうすればよいでしょうか? その答えが、今回解説する「選択」メニューに隠されています。
「え、選択って、マウスでドラッグするだけじゃないの?」と思ったあなた。
VScodeの「選択」メニューは、そんな単純なものではありません。
これは、あなたのカーソル(文字を入力する場所を示す縦棒)を分身させ、コードを自在に移動させるための、魔法のような機能が詰まった場所なんです!
なぜ「選択」メニューが重要なのか?
「編集」メニューの「コピー」や「切り取り」は、まず「選択」することから始まりますよね。
つまり、「選択」はすべての編集作業の「起点」です。
この「起点」となる作業をいかに速く、正確に行えるか。VScodeの「選択」メニューは、この点を極限まで突き詰めています。
特に強力なのが「マルチカーソル」という機能。
「カーソルを分身させて、複数の場所を同時に編集する」という、まさに魔法のようなテクニックです。これを使いこなせば、面倒な繰り返し作業が一瞬で終わりますよ!
日常作業を爆速化する「行」操作
まずは、マルチカーソルの前に、今日からすぐに使える超便利な「行」の操作を覚えましょう。これは使わない日はないくらい便利です!
1. 行を上へ/下へ移動 (Alt + UpArrow / Alt + DownArrow)
これは、カーソルがある行(または選択した複数行)を、丸ごと上下に移動させる機能です。
- 使いどころ:
- 「あ、この処理、やっぱり1行上に書きたい」
- 「CSSのプロパティの順番を入れ替えたい」
- 「リストの項目の順番を変えたい」
こんな時、いちいち「切り取り(Ctrl+X)」して、移動先で「貼り付け(Ctrl+V)」していませんか?
Alt + ↑ や Alt + ↓ を押すだけで、選択中の行がスルスルと動きます。カット&ペーストの作業が、キー1つで完結するんです!
2. 行を上へ/下へコピー (Shift + Alt + UpArrow / Shift + Alt + DownArrow)
これは、カーソルがある行を、そっくりそのまま上か下に複製する機能です。
- 使いどころ:
- 「似たような変数を3つ定義したい」
- 「HTMLのリスト項目(
<li>)をたくさん作りたい」
Shift + Alt + ↓ を「ダダダッ」と押せば、同じ行が一瞬で複製されます。コピー(Ctrl+C)して、改行して、貼り付け(Ctrl+V)...なんて手間はもう不要です!
編集の革命!「マルチカーソル」の世界
お待たせしました。VScodeの真骨頂、「マルチカーソル」です。
これは、複数の場所に同時にカーソルを立てて、一斉にタイピングできる機能です。
想像してみてください。10ヶ所の行末に、同時に「;(セミコロン)」を入力できたら...? 10個の変数名を、同時に変更できたら...?
それを実現するのが、これらの機能です。
1. カーソルを上/下に挿入 (Ctrl + Alt + UpArrow / DownArrow)
一番わかりやすいマルチカーソルの作り方です。
現在のカーソルの真上、あるいは真下に、新しいカーソルを追加していきます。
- 使いどころ:
- 複数の行の「行頭」に、同じ文字(例:
*など)を一括で挿入したい。 - 複数の行の「行末」に、同じ文字(例:
,や;)を一括で挿入したい。
- 複数の行の「行頭」に、同じ文字(例:
キレイに縦に並んだコードをまとめて編集するのに最適です。
2. 次の出現箇所を追加 (Ctrl + D)
これがマルチカーソルの花形です!
- まず、変更したい単語(例えば変数名
user)をマウスでダブルクリックするか、ドラッグして選択します。 - その状態で
Ctrl + Dを押します。 - すると、ファイル内で次に現れる
userという単語も選択され、カーソルが2つになります。 - さらにもう一度
Ctrl + Dを押すと、3つ目のuserが選択され... - この状態でキーボードを打つと、なんと選択されたすべての場所が同時に書き換わります!
- 使いどころ:
- 「この関数の中だけで使っている変数名を、一括で変更したい」
「置換(Ctrl+H)」と似ていますが、Ctrl+Dは「自分が目で見て確認した場所だけ」を順番に追加して変更できるので、より安全で直感的に操作できます。
3. すべての出現箇所を選択 (Ctrl + Shift + L)
Ctrl + D の「全部バージョン」です。
単語を選択した状態で Ctrl + Shift + L を押すと、そのファイル内に存在するすべての同じ単語が一瞬で選択され、マルチカーソル状態になります。
- 使いどころ:
- 「このファイルで使っている
userNameっていう単語、全部customerNameに変えたい」
- 「このファイルで使っている
Ctrl+H の「すべて置換」とほぼ同じですが、こちらは置換後の状態をリアルタイムで確認しながらタイピングできるのが強みです。
まとめと今後の学習指針
「選択」メニューは、あなたの編集作業を「1対1」から「1対多」へと進化させる強力な武器庫です。
- まずは「行」操作:
Alt +矢印(行の移動)とShift + Alt + 矢印(行のコピー)をマスターし、日々のカット&ペースト作業をなくしましょう。 - マルチカーソルに挑戦: まずは
Ctrl + D(次の出現箇所を追加)から試してみてください。同じ単語が2つ、3つと選択され、同時に編集できる感覚に感動するはずです! - 列編集:
Ctrl + Alt + 矢印で、縦に並んだコードを一括編集する便利さも体感してみましょう。
これらのショートカットは、マウス操作よりも圧倒的に高速です。
最初は指が追いつかないかもしれませんが、意識して使い続けるうちに、あなたのコーディング速度は間違いなく数倍に跳ね上がりますよ!
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
- 代表取締役
-
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します!
この記事に間違い等ありましたらぜひお知らせください。
最新の投稿
山崎講師2025年11月1日P値とは?新人エンジニア必見!「白いカラス」で学ぶ仮説検定の第一歩
山崎講師2025年11月1日VScode「表示」メニュー完全ガイド!最強の『コマンドパレット』と作業画面のカスタマイズ術
山崎講師2025年11月1日VScode「選択」メニュー攻略!カーソルを自在に操り、編集速度をハックしよう
山崎講師2025年11月1日VScodeの「編集」メニュー徹底解説!これぞエンジニアの三種の神器