VSCodeの「折りたたみ」って使ってる？
ファイルの行数が増えてくると、目的の場所を見失いやすくなります。そんなときに便利なのが VSCode の 「コードの折りたたみ／展開」 機能です。この記事では、日常的に使えるショートカット操作に絞って、覚えておくと便利な折りたたみ操作を紹介します。
ここで取り上げるショートカットは、Ctrl + K を起点とする "2ストローク操作" です。これは Ctrlキーを押しながら2つのキーを順に押すだけでOK。実際にはスムーズな1動作のように直感的に使えます。
Ctrl + KL 折りたたみ状態をトグル：最もシンプルな操作
「畳むか開くか」を意識せず、トグルで切り替えたいときに便利なのがこのショートカットです。マウスで折りたたみを行う操作と同じ動きをキーボードで再現できます。
操作：
-
Ctrl + KL折りたたみ／展開をトグル -
Ctrl + KJすべて展開（元に戻す）
Ctrl + K- 今見ている場所以外をすべて折りたたむ
- 今作業している関数・クラスに集中したいとき
- その他のコードを一時的に視界から除外し、 Zen モードのように集中した編集状態を作る
操作：
-
Ctrl + K-選択したブロック以外をすべて折りたたむ -
Ctrl + KJすべて展開（元に戻す）
このショートカットは、現在選択中のブロック以外をすべて折りたたんでくれるため、特定の処理だけに集中したい場面で有効です。
Ctrl + K, 任意の範囲を手動で折りたたむ（おすすめ！）
- コード構造に関係なく、自分が「ここを折りたたみたい」と思った範囲を自由に指定できる
- 画面共有でコードレビューを受ける時など、不要な部分を隠してあげるとレビュアーに説明しやすい
操作：
-
Ctrl + K,選択範囲から折りたたみ範囲を作成する -
Ctrl + KJすべて展開（元に戻す）
この操作を使えば、言語の構文やインデントに依存せずに、任意の範囲を自由に選んで折りたたむことができます。ちょっとした整理や集中作業にぴったりです。
Ctrl + K0 全体の流れを残して折りたたむ
- WordPress の
functions.phpやフレームワークのbootstrap.phpのように、クラスや関数で構造化されていないトップレベルのコードが並ぶファイルで、処理の流れをざっくり把握したいときに便利 - これらのファイルは、処理フローを抽象的に書くために使われますが、その場しのぎの追記が累積し、複雑化していくケースが少なくありません
このようなときに折りたたみ操作を活用することで、構造を一時的に整理して見通しを得ることができます。
操作：
-
Ctrl + K0すべて折りたたむ -
Ctrl + KJすべて展開（元に戻す）
Ctrl + K/ 複数行コメントを折りたたんで、コードを見渡しやすくする
PHPやTypeScriptでは、各メソッドにPHPDocやJSDocを書くことが多いですよね？
/**
* この関数は...
* @param int $id
* @return string
*/
public function getName(int $id): string {
...
}
このようなコメントがファイル全体に散らばっていると、構造が見づらくなりがち。そんなときは「コメントだけ」を一括で折りたたんで、見渡しをスッキリさせましょう。
操作：
-
Ctrl + K/すべての複数行コメントを折りたたむ -
Ctrl + KL一部のコメントだけ展開 -
Ctrl + KJすべて展開（元に戻す）
📌 おすすめの覚え方
よく使うショートカットとして特におすすめなのが以下の2つ。
-
Ctrl + KL（折りたたみ／展開をトグル） -
Ctrl + KJ（すべて展開）
この2つを覚えておくだけで、多くの場面をカバーできます。J, L は、キーボード上で K の左右に隣接しているため簡単に覚えることができます。
💡 最後に：折りたたみ操作とリファクタリングの関係
行数が長く複雑な構成のファイルは、そもそもリファクタリングの対象です。折りたたみ操作に慣れることで、複雑なファイルもある程度は「扱える」ようになりますが、そのまま放置すると、メンテナンス性や可読性は損なわれたままです。
折りたたみ操作は、整理のきっかけやリファクタ前の視界確保に有効なツールです。まずは「どこが複雑なのか」を把握するために活用し、最終的にはコード自体をシンプルにする方向へつなげていきましょう。