VSCode Bookmarksの使い方完全ガイド｜コードに目印をつけて作業効率を3倍にする方法

プログラミング・IT

「さっき見ていたあのコード、どこだっけ…？」

大きなプロジェクトで開発していると、ファイル間を行ったり来たりして目的の場所を探すのに時間がかかりますよね。

VSCodeの「Bookmarks」拡張機能を使えば、コードの重要な場所に目印（ブックマーク）を付けて、ワンクリックで移動できます。

この記事では、Bookmarks拡張機能のインストールから実践的な使い方まで、初心者の方にもわかりやすく解説します。

スポンサーリンク

Bookmarks拡張機能とは？

Bookmarksは、コードの任意の行に「しおり」を挟むような機能を提供する拡張機能です。

本にしおりを挟んで重要なページをすぐに開けるように、コードにもブックマークを設定して瞬時にその場所へ移動できます。

主な特徴：

  • コードの任意の行にブックマークを設定可能
  • 複数ファイルにまたがるブックマーク管理
  • キーボードショートカットで素早く移動
  • ブックマークにラベル（メモ）を追加可能
  • プロジェクトを閉じても保存される

標準のVSCodeにはブックマーク機能がないため、拡張機能として導入する必要があります。

インストール方法

手順：

  1. VSCodeを起動
  2. 左側のアクティビティバーから拡張機能アイコン（四角が重なったアイコン）をクリック
  3. 検索ボックスに「Bookmarks」と入力
  4. 「Bookmarks」（作者：Alessandro Fragnani）を見つける
  5. 「インストール」ボタンをクリック

インストールが完了すると、アクティビティバーに「しおり」のようなアイコンが追加されます。これがBookmarksの専用パネルです。

基本的な使い方

ブックマークの設定と解除

ブックマークを設定する方法は3つあります。

方法1：キーボードショートカット

  • Windows/Linux：Ctrl + Alt + K
  • Mac：Cmd + Alt + K

カーソルがある行にブックマークが設定されます。もう一度同じショートカットを押すと解除されます。

方法2：右クリックメニュー

  1. ブックマークしたい行にカーソルを移動
  2. 右クリックでコンテキストメニューを開く
  3. 「Bookmarks」→「Toggle」を選択

方法3：コマンドパレット

  1. Ctrl + Shift + P（Macは Cmd + Shift + P）でコマンドパレットを開く
  2. 「Bookmarks: Toggle」と入力して実行

ブックマークが設定されると、行番号の横に青いリボンマークが表示されます。

ブックマーク間の移動

設定したブックマーク間を素早く移動できます。

次のブックマークへ移動：

  • Windows/Linux：Ctrl + Alt + L
  • Mac：Cmd + Alt + L

前のブックマークへ移動：

  • Windows/Linux：Ctrl + Alt + J
  • Mac：Cmd + Alt + J

これらのショートカットを使えば、キーボードから手を離さずにブックマーク間を移動できます。

ブックマークの一覧表示

すべてのブックマークを一覧で確認できます。

表示方法：

  1. 左側のアクティビティバーから「Bookmarks」アイコンをクリック
  2. Bookmarksエクスプローラーが開く

一覧の見方：

  • ファイルごとにグループ化されて表示
  • ブックマークされた行の内容が表示される
  • 空行の場合は行番号と列番号が表示される
  • クリックするとその場所へジャンプ

複数のファイルにブックマークがある場合でも、すべて一箇所で管理できるので便利です。

実践的な活用テクニック

ラベル（メモ）を付ける

ブックマークにラベルを付けることで、より分かりやすく管理できます。

ラベルの付け方：

  1. Bookmarksエクスプローラーを開く
  2. ラベルを付けたいブックマークを右クリック
  3. 「Edit Label」を選択
  4. 説明文を入力

活用例：

  • 「TODO: バリデーション追加」
  • 「要確認: パフォーマンス改善」
  • 「エントリーポイント」
  • 「API呼び出し処理」

ラベルを付けることで、後から見返したときに何のためのブックマークか一目で分かります。

作業再開時の活用

作業を中断する際にブックマークを活用すると、次回の作業開始がスムーズになります。

やり方：

  1. 作業を終える前に、続きの場所にブックマークを設定
  2. 「続きはここから」などのラベルを付ける
  3. 翌日、Bookmarksエクスプローラーから該当箇所へジャンプ

これで「どこまでやったっけ？」と迷うことがなくなります。

コードレビューでの活用

大きなファイルをレビューする際、気になる箇所にブックマークを付けておくと効率的です。

活用方法：

  1. レビュー中に気になる箇所へブックマーク
  2. ラベルで「要確認」「質問事項」などを記入
  3. レビュー後、ブックマークを辿りながら著者と確認

ファイルを行ったり来たりせず、スムーズにレビューできます。

複雑な処理の理解

初めて触るコードを読む際にも有効です。

活用方法：

  1. エントリーポイントにブックマーク
  2. 重要な関数や処理にブックマークを追加
  3. データの流れに沿ってブックマークを配置

コードの構造を理解しやすくなり、全体像を把握する助けになります。

コマンド一覧

Bookmarksで使える主なコマンドをまとめました。

基本操作：

  • Bookmarks: Toggle：ブックマークの設定・解除
  • Bookmarks: Toggle Labeled：ラベル付きブックマークの設定
  • Bookmarks: Jump to Next：次のブックマークへ移動
  • Bookmarks: Jump to Previous：前のブックマークへ移動

一覧表示：

  • Bookmarks: List：現在のファイルのブックマーク一覧
  • Bookmarks: List from All Files：全ファイルのブックマーク一覧

管理操作：

  • Bookmarks: Clear：現在のファイルのブックマークをすべて削除
  • Bookmarks: Clear from All Files：全ファイルのブックマークを削除

コマンドパレット（Ctrl + Shift + P）から「Bookmarks」と入力すると、すべてのコマンドが表示されます。

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

デフォルトのショートカットが使いにくい場合は、変更できます。

変更方法：

  1. Ctrl + K → Ctrl + S（Macは Cmd + K → Cmd + S）でキーボードショートカット設定を開く
  2. 検索ボックスに「bookmarks」と入力
  3. 変更したいコマンドを見つける
  4. 鉛筆アイコンをクリックして新しいキーを設定

よく使うコマンドは、覚えやすく押しやすいキーに割り当てると便利です。

Numbered Bookmarksとの違い

VSCodeには「Numbered Bookmarks」という似た拡張機能もあります。

Bookmarksの特徴：

  • 無制限にブックマークを設定可能
  • ラベルを付けられる
  • ブックマーク一覧で管理

Numbered Bookmarksの特徴：

  • 番号付きブックマーク（0〜9の10個）
  • Ctrl + 数字で直接ジャンプ可能
  • シンプルで覚えやすい

少数の重要な場所だけマークするならNumbered Bookmarks、多くの場所を管理するならBookmarksがおすすめです。

設定のカスタマイズ

Bookmarksの動作をカスタマイズできます。

settings.jsonで設定できる項目：

{
    // ブックマークの保存場所
    "bookmarks.saveBookmarksInProject": true,

    // ガターアイコンの色
    "bookmarks.gutterIconFillColor": "blue",

    // 複数カーソル対応
    "bookmarks.multicursor.toggleMode": "allLinesAtOnce"
}

主な設定項目：

  • saveBookmarksInProject：プロジェクトフォルダに保存（チーム共有可能）
  • gutterIconFillColor：ブックマークアイコンの色
  • navigateThroughAllFiles：全ファイル間の移動を有効化

設定画面で「bookmarks」と検索すると、すべての設定項目が表示されます。

トラブルシューティング

ブックマークが消えてしまう

原因：
ファイルの大幅な編集やフォーマッターの使用

対策：
設定でbookmarks.experimental.enableNewStickyEngineをtrueに設定すると、コードの変更に追従してブックマークが移動します。

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

原因：
他の拡張機能やシステムのショートカットと競合

対策：
キーボードショートカット設定で、競合していないか確認し、必要に応じて変更します。

ブックマークが多すぎて管理しづらい

対策：
定期的に不要なブックマークを削除しましょう。Bookmarks: Clearコマンドでファイル単位で削除できます。

よくある質問

Q1：ブックマークはプロジェクトを閉じても残りますか？

はい、自動的に保存されます。次回プロジェクトを開いたときにも同じブックマークが使えます。

Q2：チームでブックマークを共有できますか？

"bookmarks.saveBookmarksInProject": trueを設定すると、プロジェクトフォルダ内の.vscode/bookmarks.jsonにブックマークが保存され、Gitで共有できます。

Q3：ブックマークはいくつまで設定できますか？

制限はありません。必要なだけ設定できます。

Q4：ブックマークのアイコンの色を変更できますか？

はい、設定でbookmarks.gutterIconFillColorを変更することで、好きな色に設定できます。

実践例：実際の開発での使い方

大規模プロジェクトでの活用

プロジェクト構造：
├── src/
│   ├── components/  ← ブックマーク：「UI コンポーネント一覧」
│   ├── api/         ← ブックマーク：「API エンドポイント定義」
│   ├── utils/       ← ブックマーク：「共通関数」
│   └── config/      ← ブックマーク：「設定ファイル」

プロジェクトの主要な場所にブックマークを設定しておくと、新しいメンバーの理解も助けになります。

バグ修正時の活用

  1. バグが発生している箇所にブックマーク（ラベル：「バグ発生場所」）
  2. 関連する処理にもブックマークを設定
  3. 修正後、ブックマークを辿って動作確認
  4. 確認完了後、ブックマークを削除

このフローで、バグ修正が系統立てて行えます。

まとめ

VSCodeのBookmarks拡張機能は、コード内の重要な場所に素早くアクセスできる便利なツールです。

覚えておきたい基本操作：

  • Ctrl + Alt + K：ブックマークの設定・解除
  • Ctrl + Alt + L：次のブックマークへ移動
  • Ctrl + Alt + J：前のブックマークへ移動
  • Bookmarksパネル：一覧表示と管理

活用シーン：

  1. 作業の中断・再開時
  2. コードレビュー
  3. 複雑なコードの理解
  4. バグ修正作業
  5. チーム内の情報共有

大規模なプロジェクトやファイル間を頻繁に移動する作業では、特に効果を発揮します。

ブックマーク機能を使いこなして、コーディングの効率を大幅にアップさせましょう。最初は基本的な設定と移動だけでも十分効果がありますよ。

Youtube

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

スポンサーリンク

コメント

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