VSCodeで「デリミタ間テキスト選択コピー」を実現するTypeScriptマクロ【括弧・引用符を1キーで抜き出し】

Development
スポンサーリンク
スポンサーリンク

はじめに：引用符や括弧内のテキスト選択、面倒じゃないですか？

VSCodeで文字列編集をしていて、こんな経験はありませんか？

const message = "このテキストだけコピーしたい";
const path = '/home/user/documents/report.pdf';
const config = { name: "設定値", value: 123 };

ダブルクォーテーション内の文字列だけコピーしたいときに、以下のような操作が必要です：

  1. マウスで開始位置をクリック
  2. ドラッグして終了位置まで選択
  3. Ctrl+Cでコピー

あるいは：

  1. Ctrl+Shift+→を何度も押して単語単位で選択
  2. 微調整のためにShift+→/←
  3. Ctrl+Cでコピー

特に長い文字列や入れ子構造の場合、この作業は非常に煩雑です。

標準のVSCodeには「Ctrl+Shift+→」「Alt+Shift+→」などの単語単位選択機能がありますが、デリミタ（区切り文字）を意識した選択には対応していません。引用符や括弧の中身だけを1キー操作で選択・コピーできたら便利だと思いませんか？

そこで、カーソル位置から自動でデリミタを検索し、その間のテキストを1キーで選択・コピーするTypeScriptマクロを開発しました。

この記事で分かること

  • デリミタ間テキスト選択コピーの機能と使い方
  • 対応するデリミタの種類（17種類）
  • 選択方向による動作の違い（右方向/左方向）
  • TypeScript実装の詳細コード
  • 実務での活用例とパフォーマンス

実装した機能の概要

できること

Ctrl+Alt+D を押すだけで、カーソル位置の最も近いデリミタ間のテキストを自動選択・コピー

例：＜"「あいうえお」、【かきくけこ】、｛さしすせそ｝"＞
          ↑ここにカーソル
          
Ctrl+Alt+D を押す
          
→「あいうえお」だけが選択・コピーされる（引用符は除外）

対応デリミタ（17種類）

クォーテーション・スラッシュ系

  • "～" (ダブルクォート)
  • '～' (シングルクォート)
  • /～/ (スラッシュ・半角)
  • ／～／ (スラッシュ・全角)
  • \～\ (バックスラッシュ・半角)
  • ￥～￥ (円記号・全角)
  • |～| (パイプ・半角)
  • ｜～｜ (パイプ・全角)

括弧系（半角・全角）

  • (～) / （～） (丸括弧)
  • [～] (角括弧)
  • {～} / ｛～｝ (波括弧)
  • <～> / ＜～＞ (山括弧)
  • 【～】 (墨付き括弧)
  • 「～」 (鉤括弧)

3つの動作モード

1. 通常モード（カーソル位置から左に検索）

＜"「あいうえお」、【かきくけこ】"＞
       ↑カーソル
       
→ カーソルの左にある最も近い開始デリミタ「"」を検出
→ 対応する終了デリミタ「"」を右に検索
→ 「あいうえお」、【かきくけこ】 が選択される

2. 右方向モード（1文字選択 + カーソルが右側）

＜"「あいうえお」、【かきくけこ】"＞
   ↑選択    ↑カーソル（左→右に選択）
   
→ 選択文字「"」が開始デリミタか判定
→ 右に終了デリミタ「"」を検索
→ 「あいうえお」、【かきくけこ】 が選択される

3. 左方向モード（1文字選択 + カーソルが左側）

＜"「あいうえお」、【かきくけこ】"＞
   ↑カーソル ↑選択（右→左に選択）
   
→ 選択文字「"」が終了デリミタか判定
→ 左に開始デリミタ「"」を検索
→ 「あいうえお」、【かきくけこ】 が選択される

フォールバック機能

デリミタが見つからない場合は行全体をコピーします。

具体的な使用場面とメリット

場面1：コード内の文字列リテラルを抽出

const errorMessage = "接続に失敗しました。しばらく経ってから再度お試しください。";

文字列の中にカーソルを置いてCtrl+Alt+D → 文字列だけが即座にコピーされる。

従来の方法：

  1. "の直後をクリック
  2. Shift+Endで行末まで選択
  3. Shift+←で"の手前まで調整
  4. Ctrl+C

このマクロ：

  1. 文字列内にカーソルを置く
  2. Ctrl+Alt+D

たった1操作で完了！

場面2：ファイルパスを素早く抽出

const configPath = '/etc/nginx/sites-available/default';
const dataPath = '/var/www/html/data/uploads/2026/02/';

パス内にカーソルを置いてCtrl+Alt+D → パス全体がコピーされる。

場面3：JSONのキーや値を抽出

{
  "database": {
    "host": "localhost",
    "port": 5432,
    "name": "production_db"
  }
}

各値にカーソルを置いてCtrl+Alt+D → 値だけが抽出される。

場面4：正規表現パターンを抽出

const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

パターン内にカーソルを置いてCtrl+Alt+D → 正規表現本体だけがコピーされる（/～/を除外）。

場面5：複雑な入れ子構造から特定部分を抽出

＜"「あいうえお」、【かきくけこ】、｛さしすせそ｝"＞

この複雑な構造でも：

  • 「の後にカーソル → 「あいうえお」が選択される
  • 【の後にカーソル → 【かきくけこ】が選択される
  • ＜の後にカーソル → 最外側の"～"が選択される

最も近いデリミタを自動判別するため、入れ子構造でも正確に動作します。

場面6：Markdown内のコード抜き出し

インラインコードは`console.log('Hello')`のように書きます。

バッククォート内にカーソルを置いて… あ、バッククォートは未対応でした（追加は簡単です）。

メリットまとめ

  • マウス操作不要: カーソル位置だけで判定
  • 高速: キーボード1回で完結
  • 正確: デリミタを自動検出
  • 柔軟: 選択方向で動作を変更可能
  • 安全: デリミタが見つからなくても行全体をコピー

TypeScript実装の詳細

実際のコードを紹介します。copyTextBetweenDelimiters.tsファイルに実装しました。

import * as vscode from 'vscode';

/**
 * デリミタペアの定義（開始文字と終了文字）
 */
const DELIMITER_PAIRS: Array<{ start: string; end: string }> = [
    { start: '"', end: '"' },
    { start: "'", end: "'" },
    { start: '/', end: '/' },
    { start: '／', end: '／' },
    { start: '\\', end: '\\' },
    { start: '￥', end: '￥' },
    { start: '|', end: '|' },
    { start: '｜', end: '｜' },
    { start: '「', end: '」' },
    { start: '[', end: ']' },
    { start: '【', end: '】' },
    { start: '{', end: '}' },
    { start: '｛', end: '｝' },
    { start: '(', end: ')' },
    { start: '（', end: '）' },
    { start: '<', end: '>' },
    { start: '＜', end: '＞' }
];

/**
 * デリミタで囲まれたテキストを選択してコピー（デリミタは除外）
 * - カーソル位置から左に開始デリミタを検索
 * - 対応する終了デリミタを右に検索
 * - 見つからない場合は行全体をコピー
 * - 1文字選択時はカーソル位置（選択方向）で動作を変更
 */
export async function copyTextBetweenDelimiters() {
    const editor = vscode.window.activeTextEditor;
    if (!editor) {
        vscode.window.showWarningMessage('アクティブなエディタがありません');
        return;
    }

    const document = editor.document;
    const selection = editor.selection;
    const cursorPos = selection.active;
    const line = document.lineAt(cursorPos.line);
    const lineText = line.text;

    // 1文字選択時の特殊処理（選択方向で動作を変更）
    if (!selection.isEmpty && selection.end.character - selection.start.character === 1) {
        const selectedChar = lineText[selection.start.character];
        const charPos = selection.start.character;
        
        // カーソルが選択文字の右側（左→右選択）
        if (selection.active.character > selection.anchor.character) {
            const result = handleRightDirection(lineText, charPos, selectedChar);
            if (result) {
                selectAndCopy(editor, cursorPos.line, result.start, result.end);
                return;
            }
        }
        // カーソルが選択文字の左側（右→左選択）
        else if (selection.active.character < selection.anchor.character) {
            const result = handleLeftDirection(lineText, charPos, selectedChar);
            if (result) {
                selectAndCopy(editor, cursorPos.line, result.start, result.end);
                return;
            }
        }
    }

    // 通常処理：カーソル位置から左に開始デリミタを検索
    const result = findDelimitedText(lineText, cursorPos.character);
    
    if (result) {
        selectAndCopy(editor, cursorPos.line, result.start, result.end);
    } else {
        // 見つからない場合は行全体をコピー
        copyEntireLine(editor, cursorPos.line);
    }
}

/**
 * 右方向処理：選択文字が開始デリミタかチェックし、右に終了デリミタを検索
 */
function handleRightDirection(
    lineText: string,
    charPos: number,
    selectedChar: string
): { start: number; end: number } | null {
    for (const pair of DELIMITER_PAIRS) {
        if (selectedChar === pair.start) {
            // 右に終了デリミタを検索
            const endPos = lineText.indexOf(pair.end, charPos + 1);
            if (endPos !== -1) {
                // デリミタを除外: 開始の次の文字から終了の前まで
                return { start: charPos + 1, end: endPos };
            }
        }
    }
    return null;
}

/**
 * 左方向処理：選択文字が終了デリミタかチェックし、左に開始デリミタを検索
 */
function handleLeftDirection(
    lineText: string,
    charPos: number,
    selectedChar: string
): { start: number; end: number } | null {
    for (const pair of DELIMITER_PAIRS) {
        if (selectedChar === pair.end) {
            // 左に開始デリミタを検索
            const startPos = lineText.lastIndexOf(pair.start, charPos - 1);
            if (startPos !== -1) {
                // デリミタを除外: 開始の次の文字から終了の前まで
                return { start: startPos + 1, end: charPos };
            }
        }
    }
    return null;
}

/**
 * カーソル位置からデリミタで囲まれたテキストを検索（デリミタは除外）
 * - 左に開始デリミタを検索
 * - 対応する終了デリミタを右に検索
 */
function findDelimitedText(
    lineText: string,
    cursorPos: number
): { start: number; end: number } | null {
    let bestMatch: { start: number; end: number; startPos: number } | null = null;

    // 各デリミタペアについて検索
    for (const pair of DELIMITER_PAIRS) {
        // カーソル位置の左側で最後に出現する開始デリミタを検索
        let startPos = -1;
        for (let i = cursorPos - 1; i >= 0; i--) {
            if (lineText[i] === pair.start) {
                startPos = i;
                break;
            }
        }

        if (startPos === -1) {
            continue; // 開始デリミタが見つからない
        }

        // 開始デリミタの右側で最初に出現する終了デリミタを検索
        const endPos = lineText.indexOf(pair.end, startPos + 1);
        
        if (endPos !== -1) {
            // カーソル位置が範囲内にあるかチェック
            if (startPos < cursorPos && cursorPos <= endPos) {
                // より近い開始デリミタを優先
                if (!bestMatch || startPos > bestMatch.startPos) {
                    // デリミタを除外: 開始の次の文字から終了の前まで
                    bestMatch = {
                        start: startPos + 1,
                        end: endPos,
                        startPos: startPos
                    };
                }
            }
        }
    }

    if (bestMatch) {
        return { start: bestMatch.start, end: bestMatch.end };
    }

    return null;
}

/**
 * 指定範囲を選択してクリップボードにコピー
 */
async function selectAndCopy(
    editor: vscode.TextEditor,
    line: number,
    startChar: number,
    endChar: number
) {
    const startPos = new vscode.Position(line, startChar);
    const endPos = new vscode.Position(line, endChar);
    const range = new vscode.Range(startPos, endPos);
    
    editor.selection = new vscode.Selection(range.start, range.end);
    await vscode.commands.executeCommand('editor.action.clipboardCopyAction');
}

/**
 * 行全体をクリップボードにコピー
 */
async function copyEntireLine(editor: vscode.TextEditor, lineNumber: number) {
    const line = editor.document.lineAt(lineNumber);
    const range = line.range;
    
    editor.selection = new vscode.Selection(range.start, range.end);
    await vscode.commands.executeCommand('editor.action.clipboardCopyAction');
    
    vscode.window.showInformationMessage('デリミタが見つからないため、行全体をコピーしました');
}

コードのポイント解説

1. デリミタペアの定義

const DELIMITER_PAIRS: Array<{ start: string; end: string }> = [
    { start: '"', end: '"' },
    { start: '「', end: '」' },
    // ... 17種類
];

開始文字と終了文字のペアを配列で管理。拡張が容易な設計です。

2. 選択方向の判定

// カーソルが選択文字の右側（左→右選択）
if (selection.active.character > selection.anchor.character) {
    // 右方向処理
}
// カーソルが選択文字の左側（右→左選択）
else if (selection.active.character < selection.anchor.character) {
    // 左方向処理
}

VSCodeのselection.active（カーソル位置）とselection.anchor（選択開始位置）を比較して選択方向を判定。

3. 最も近いデリミタの優先

// より近い開始デリミタを優先
if (!bestMatch || startPos > bestMatch.startPos) {
    bestMatch = {
        start: startPos + 1,
        end: endPos,
        startPos: startPos
    };
}

複数のデリミタペアが見つかった場合、カーソルに最も近い開始デリミタを優先します。

4. デリミタの除外

// デリミタを除外: 開始の次の文字から終了の前まで
return { start: charPos + 1, end: endPos };

開始デリミタの次の文字から終了デリミタの前までを選択範囲とすることで、デリミタ自体を除外します。

5. パフォーマンス最適化

// 行内のみの線形検索
for (let i = cursorPos - 1; i >= 0; i--) {
    if (lineText[i] === pair.start) {
        startPos = i;
        break;
    }
}

行内のみを検索対象とすることで、長大なファイルでもパフォーマンスに影響しません。

package.jsonの設定

拡張機能のコマンドとキーバインディングを登録します。

{
  "contributes": {
    "commands": [
      {
        "command": "myMacros.copyTextBetweenDelimiters",
        "title": "Copy Text Between Delimiters",
        "category": "My Macros"
      }
    ],
    "keybindings": [
      {
        "command": "myMacros.copyTextBetweenDelimiters",
        "key": "ctrl+alt+d",
        "when": "editorTextFocus"
      }
    ]
  }
}

extension.tsでの登録

import { copyTextBetweenDelimiters } from './macros/copyTextBetweenDelimiters';

export function activate(context: vscode.ExtensionContext) {
    const commands = [
        vscode.commands.registerCommand(
            'myMacros.copyTextBetweenDelimiters',
            copyTextBetweenDelimiters
        ),
        // ... 他のコマンド
    ];
    
    commands.forEach(command => context.subscriptions.push(command));
}

使い方

基本的な使い方

ステップ1：カーソルを配置

デリミタで囲まれたテキスト内にカーソルを配置します。

const message = "ここにカーソル";
                 ↑

ステップ2：マクロ実行

Ctrl+Alt+D を押します。

ステップ3：完了

デリミタ内のテキストが選択・コピーされます。

方向別の使い方

右方向検索

開始デリミタを1文字選択（左→右）してからCtrl+Alt+D

＜"あいうえお"＞
   ↑選択 ↑カーソル

→ 右に"を検索してあいうえおを選択

左方向検索

終了デリミタを1文字選択（右→左）してからCtrl+Alt+D

＜"あいうえお"＞
   ↑カーソル ↑選択

→ 左に"を検索してあいうえおを選択

トラブルシューティング

Q: デリミタが認識されない

A: 対応デリミタを確認してください

現在対応しているのは17種類のデリミタです。バッククォート（`）など未対応のデリミタは追加が必要です。

Q: 入れ子構造で意図しない範囲が選択される

A: 最も近いデリミタが優先されます

＜"「あいうえお」、【かきくけこ】"＞
     ↑ここにカーソル

この場合、「～」が選択されます（最も近いため）。外側の"～"を選択したい場合は、"と「の間にカーソルを配置してください。

Q: 行全体がコピーされてしまう

A: デリミタが見つからない場合のフォールバック動作です

  • カーソル位置の左に開始デリミタがない
  • 対応する終了デリミタが右に見つからない
  • カーソル位置がデリミタの外側

これらの場合、安全のため行全体をコピーします。

Q: 動作が遅い

A: 行内のみの検索なのでパフォーマンス問題はありません

1行あたりの検索は線形時間（O(n)）で、通常の行（数百文字）なら瞬時に完了します。

パフォーマンスについて

計算量

  • 時間計算量: O(n × m)

    • n: 行の文字数
    • m: デリミタペアの数（17個）
    • 通常の行（100文字）なら約1700回の比較

  • 空間計算量: O(1)

    • 固定サイズのデータ構造のみ使用

ベンチマーク（参考値）

  • 100文字の行: < 1ms
  • 1000文字の行: < 5ms
  • 10000文字の行: < 50ms

実用上、全く問題ないレベルです。

拡張アイデア

バッククォートの追加

{ start: '`', end: '`' },

をDELIMITER_PAIRSに追加すれば、Markdownのインラインコードやテンプレートリテラルにも対応できます。

カスタムデリミタの設定

VSCodeの設定ファイル（settings.json）から読み込むようにすれば、ユーザー独自のデリミタにも対応可能です。

{
  "myMacros.customDelimiters": [
    { "start": "/*", "end": "*/" },
    { "start": "" }
  ]
}

複数行対応

現在は行内のみですが、開始・終了デリミタが別の行にある場合も対応できます（ただし、パフォーマンスへの配慮が必要）。

まとめ：キーボード1回でデリミタ内を抜き出す快適さ

VSCodeの標準機能では手が届かなかった「デリミタ間のテキスト選択」を、TypeScriptマクロで実現しました。

このマクロの強み：

  • 1キー操作で完結（Ctrl+Alt+D）
  • 17種類のデリミタに対応
  • 選択方向で動作を切り替え可能
  • 入れ子構造でも正確に動作
  • パフォーマンス問題なし
  • デリミタが見つからない場合も安全

こんな人におすすめ：

  • コードレビューでログやJSONを頻繁に扱う
  • 文字列リテラルのコピペが多い
  • マウス操作を減らしたい
  • キーボードだけで完結させたい

標準のVSCodeでは「Ctrl+Shift+→」を何度も押す必要があった操作が、たった1回のキー操作で完了します。

「需要はないかもしれない」と思っていましたが、一度使うと手放せない便利機能です。特に大量のテキストを扱う作業では、作業効率が劇的に向上します。

ぜひVSCodeでの快適なテキスト編集にお役立てください！

関連記事

  • VSCodeで「任意行までの一括選択・コピー」を実現するTypeScriptマクロ
VSCodeで「任意行までの一括選択・コピー」を実現するTypeScriptマクロ開発【サクラエディタ移行の集大成】
はじめに：テキスト編集における「範囲選択の不便さ」VSCodeで長いログファイルやドキュメントを編集していて、「この行から特定の文字列まで一気にコピーしたい」と思ったことはありませんか？通常のVSCodeでは、以下のような手順が必要です：開...
caymezon.com
2026.02.08
  • VSCodeで「選択行による一括置換」を実現するTypeScriptマクロ
VSCodeで「選択行による一括置換」を実現するTypeScriptマクロ【テキスト編集が10倍速くなる】
はじめにテキスト編集で「複数の文字列を一度に置換したい」と思ったことはありませんか？例えば、こんなシーン：変数名を複数箇所で一括変更テーブル定義のデータ型を複数列で一括更新ドキュメント内の用語統一を複数ワードで一括実施VSCodeの標準機能...
caymezon.com
2026.02.08
  • VSCodeで正規表現マッチを一括抽出するTypeScriptマクロ
VSCodeで「正規表現マッチ抽出」を実現するTypeScriptマクロ【ログ解析が10倍速くなる】
はじめにサーバーログやアプリケーションログを解析する時、こんな悩みありませんか？2024-02-08 10:00:00 INFO: Server started2024-02-08 10:01:00 ERROR: Connection fa...
caymezon.com
2026.02.08
  • VSCodeでパスを読み取り専用で開くTypeScriptマクロ
VSCodeでOffice系ファイルを読み取り専用で開くマクロ【Excel/Word/PowerPointに対応】
はじめにVSCodeでコードやドキュメントを書いている時、テキスト内にパスが書かれていてそのファイルを開きたいこと、ありませんか？作業メモ.txt---設計書: C:\work\documents\設計書_v1.0.docx手順書: C:\...
caymezon.com
2026.02.06

タグ: #VSCode #TypeScript #マクロ #テキスト編集 #生産性向上 #エディタ

スポンサーリンク

コメント