VS Codeでコードを折り畳むショートカットまとめ｜一瞬で開閉できる便利操作

プログラミング・IT

「VS Codeでコードが長くなって見づらい」「関数やクラスだけ折り畳んでスッキリさせたい」

そんなときに役立つのがコードの折り畳み（フォールディング）機能です。

VS Codeならキーボードショートカットでサッと折り畳みや展開ができるので、スクロール地獄から解放されます。

この記事では、以下の内容について詳しく解説します：

  • 基本的な折り畳み・展開ショートカット
  • レベル別の一括折り畳み操作
  • マウス操作との組み合わせ
  • 言語別の折り畳み設定
  • カスタムリージョンでの折り畳み
  • 高度な設定とカスタマイズ
  • 便利な拡張機能

大きなファイルでも効率的にコードを読み書きできるようになります！

スポンサーリンク

折り畳み機能の基本概念

折り畳み（フォールディング）とは

折り畳み機能は、コードの一部を一時的に隠して表示をコンパクトにする機能です。

メリット

  • 可読性の向上 – 全体構造が把握しやすい
  • ナビゲーション効率化 – 目的の場所に素早く移動
  • 集中力向上 – 関係ない部分を隠して作業に集中
  • スクリーン活用 – 限られた画面領域を有効活用

折り畳み可能な要素

VS Codeでは以下の要素が自動的に折り畳み可能になります：

プログラミング構造

  • 関数・メソッド
  • クラス・インターフェース
  • 条件分岐（if、switch）
  • ループ（for、while）
  • try-catchブロック

ドキュメント構造

  • コメントブロック
  • import/require文
  • 配列・オブジェクトリテラル
  • Markdownの見出し

基本的な折り畳み・展開ショートカット

単一要素の折り畳み・展開

操作Windows/LinuxMac効果
折り畳む（1レベル）Ctrl + Shift + [Cmd + Option + [カーソル位置の要素を折り畳み
展開する（1レベル）Ctrl + Shift + ]Cmd + Option + ]カーソル位置の要素を展開

使用例

// カーソルを関数内に置いて Ctrl + Shift + [ を押す
function calculateTotal(items) {
    let total = 0;
    for (let item of items) {
        total += item.price;
    }
    return total;
}

折り畳み後

function calculateTotal(items) { ... }

再帰的な折り畳み・展開

操作Windows/LinuxMac効果
再帰的に折り畳むCtrl + K Ctrl + [Cmd + K Cmd + [カーソル位置から下のすべてを折り畳み
再帰的に展開Ctrl + K Ctrl + ]Cmd + K Cmd + ]カーソル位置から下のすべてを展開

全体的な折り畳み・展開

操作Windows/LinuxMac効果
すべて折り畳むCtrl + K Ctrl + 0Cmd + K Cmd + 0ファイル全体をすべて折り畳み
すべて展開Ctrl + K Ctrl + JCmd + K Cmd + Jファイル全体をすべて展開

重要: Ctrl + K Ctrl + 0 は、最初に Ctrl + K を押してから、続けて Ctrl + 0 を押す操作です。

レベル別の折り畳み操作

折り畳みレベルの指定

VS Codeでは、折り畳みの深さをレベルで指定できます：

レベルWindows/LinuxMac効果
レベル 1Ctrl + K Ctrl + 1Cmd + K Cmd + 1最上位レベルのみ表示
レベル 2Ctrl + K Ctrl + 2Cmd + K Cmd + 22階層目まで表示
レベル 3Ctrl + K Ctrl + 3Cmd + K Cmd + 33階層目まで表示
………7レベルまで指定可能

実用的なレベル指定例

JavaScript クラスでの例

class UserManager {
    constructor() { ... }        // レベル 1 で表示
    
    getUser(id) {               // レベル 1 で表示
        if (id) {               // レベル 2 で表示
            return this.users.find(user => {  // レベル 3 で表示
                return user.id === id;        // レベル 4 で表示
            });
        }
        return null;
    }
}

Ctrl + K Ctrl + 1 の結果

class UserManager { ... }

Ctrl + K Ctrl + 2 の結果

class UserManager {
    constructor() { ... }
    getUser(id) { ... }
}

マウス操作との組み合わせ

ガーター（左端）のクリック操作

エディタ左端の折り畳みアイコンをクリックして操作できます：

アイコンの種類

  • ▼ – 展開状態（クリックで折り畳み）
  • ▶ – 折り畳み状態（クリックで展開）
  • … – 折り畳まれた内容があることを示す

マウスとキーボードの併用

操作効果
折り畳みアイコンを Shift + クリック再帰的に折り畳み/展開
折り畳みアイコンを Alt + クリックそのレベルをすべて折り畳み/展開

言語別の折り畳み設定

JavaScript/TypeScript

import文の自動折り畳み

{
  "typescript.preferences.folding.imports": "min",
  "javascript.preferences.folding.imports": "min"
}

関数の折り畳み設定

{
  "[javascript]": {
    "editor.folding": true,
    "editor.foldingStrategy": "indentation"
  },
  "[typescript]": {
    "editor.folding": true,
    "editor.foldingStrategy": "auto"
  }
}

Python

クラスとメソッドの折り畳み

{
  "[python]": {
    "editor.folding": true,
    "editor.foldingStrategy": "auto",
    "python.folding.enable": true
  }
}

docstringの折り畳み

def calculate_total(items):
    """
    商品リストの合計金額を計算します。
    
    Args:
        items: 商品のリスト
    
    Returns:
        int: 合計金額
    """  # この部分が折り畳める
    total = 0
    for item in items:
        total += item.price
    return total

HTML/CSS

HTMLタグの折り畳み

{
  "[html]": {
    "editor.folding": true,
    "editor.foldingStrategy": "auto"
  }
}

CSSルールの折り畳み

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 複数のプロパティがある場合に折り畳める */
}

カスタムリージョン（region）での折り畳み

リージョンコメントの使い方

任意の範囲を折り畳み可能にするために、リージョンコメントを使用できます。

JavaScript/TypeScript

//#region ユーティリティ関数
function formatCurrency(amount) {
    return new Intl.NumberFormat('ja-JP', {
        style: 'currency',
        currency: 'JPY'
    }).format(amount);
}

function formatDate(date) {
    return new Intl.DateTimeFormat('ja-JP').format(date);
}
//#endregion

Python

#region データ処理関数
def clean_data(raw_data):
    """データをクリーニングします"""
    return [item for item in raw_data if item is not None]

def transform_data(data):
    """データを変換します"""
    return [str(item).upper() for item in data]
#endregion

HTML

<!-- #region ヘッダーコンポーネント -->
<header class="main-header">
    <nav class="navigation">
        <ul class="nav-list">
            <li><a href="/">ホーム</a></li>
            <li><a href="/about">会社概要</a></li>
        </ul>
    </nav>
</header>
<!-- #endregion -->

CSS/SCSS

/* #region レイアウト用スタイル */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.row {
    display: flex;
    flex-wrap: wrap;
}
/* #endregion */

言語別のリージョン記法

言語開始終了
JavaScript/TypeScript//#region 名前//#endregion
Python#region 名前#endregion
C#/C++#region 名前#endregion
HTML<!-- #region 名前 --><!-- #endregion -->
CSS/SCSS/* #region 名前 *//* #endregion */

高度な設定とカスタマイズ

基本的な折り畳み設定

settings.jsonでの設定

{
  "editor.folding": true,
  "editor.foldingStrategy": "auto",
  "editor.foldingHighlight": true,
  "editor.foldingImportsByDefault": false,
  "editor.foldingMaximumRegions": 5000,
  "editor.showFoldingControls": "mouseover"
}

設定項目の説明

  • folding – 折り畳み機能の有効/無効
  • foldingStrategy – 折り畳み方法（auto/indentation）
  • foldingHighlight – 折り畳み範囲のハイライト
  • foldingImportsByDefault – import文の自動折り畳み
  • foldingMaximumRegions – 最大折り畳み領域数
  • showFoldingControls – 折り畳みアイコンの表示タイミング

折り畳み表示の詳細設定

折り畳みアイコンの表示制御

{
  "editor.showFoldingControls": "always",
  "editor.foldingHighlight": true,
  "workbench.colorCustomizations": {
    "editorGutter.foldingControlForeground": "#666666"
  }
}

折り畳み方法の選択

{
  "editor.foldingStrategy": "auto",  // または "indentation"
  "[python]": {
    "editor.foldingStrategy": "indentation"
  },
  "[yaml]": {
    "editor.foldingStrategy": "indentation"
  }
}

パフォーマンス最適化

大きなファイルでの設定

{
  "editor.foldingMaximumRegions": 1000,
  "editor.largeFileOptimizations": true,
  "files.maxMemoryForLargeFilesMB": 4096
}

便利な拡張機能

Fold Plus

高度な折り畳み機能を追加する拡張機能です。

主な機能

  • カスタムパターンでの折り畳み
  • 正規表現による折り畳み範囲指定
  • 複数選択での一括折り畳み

設定例

{
  "foldplus.regexes": [
    {
      "name": "Console.log",
      "regex": "console\\.log\\(.*\\);?",
      "flags": "gi"
    },
    {
      "name": "TODO Comments",
      "regex": "//.*TODO.*$",
      "flags": "gim"
    }
  ]
}

Bracket Pair Colorizer 2

ブラケットの対応関係を色分けして、折り畳み構造を視覚的に分かりやすくします。

{
  "bracket-pair-colorizer-2.colors": [
    "#ffd700",
    "#da70d6",
    "#87ceeb"
  ],
  "bracket-pair-colorizer-2.forceUniqueOpeningColor": true
}

Better Comments

コメントを色分けして、リージョンコメントを目立たせます。

{
  "better-comments.tags": [
    {
      "tag": "#region",
      "color": "#FF8C00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": true,
      "italic": false
    }
  ]
}

実用的なワークフロー例

大規模ファイルの効率的な編集

ステップ1: 全体構造の把握

  1. Ctrl + K Ctrl + 1 でトップレベルのみ表示
  2. 目的の関数やクラスを特定
  3. 必要な部分のみ展開

ステップ2: 作業領域の最適化

// 作業中の関数以外をすべて折り畳み
class DataProcessor {
    constructor() { ... }
    
    // 現在編集中の関数
    processUserData(users) {
        // ここで作業中
        const validUsers = users.filter(user => {
            return user.email && user.age >= 18;
        });
        
        return validUsers.map(user => {
            return {
                id: user.id,
                name: user.name,
                email: user.email.toLowerCase()
            };
        });
    }
    
    saveData() { ... }
    loadData() { ... }
}

コードレビューでの活用

変更箇所の集中表示

  1. 変更のない部分を折り畳み
  2. 変更箇所のみを展開表示
  3. レビューコメントをリージョンで整理

リージョンを使った整理例

//#region 今回の変更: ユーザー認証機能
function authenticateUser(credentials) {
    // 新しい認証ロジック
    if (!credentials.email || !credentials.password) {
        throw new Error('必須項目が入力されていません');
    }
    
    // JWT検証
    const token = jwt.verify(credentials.token, process.env.JWT_SECRET);
    return token;
}
//#endregion

//#region 既存コード（変更なし）
function getUserProfile(userId) { ... }
function updateUserProfile(userId, data) { ... }
//#endregion

キーボードショートカットのカスタマイズ

独自ショートカットの設定

keybindings.jsonでの設定

[
  {
    "key": "ctrl+shift+f1",
    "command": "editor.foldAll",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+f2", 
    "command": "editor.unfoldAll",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+1",
    "command": "editor.foldLevel1",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+2",
    "command": "editor.foldLevel2", 
    "when": "editorTextFocus"
  }
]

よく使う組み合わせのマクロ化

コマンドの組み合わせ例

[
  {
    "key": "ctrl+shift+r",
    "command": "runCommands",
    "args": {
      "commands": [
        "editor.foldAll",
        "editor.foldLevel2"
      ]
    },
    "when": "editorTextFocus"
  }
]

トラブルシューティング

よくある問題と解決方法

折り畳みアイコンが表示されない

原因1: 設定が無効になっている

{
  "editor.folding": true,
  "editor.showFoldingControls": "always"
}

原因2: ファイル形式が認識されていない

  • 右下の言語モードを確認
  • 適切な拡張子で保存

期待通りに折り畳まれない

インデントベースの折り畳みを試す

{
  "editor.foldingStrategy": "indentation"
}

タブとスペースの混在確認

{
  "editor.detectIndentation": false,
  "editor.insertSpaces": true,
  "editor.tabSize": 2
}

パフォーマンスが悪い

大きなファイルでの最適化

{
  "editor.foldingMaximumRegions": 1000,
  "editor.largeFileOptimizations": true
}

まとめ

VS Codeでコードを効率的に折り畳む方法をまとめました：

よく使うショートカット

日常的によく使う操作

  • Ctrl + Shift + [ – 単一要素を折り畳み
  • Ctrl + Shift + ] – 単一要素を展開
  • Ctrl + K Ctrl + 0 – すべて折り畳み
  • Ctrl + K Ctrl + J – すべて展開

レベル指定での制御

  • Ctrl + K Ctrl + 1 – トップレベルのみ表示
  • Ctrl + K Ctrl + 2 – 2階層目まで表示

効果的な活用シーン

大規模ファイルの編集

  1. Ctrl + K Ctrl + 1 で全体構造を把握
  2. 作業箇所のみ展開
  3. 関係ない部分は折り畳みを維持

コードレビュー

  1. リージョンコメントで変更箇所を整理
  2. 変更のない部分を折り畳み
  3. レビュー対象を明確に表示

学習・理解

  1. 複雑なコードを段階的に展開
  2. 理解した部分は折り畳み
  3. 全体の流れを把握しながら詳細を確認

実用的な設定例

{
  "editor.folding": true,
  "editor.foldingStrategy": "auto",
  "editor.foldingHighlight": true,
  "editor.showFoldingControls": "mouseover",
  "editor.foldingImportsByDefault": true
}

Youtube

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

スポンサーリンク

コメント

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