VS Codeで1行を簡単に選択する方法｜ショートカットキーや便利な操作まとめ

プログラミング・IT

「この行だけコピーしたい」「1行ごとに並び替えたい」など、コードを書いていると、そんな場面がたくさん出てきます。

Visual Studio Code（VS Code）なら、1行を丸ごと簡単に選択したり、入れ替えたりする便利なショートカット が用意されています。

この記事では、VS Codeで1行を素早く選択・操作する方法 を、初心者にもわかりやすく解説します。これらのテクニックを覚えれば、コード編集の効率が格段にアップします。

スポンサーリンク

なぜ1行選択が重要なのか

プログラミングでよくある作業

コードの整理

  • 不要な行の削除
  • コードの順序変更
  • 関数やメソッドの並び替え

デバッグ作業

  • 特定の行をコメントアウト
  • ログ出力の追加・削除
  • 一時的なコードの無効化

リファクタリング

  • 変数宣言の位置調整
  • import文の整理
  • 関数定義の移動

これらの作業を効率的に行うには、1行を素早く選択する技術が不可欠です。

VS Codeで1行を選択する基本方法

基本的な1行選択ショートカット

Windows / Linux

Ctrl + L

macOS

Cmd + L

このショートカットを押すと、現在カーソルがある行がまるごと選択されます。

実際の使用例

HTMLファイルでの例

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>サンプルページ</title>  ← この行にカーソルを置く
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

<title> の行で Ctrl + L を押すと、その行全体が選択されます。

Pythonファイルでの例

def calculate_sum(numbers):
    total = 0
    for num in numbers:  ← この行にカーソルを置く
        total += num
    return total

複数行の連続選択

Ctrl + L を複数回押すことで、選択範囲を拡張できます：

  1. 1回目：現在の行を選択
  2. 2回目：次の行まで選択
  3. 3回目：さらに次の行まで選択

実例

function greetUser(name) {
    console.log("Hello, " + name);  ← 1回目：この行のみ選択
    return "Welcome!";              ← 2回目：ここまで選択
}                                   ← 3回目：ここまで選択

マウスを使った1行選択

トリプルクリック

行の任意の場所で3回連続クリックすると、その行全体が選択されます。

行番号クリック

VS Codeで行番号が表示されている場合、行番号をクリックするとその行全体を選択できます。

1行選択後の基本操作

コピー・カット・ペースト

選択した行をコピー

Ctrl + C（Windows/Linux）
Cmd + C（macOS）

選択した行をカット

Ctrl + X（Windows/Linux）
Cmd + X（macOS）

ペースト

Ctrl + V（Windows/Linux）
Cmd + V（macOS）

選択した行の削除

完全削除

Delete キー

または

Backspace キー

実用例：不要なコメント行の削除

# 以下は古いコード
def old_function():  ← この行を削除したい
    pass

def new_function():
    print("新しい関数")

def old_function(): の行で Ctrl + L → Delete で一瞬で削除できます。

1行を上下に移動する方法

基本の移動ショートカット

Windows / Linux

Alt + ↑（上に移動）
Alt + ↓（下に移動）

macOS

Option + ↑（上に移動）
Option + ↓（下に移動）

実際の移動例

移動前

def calculate_area(width, height):
    print("計算を開始します")
    result = width * height      ← この行を上に移動したい
    return result

移動後

result = width * height の行で Alt + ↑ を押すと：

def calculate_area(width, height):
    result = width * height      ← 移動完了
    print("計算を開始します")
    return result

複数行の同時移動

複数行を選択した状態で Alt + ↑/↓ を使うと、選択したブロック全体を移動できます。

実例

// 移動前
console.log("処理開始");
let x = 10;           ← この2行を
let y = 20;           ← まとめて移動
console.log("変数を設定しました");

let x = 10; と let y = 20; を選択して Alt + ↓ を押すと：

// 移動後
console.log("処理開始");
console.log("変数を設定しました");
let x = 10;           ← 移動完了
let y = 20;

マルチカーソルによる複数行操作

マルチカーソルとは

複数の場所に同時にカーソルを置いて、同じ操作を一度に実行できる機能です。

基本的な使い方

任意の位置にカーソルを追加

Alt + Click（Windows/Linux）
Option + Click（macOS）

上下の行に順次カーソルを追加

Ctrl + Alt + ↑/↓（Windows/Linux）
Cmd + Option + ↑/↓（macOS）

実用例：複数行の同時編集

変数名の一括変更

# 変更前
user_name = "太郎"
user_age = 25
user_email = "taro@example.com"

各行の user_ の部分にマルチカーソルを置いて、一度に customer_ に変更：

# 変更後
customer_name = "太郎"
customer_age = 25
customer_email = "taro@example.com"

リストの項目に一括でコメントを追加

// 変更前
console.log("処理1");
console.log("処理2");
console.log("処理3");

各行の先頭にマルチカーソルを置いて、一度に // を追加：

// 変更後
// console.log("処理1");
// console.log("処理2");
// console.log("処理3");

同じ文字列の一括選択

単語を選択してすべて選択

  1. 変更したい単語を選択
  2. Ctrl + D（Mac: Cmd + D）を押す
  3. 同じ単語が順次選択される
  4. すべて選択するまで Ctrl + D を繰り返す
  5. または Ctrl + Shift + L（Mac: Cmd + Shift + L）で一度にすべて選択

実例

.button {
    background-color: blue;  ← "blue" を選択
    border-color: blue;      ← Ctrl + D で追加選択
    color: blue;             ← Ctrl + D で追加選択
}

すべての blue を選択して、一度に red に変更可能。

応用テクニック

行の複製

現在の行を複製

Ctrl + Shift + D（Windows/Linux）
Cmd + Shift + D（macOS）

実例

<div class="container">  ← この行で実行

実行後：

<div class="container">
<div class="container">  ← 複製された行

行の結合

下の行と結合

Ctrl + J（Windows/Linux）
Cmd + J（macOS）

実例

# 結合前
name = "太郎"
age = 25

name = "太郎" の行で Ctrl + J を実行：

# 結合後
name = "太郎" age = 25

空行の挿入

上に空行を挿入

Ctrl + Shift + Enter（Windows/Linux）
Cmd + Shift + Enter（macOS）

下に空行を挿入

Ctrl + Enter（Windows/Linux）
Cmd + Enter（macOS）

これらのショートカットは、カーソル位置に関係なく動作します。

行のソート

選択した複数行をアルファベット順にソート

  1. ソートしたい行を選択
  2. Ctrl + Shift + P（Mac: Cmd + Shift + P）でコマンドパレット
  3. 「Sort Lines Ascending」または「Sort Lines Descending」を選択

実例

# ソート前
zebra
apple
banana

ソート後：

# ソート後
apple
banana
zebra

効率的なワークフロー例

デバッグ時の活用

ログ出力の一時的な無効化

def process_data(data):
    print("処理開始")           ← Ctrl + L → Ctrl + / でコメントアウト
    result = calculate(data)
    print(f"結果: {result}")    ← Ctrl + L → Ctrl + / でコメントアウト
    return result

コードのリファクタリング

関数の順序変更

// 変更前：呼び出し順序と定義順序が合わない
function main() {
    helper1();
    helper2();
}

function helper2() {
    console.log("Helper 2");
}

function helper1() {
    console.log("Helper 1");
}

helper1 と helper2 の関数定義をそれぞれ選択して Alt + ↑/↓ で順序を調整。

HTMLのタグ整理

要素の順序変更

<!-- 変更前 -->
<header>
    <h1>タイトル</h1>
</header>
<main>
    <p>メインコンテンツ</p>
</main>
<nav>                        ← この nav 要素を header の前に移動
    <ul>
        <li>メニュー1</li>
    </ul>
</nav>

nav 要素全体を選択して Alt + ↑ で移動。

トラブルシューティング

ショートカットが効かない場合

キーバインドの競合確認

  1. Ctrl + K, Ctrl + S（Mac: Cmd + K, Cmd + S）でキーボードショートカット設定を開く
  2. 該当するショートカットを検索
  3. 競合しているコマンドがないか確認

拡張機能の影響

一部の拡張機能がショートカットを上書きしている場合があります：

  1. 拡張機能を一時的に無効化
  2. ショートカットが動作するか確認
  3. 問題のある拡張機能を特定

選択範囲が期待と異なる場合

改行コードの違い

Windows（CRLF）とmacOS/Linux（LF）で改行コードが異なる場合、選択範囲が変わることがあります。

確認方法： VS Code右下のステータスバーで改行コードを確認（「CRLF」または「LF」と表示）

パフォーマンスの問題

大きなファイルでの操作

非常に大きなファイル（数万行以上）では、行操作が遅くなる場合があります：

対策：

  • ファイルを分割する
  • 必要な部分のみを別ファイルにコピーして作業
  • VS Codeの設定で editor.largeFileOptimizations を有効化

まとめ

VS Codeで1行を効率的に操作するためのテクニックをまとめると：

基本の1行選択

  • Ctrl + L（Mac: Cmd + L）：1行選択
  • 連続して押すと複数行選択

1行の移動

  • Alt + ↑/↓（Mac: Option + ↑/↓）：行の上下移動
  • 選択中の複数行も同時移動可能

マルチカーソル操作

  • Alt + Click（Mac: Option + Click）：任意の位置にカーソル追加
  • Ctrl + D（Mac: Cmd + D）：同じ文字列を順次選択

応用テクニック

  • Ctrl + Shift + D（Mac: Cmd + Shift + D）：行の複製
  • Ctrl + J（Mac: Cmd + J）：行の結合
  • コマンドパレットからソート機能

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました