VSCodeの「折りたたみ」って使ってる？

ファイルの行数が増えてくると、目的の場所を見失いやすくなります。そんなときに便利なのが VSCode の 「コードの折りたたみ／展開」 機能です。この記事では、日常的に使えるショートカット操作に絞って、覚えておくと便利な折りたたみ操作を紹介します。

ここで取り上げるショートカットは、Ctrl + K を起点とする "2ストローク操作" です。これは Ctrlキーを押しながら2つのキーを順に押すだけでOK。実際にはスムーズな1動作のように直感的に使えます。

`Ctrl` + `KL` 折りたたみ状態をトグル：最もシンプルな操作

「畳むか開くか」を意識せず、トグルで切り替えたいときに便利なのがこのショートカットです。マウスで折りたたみを行う操作と同じ動きをキーボードで再現できます。

このショートカットは、現在選択中のブロック以外をすべて折りたたんでくれるため、特定の処理だけに集中したい場面で有効です。

この操作を使えば、言語の構文やインデントに依存せずに、任意の範囲を自由に選んで折りたたむことができます。ちょっとした整理や集中作業にぴったりです。

WordPress の functions.php やフレームワークの bootstrap.php のように、クラスや関数で構造化されていないトップレベルのコードが並ぶファイルで、処理の流れをざっくり把握したいときに便利
これらのファイルは、処理フローを抽象的に書くために使われますが、その場しのぎの追記が累積し、複雑化していくケースが少なくありません

このようなときに折りたたみ操作を活用することで、構造を一時的に整理して見通しを得ることができます。

PHPやTypeScriptでは、各メソッドにPHPDocやJSDocを書くことが多いですよね？

/**
 * この関数は...
 * @param int $id
 * @return string
 */
public function getName(int $id): string {
    ...
}

このようなコメントがファイル全体に散らばっていると、構造が見づらくなりがち。そんなときは「コメントだけ」を一括で折りたたんで、見渡しをスッキリさせましょう。

よく使うショートカットとして特におすすめなのが以下の2つ。

この2つを覚えておくだけで、多くの場面をカバーできます。J, L は、キーボード上で K の左右に隣接しているため簡単に覚えることができます。

行数が長く複雑な構成のファイルは、そもそもリファクタリングの対象です。折りたたみ操作に慣れることで、複雑なファイルもある程度は「扱える」ようになりますが、そのまま放置すると、メンテナンス性や可読性は損なわれたままです。

折りたたみ操作は、整理のきっかけやリファクタ前の視界確保に有効なツールです。まずは「どこが複雑なのか」を把握するために活用し、最終的にはコード自体をシンプルにする方向へつなげていきましょう。