VS Code コメントアウト ショートカット 使い方

By /

VS Code コメントアウト ショートカット完全ガイド：使い方からカスタマイズ、応用テクニックまで徹底解説

プログラミングやマークアップ作業において、コメントアウトは非常に重要な役割を果たします。コードの意図を説明したり、一時的にコードを無効化してデバッグを行ったり、将来の修正点をメモしたりと、その用途は多岐にわたります。Visual Studio Code (VS Code) は、多くの開発者に愛用されている高機能なエディタですが、その効率性を最大限に引き出すには、ショートカットキーの活用が不可欠です。中でも、コメントアウトに関するショートカットは、日常のコーディング作業で最も頻繁に使用されるものの一つと言えるでしょう。

この記事では、VS Codeにおけるコメントアウトのショートカットに焦点を当て、その基本的な使い方から、様々な応用テクニック、カスタマイズ方法、さらには知っておくと便利な関連機能やトラブルシューティングまで、網羅的かつ詳細に解説していきます。初心者の方でも理解できるよう、具体的な操作手順や例を豊富に含め、約5000語の大ボリュームでお届けします。この記事を読み終える頃には、あなたはVS Codeでのコメントアウト操作のエキスパートになっているはずです。

さあ、VS Codeを使った効率的なコーディングの第一歩として、コメントアウトショートカットの世界を深く掘り下げていきましょう。

はじめに：なぜコメントアウトとショートカットが重要なのか？

コードを書く上で、コメントアウトは単なる補助的な要素ではありません。それは、コードの可読性を高め、保守性を向上させ、開発効率を劇的に改善するための強力なツールです。

コメントアウトが必要な主な理由は以下の通りです。

  1. コードの意図説明: 複雑なロジックや特定の設計判断について、コードだけでは伝わりにくい意図を説明するために使用します。これにより、他の開発者（あるいは未来の自分自身）がコードを理解しやすくなります。
  2. デバッグ: 問題が発生した際に、特定のコードブロックを一時的に無効化して、どこに原因があるのかを切り分けるために使用します。
  3. 一時的な無効化: 開発中の機能や未完成のコードを、一時的に実行されないようにするために使用します。
  4. TODO/FIXME: 将来的に実装が必要な機能や、後で修正すべきバグ箇所などをメモするために使用します。
  5. 学習/実験: 新しいコードを試す際に、元のコードをコメントアウトして残しておき、比較やロールバックを容易にするために使用します。

これらの作業を手動で行う（各行の先頭にコメント文字を入力したり、複数行を選択してコメント文字を挿入したり）のは、非常に手間がかかり非効率です。そこで活躍するのが、エディタが提供するコメントアウトショートカットです。ショートカットを使えば、キーボード操作だけで瞬時にコメントアウトやコメント解除を行うことができます。これにより、思考の流れを中断することなく、スムーズにコーディングを進めることが可能になります。

VS Codeは、このコメントアウト操作を非常に効率的に行えるよう、便利なショートカットを標準で提供しています。この後のセクションでは、その具体的な使い方を詳しく見ていきましょう。

VS Codeのコメントアウトショートカットの基本

VS Codeには、主に2種類のコメントアウトショートカットが用意されています。これらは、ほとんどのプログラミング言語やマークアップ言語に対応しており、言語ごとの適切なコメント書式（例えばJavaScriptなら//や/* ... */、HTMLなら<!-- ... -->など）を自動的に判断して適用してくれます。

基本となる2つのショートカットは以下の通りです。

  1. 単一行コメント (Line Comment)

    • カーソル行、または選択範囲の各行の先頭に、その言語の単一行コメントマーカーを挿入します。
    • コメント解除も同じショートカットで行えます。
    • デフォルトのキーバインド:
      • Windows/Linux: Ctrl + /
      • macOS: Cmd + /

  2. ブロックコメント (Block Comment)

    • 選択範囲全体を、その言語のブロックコメントマーカー（例: /* ... */, <!-- ... -->）で囲みます。
    • コメント解除も同じショートカットで行えます。
    • デフォルトのキーバインド:
      • Windows/Linux: Shift + Alt + A
      • macOS: Shift + Option + A

これらのショートカットは、非常に直感的で使いやすいように設計されています。次のセクションからは、それぞれのショートカットについて、より詳細な使い方や挙動を見ていきましょう。

単一行コメントのショートカット (Ctrl+/ または Cmd+/)

単一行コメントショートカットは、最も頻繁に使用されるコメント機能の一つです。カーソルがある行や選択範囲内の各行を、言語に応じた単一行コメント形式でコメントアウトします。

基本的な使い方

  • カーソルがある行をコメントアウト:

    • コメントアウトしたい行のどこかにカーソルを置きます。
    • Windows/Linux の場合は Ctrl キーを押しながら / キーを押します。
    • macOS の場合は Cmd キーを押しながら / キーを押します。
    • これで、カーソル行の先頭にその言語の単一行コメントマーカー（例: JavaScriptなら//、Pythonなら#）が挿入されます。

    javascript
    // これはコメントアウトされた行です
    let x = 10; // この行はコメントアウトされていません

    カーソルを置いた行全体がコメントアウトの対象となります。行の途中にカーソルがあっても、行頭にコメントマーカーが付きます。

  • 複数行を選択してコメントアウト:

    • コメントアウトしたい複数行をマウスやキーボードで選択します。
    • Windows/Linux の場合は Ctrl キーを押しながら / キーを押します。
    • macOS の場合は Cmd キーを押しながら / キーを押します。
    • 選択した範囲内のすべての行の先頭に、単一行コメントマーカーが挿入されます。

    “`python

    print(“Hello, world!”)

    x = 10

    y = 20

    z = x + y # この行はコメントアウトされていません
    “`

    選択範囲に部分的に含まれる行も、その行全体がコメントアウトの対象となります。例えば、3行目の途中から5行目の途中までを選択した場合、3行目、4行目、5行目のすべてがコメントアウトされます。

コメント解除の方法

コメント解除も同じショートカットキーで行います。

  • コメントアウトされた行のコメントを解除:

    • コメントアウトされた行のどこかにカーソルを置きます。
    • Windows/Linux の場合は Ctrl キーを押しながら / キーを押します。
    • macOS の場合は Cmd キーを押しながら / キーを押します。
    • 行頭のコメントマーカーが削除され、コメントが解除されます。

  • 複数行のコメントをまとめて解除:

    • コメントアウトされた複数行をマウスやキーボードで選択します。
    • Windows/Linux の場合は Ctrl キーを押しながら / キーを押します。
    • macOS の場合は Cmd キーを押しながら / キーを押します。
    • 選択した範囲内のコメントアウトされた行から、コメントマーカーが削除され、コメントが解除されます。

ポイント:

  • このショートカットは、同じ操作でコメントアウトとコメント解除を切り替えるトグル動作になっています。
  • コメントマーカーは、通常、行頭のインデント（空白やタブ）の直後に挿入されます。これにより、コードのインデント構造を崩さずにコメントアウトできます。
  • VS Codeは現在アクティブなエディタの言語モードを認識し、適切なコメントマーカーを使用します。例えば、.jsファイルなら//、.pyファイルなら#、.htmlファイルなら<!-- -->（ただし単一行コメントとしてはあまり使われない形式ですが、このショートカットは言語設定に基づきます）、.cssファイルなら/* */（これも単一行コメントとしては一般的ではないですが、ショートカットは形式を適用しようとします）などです。
  • HTMLやCSSのように単一行コメント形式を持たない言語の場合でも、VS Codeはこのショートカットに対して特定の挙動を割り当てています。HTMLでは<!-- ... -->、CSSでは/* ... */が適用されますが、これらは厳密にはブロックコメント形式であり、単一行コメントショートカットを複数行に適用すると、各行が個別に囲まれるのではなく、選択範囲全体がこれらのマーカーで囲まれるように動作することがあります（ただし、これはVS Codeの内部的な実装や設定、拡張機能によって挙動が異なる場合があります。一般的には、Ctrl+/ (Cmd+/)は「行コメント」として動作し、HTMLやCSSでは<!-- -->や/* */が行ごとに適用されるのではなく、選択範囲全体を囲むブロックコメント形式で動作することが多いです。後述のブロックコメントショートカットとの違いにも注意が必要です）。より確実にブロックコメントを行いたい場合は、専用のブロックコメントショートカットを使用することをお勧めします。

コードスタイルとの連携:

一部の言語やプロジェクトでは、コメントマーカーの後にスペースを入れるかどうか（例: // comment vs //comment）といったコーディング規約がある場合があります。VS Codeの設定 (Editor: Comments Spacing) や、Prettierなどのコードフォーマッター拡張機能を使用することで、コメントアウト時に自動的に規約通りの書式が適用されるように設定できます。

ブロックコメント（複数行コメント）のショートカット (Shift+Alt+A または Shift+Option+A)

ブロックコメントショートカットは、選択したコードブロック全体を一つのコメントブロックとして囲むために使用します。これは、特に大きなコードブロックを一時的に無効化したい場合などに便利です。

基本的な使い方

  • 選択範囲全体をブロックコメントで囲む:

    • ブロックコメントアウトしたいコード範囲をマウスやキーボードで選択します。
    • Windows/Linux の場合は Shift キーと Alt キーを同時に押しながら A キーを押します。
    • macOS の場合は Shift キーと Option キーを同時に押しながら A キーを押します。
    • 選択した範囲の開始位置の前に言語に応じたブロックコメント開始マーカー（例: /*、<!--）が、終了位置の後にブロックコメント終了マーカー（例: */、-->）が挿入されます。

    css
    body {
    font-family: sans-serif;
    }
    /*
    .container {
    width: 960px;
    margin: 0 auto;
    }
    */
    footer {
    text-align: center;
    }

    上記の例では、.containerに関するスタイルブロックがブロックコメントで囲まれています。

コメント解除の方法

ブロックコメント解除も同じショートカットキーで行います。

  • ブロックコメントされた範囲のコメントを解除:

    • ブロックコメントマーカー（開始または終了）を含む範囲、またはコメントブロック全体を選択します。
    • Windows/Linux の場合は Shift キーと Alt キーを同時に押しながら A キーを押します。
    • macOS の場合は Shift キーと Option キーを同時に押しながら A キーを押します。
    • コメントブロックを囲むマーカーが削除され、コメントが解除されます。

    注意: 単一行コメントショートカットとは異なり、ブロックコメントショートカットはカーソル位置だけでは動作しません。必ずコメントアウトまたは解除したい範囲を選択する必要があります。

ポイント:

  • このショートカットも、同じ操作でコメントアウトとコメント解除を切り替えるトグル動作になっています。
  • ブロックコメント形式は言語によって異なります。VS Codeは自動的に適切な形式（例: JavaScript/CSS/Java/PHPなどの/* ... */、HTMLの<!-- ... -->）を適用します。
  • 一部の言語（例えばPython）には、ネイティブなブロックコメント構文が存在しない場合があります。Pythonでは複数行文字列（三重引用符 ''' ... ''' または """ ... """）がブロックコメントのように使われることがありますが、これは厳密にはコメントではなく文字列リテラルです。VS Codeのブロックコメントショートカットは、このような言語ではサポートされていないか、あるいは別の挙動を示す可能性があります。多くの場合、単一行コメントを複数行に適用する方が一般的です。
  • ネストされたコメント（コメントの中にさらにコメントがある構造）は、言語によっては問題を引き起こす可能性があります（特に/* ... */形式）。VS Codeのブロックコメントショートカットは、通常、このようなネストには対応していません。ネストが必要な場合は、単一行コメントを組み合わせるなどの工夫が必要になることがあります。

言語ごとのコメントアウトの書式とショートカットの挙動

VS Codeのコメントアウトショートカットは、エディタが現在開いているファイルの言語モードに基づいて、適切なコメント書式を自動的に適用します。主要な言語におけるコメント書式と、ショートカットの挙動について見ていきましょう。

言語/ファイル拡張子 単一行コメント書式 ブロックコメント書式 Ctrl+/ (Cmd+/) の挙動 Shift+Alt+A (Shift+Option+A) の挙動 備考
JavaScript (.js) // ... /* ... */ 選択行に//を挿入/削除 選択範囲を/* ... */で囲む/解除 JSDocは/** ... */だがショートカットは/* */
TypeScript (.ts) // ... /* ... */ 選択行に//を挿入/削除 選択範囲を/* ... */で囲む/解除 TSDocも同様
Python (.py) # ... (ネイティブ形式なし) 選択行に#を挿入/削除 通常サポートされないか、単一行コメントと同様の挙動 複数行文字列(''' or """)で代替が多い
HTML (.html) (ネイティブ形式なし) <!-- ... --> 選択範囲を<!-- ... -->で囲む/解除 選択範囲を<!-- ... -->で囲む/解除 単一行ショートカットもブロック形式で動作傾向
CSS (.css) (ネイティブ形式なし) /* ... */ 選択範囲を/* ... */で囲む/解除 選択範囲を/* ... */で囲む/解除 単一行ショートカットもブロック形式で動作傾向
Java (.java) // ... /* ... */ 選択行に//を挿入/削除 選択範囲を/* ... */で囲む/解除 Javadocは/** ... */だがショートカットは/* */
C/C++ (.c, .cpp, .h) // ... /* ... */ 選択行に//を挿入/削除 選択範囲を/* ... */で囲む/解除
PHP (.php) // ... or # ... /* ... */ 選択行に//を挿入/削除 選択範囲を/* ... */で囲む/解除
Ruby (.rb) # ... =begin ... =end 選択行に#を挿入/削除 Shift+Alt+Aは通常サポートされない =begin ... =endはVS Code標準では非対応の可能性
Go (.go) // ... /* ... */ 選択行に//を挿入/削除 選択範囲を/* ... */で囲む/解除
Shell Script (.sh) # ... (ネイティブ形式なし) 選択行に#を挿入/削除 通常サポートされないか、単一行コメントと同様の挙動
Markdown (.md) <!-- ... --> <!-- ... --> 選択範囲を<!-- ... -->で囲む/解除 選択範囲を<!-- ... -->で囲む/解除 HTMLコメント形式を使用

重要なポイント:

  • 言語モード: VS Codeはファイル拡張子などから自動的に言語モードを判別します。画面右下のステータスバーに現在の言語モードが表示されています。もし正しく認識されていない場合は、そこをクリックして手動で変更できます。言語モードが正しくないと、コメントアウトショートカットも正しく機能しません。
  • HTML/CSS/Markdown: これらの言語にはネイティブな単一行コメント形式がありません。そのため、Ctrl+/ (Cmd+/) のショートカットもブロックコメント形式 (<!-- ... --> または /* ... */) を使用して、選択範囲全体を囲むように動作することが一般的です。この場合、単一行コメントショートカットとブロックコメントショートカットの挙動が似通っているように見えることがあります。
  • Python/Shell Script/Rubyなど: # を単一行コメントとして使用する言語には、標準のブロックコメント形式がないことが多いです。Shift+Alt+A (Shift+Option+A) のショートカットは、これらの言語では動作しないか、あるいは予期しない挙動を示す可能性があります。これらの言語で複数行をコメントアウトしたい場合は、複数行を選択して Ctrl+/ (Cmd+/) の単一行コメントショートカットを使用するのが最も一般的で推奨される方法です。これにより、選択した各行の先頭に # が付きます。
  • JSDoc/Javadocなど: ドキュメンテーションコメントとして使われる形式（/** ... */や/// ...など）は、通常の単一行/ブロックコメントとは異なる場合がありますが、VS Codeの標準コメントアウトショートカットは、多くの場合、通常のコメント形式（//や/* */）を適用します。ドキュメンテーションコメントを生成したい場合は、関数名などの直上で/**と入力してEnterを押すなど、言語サービスによる補助機能を利用するのが一般的です。

開発している言語のコメント書式や、VS Codeのショートカットがどのように対応しているかを理解することは、コメントアウトを効率的に行う上で非常に重要です。

詳細な使用例と応用テクニック

基本的なショートカットの使い方を理解したところで、実際のコーディング現場でどのように活用できるか、いくつかの応用例を見てみましょう。

1. デバッグ用途：特定のコードブロックを一時的に無効にする

バグの原因を特定するために、コードの一部を実行されないようにしたい、という状況は頻繁にあります。コメントアウトは、コードを削除することなく一時的に無効化するのに最適です。

例えば、以下のJavaScriptコードで、特定の条件分岐が原因かもしれないと考えたとします。

javascript
function processData(data) {
let result = [];
for (let item of data) {
// データ処理ロジック
if (item.isValid) {
result.push(transform(item));
} else {
// 不正なデータはスキップ
console.warn("Invalid item found:", item);
// TODO: エラーハンドリングを強化
}
}
return result;
}

item.isValid が常に真であると仮定してテストしたい場合、あるいは else ブロックの処理が問題を引き起こしている可能性がある場合、そのブロックをコメントアウトできます。

javascript
function processData(data) {
let result = [];
for (let item of data) {
// データ処理ロジック
if (item.isValid) {
result.push(transform(item));
} /*else {
// 不正なデータはスキップ
console.warn("Invalid item found:", item);
// TODO: エラーハンドリングを強化
}*/ // ここまでをブロックコメント
}
return result;
}

ここでは、elseブロック全体を選択し、Shift+Alt+A (または Shift+Option+A) でブロックコメントを適用しています。これで、elseブロック内のコードは実行されなくなります。デバッグが完了したら、再び同じショートカットでコメントを解除すれば元のコードに戻せます。

ブロックコメントがサポートされていない言語（Pythonなど）の場合は、単一行コメントショートカットを複数行に適用します。

python
def process_data(data):
result = []
for item in data:
# データ処理ロジック
if item.is_valid:
result.append(transform(item))
# else:
# # 不正なデータはスキップ
# print(f"Warning: Invalid item found: {item}")
# # TODO: エラーハンドリングを強化
return result

else: 行とそれに続くインデントされた行を選択し、Ctrl+/ (または Cmd+/) を押すと、選択した各行が # でコメントアウトされます。

2. コードの説明：意図や背景を記録する

将来の自分やチームメンバーのために、コードの特定のセクションがなぜそのように書かれているのか、どのような目的があるのかを説明するコメントは非常に価値があります。単一行コメントやブロックコメントを適切に使い分けましょう。

“`java
// ユーザーオブジェクトをデータベースから取得し、
// 特定の条件を満たすかチェックするメソッド
public User getUserIfEligible(int userId) {
User user = userRepository.findById(userId); // IDでユーザー検索

/*
 * ユーザーが存在し、かつアクティブな状態であるかを確認します。
 * 非アクティブなユーザーは、処理対象外とします。
 * 将来的には、追加の権限チェックもここで行う可能性があります。
 */
if (user != null && user.isActive()) {
    return user;
} else {
    // 条件を満たさない場合はnullを返す
    return null;
}

}
“`

単一行コメントは特定の行や直前のコードスニペットの簡単な説明に、ブロックコメントは関数全体やクラス、より大きなコードブロックの目的や設計思想の説明に適しています。

コメントを書く際にも、ショートカットを使えば素早くコメント行を追加したり、既存のテキストをコメント化したりできます。

3. タスク管理/TODOコメント：将来の作業を明記する

// TODO: や // FIXME: のような特定のマーカーを含むコメントは、後で対応が必要な箇所をマークするためによく使われます。VS Codeはこれらのマーカーを特別にハイライト表示する機能（または拡張機能との連携）を持っており、タスク管理に役立ちます。

typescript
function calculateTotal(items: Item[]): number {
let total = 0;
for (const item of items) {
total += item.price * item.quantity;
// FIXME: 税金の計算が抜けている。後で追加する。
}
// TODO: 割引率を適用する機能を実装する
return total;
}

コードを書きながら、思いついた修正点や後でやろうと思ったことを、すぐにショートカットを使って // TODO: や // FIXME: 形式でコメントとして追加できます。これは思考を中断せず、タスクを忘れないための非常に効果的な方法です。

多くのVS Code拡張機能（例えば Todo Tree）は、これらのコメントを抽出して一覧表示し、プロジェクト全体のTODOリストとして管理する機能を提供しています。

4. 複数箇所を同時にコメントアウト/解除：マルチカーソルとの組み合わせ

VS Codeの強力な機能の一つであるマルチカーソルとコメントアウトショートカットを組み合わせることで、離れた複数の行やコードスニペットを同時にコメントアウト/解除できます。

  • マルチカーソルの作成:

    • 最初のカーソル位置に移動します。
    • Alt キー (Windows/Linux) または Option キー (macOS) を押しながら、マウスでクリックすることで、複数の場所にカーソルを追加できます。
    • あるいは、Ctrl + Alt + Down/Up (Windows/Linux) または Cmd + Option + Down/Up (macOS) で、現在のカーソルの上下にカーソルを追加できます。
    • 同じ単語を複数選択したい場合は、単語を選択して Ctrl + D (Windows/Linux) または Cmd + D (macOS) を押すことで、ドキュメント内の次の同じ単語を選択に追加できます。

  • マルチカーソルでコメントアウト:

    • 複数の場所にカーソルがある状態で、単一行コメントショートカット Ctrl + / (または Cmd + /) を押します。
    • それぞれのカーソルがある行が個別にコメントアウトされます。

    html
    <!-- <link rel="stylesheet" href="style.css"> -->
    <script src="script.js"></script>
    <!-- <link rel="icon" href="favicon.ico"> -->

    例えば、上記のHTMLで<link>タグの両方を同時にコメントアウトしたい場合、最初の<link>タグの行にカーソルを置き、Alt (または Option) を押しながら2番目の<link>タグの行をクリックしてマルチカーソルを作成します。その後、Ctrl+/ (または Cmd+/) を押すと、両方の行が同時にコメントアウトされます。

このテクニックは、設定ファイルで特定のオプションをまとめて有効/無効にしたい場合など、複数の行に同じ変更を加えたい場合に非常に役立ちます。

5. コードのリファクタリング時の仮無効化

大規模なリファクタリングを行う際、コードの一部を書き換える前に、元のコードを一時的に残しておきたい場合があります。このとき、元のコードをコメントアウトしておけば、いつでも参照したり、問題発生時に素早く元に戻したりできます。

例えば、関数の実装方法を変更する際に、古い実装をコメントアウトして残しておきます。

“`java
// 新しい実装
public List filterActiveItems(List items) {
List activeItems = new ArrayList<>();
for (Item item : items) {
if (item.isActive()) {
activeItems.add(item);
}
}
return activeItems;
}

/
// 古い実装 (パフォーマンス問題があったため置き換え)
public List filterActiveItems_old(List items) {
// ストリームAPIを使ったが、特定のケースで遅かった
return items.stream()
.filter(Item::isActive)
.collect(Collectors.toList());
}
/
“`

このように古い実装をコメントアウトして残しておけば、新しい実装で問題が見つかった場合などに、コメントを解除して元の実装に素早く切り替えることができます。リファクタリングが成功し、古いコードが不要になったら、忘れずにコメントアウトごと削除しましょう。

6. ドキュメンテーション生成のためのコメント

JavaのJavadoc、JavaScriptのJSDoc、PythonのPyDoc、PHPのPHPDocなど、多くの言語にはドキュメンテーションコメントの標準形式があります。これらのコメントは、ツールを使ってAPIドキュメントを生成するために使用されます。

VS Codeの標準コメントアウトショートカットは、多くの場合、ドキュメンテーションコメント形式（例: /** ... */ や """ ... """）ではなく、通常のコメント形式（/* ... */ や # ...）を挿入します。しかし、VS Codeの言語サービスや拡張機能は、これらのドキュメンテーションコメントの入力を補助してくれます。

例えば、JavaScript/TypeScriptで関数やクラスの直上で/**と入力しEnterキーを押すと、引数や返り値の情報に基づいたJSDocテンプレートが自動生成されます。

javascript
/**
* 指定された2つの数値を加算します。
* @param {number} a - 加算する最初の数値。
* @param {number} b - 加算する2番目の数値。
* @returns {number} 加算結果。
*/
function add(a, b) {
return a + b;
}

この機能は直接的なコメントアウトショートカットではありませんが、効率的なコメント入力を助ける関連機能として非常に有用です。標準のコメントアウトショートカットで通常のコメントを追加し、ドキュメンテーションコメントは言語サービスの補助機能を使う、というように使い分けると良いでしょう。

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

VS Codeのデフォルトのコメントアウトショートカットは多くの人にとって使いやすいものですが、他のエディタからの移行や、特定のキーバインドに慣れている場合など、自分の好みに合わせて変更したいこともあります。VS Codeでは、ほとんどすべてのショートカットキーを自由にカスタマイズできます。

カスタマイズが必要な理由:

  • 他のエディタとの互換性: Sublime TextやAtomなど、他のエディタで慣れ親しんだキーバインドをVS Codeでも使いたい。
  • 個人的な好み: デフォルトのキーバインドが押しにくい、あるいは他の操作と競合しやすいと感じる。
  • 特定のキーボードレイアウト: 使用しているキーボードによっては、特定のキーの組み合わせが押しづらい場合がある。

キーボードショートカット設定画面へのアクセス:

VS Codeのキーボードショートカット設定画面には、以下のいずれかの方法でアクセスできます。

  1. メニューバー: ファイル (File) -> ユーザー設定 (Preferences) -> キーボード ショートカット (Keyboard Shortcuts) を選択します。
  2. コマンドパレット: Ctrl + Shift + P (Windows/Linux) または Cmd + Shift + P (macOS) でコマンドパレットを開き、「Keyboard Shortcuts」と入力して Open Keyboard Shortcuts を選択します。

コメントアウト関連コマンドの検索:

キーボードショートカット設定画面を開くと、膨大な数のコマンドとそれに対応するキーバインドが一覧表示されます。コメントアウトに関連するコマンドを見つけるには、検索ボックスに以下のキーワードを入力します。

  • comment
  • comment line (単一行コメント)
  • comment block (ブロックコメント)

検索結果には、以下の主要なコマンドが表示されるはずです。

  • editor.action.commentLine: 単一行コメントの切り替え（Ctrl+/ や Cmd+/ に割り当てられているコマンド）
  • editor.action.blockComment: ブロックコメントの切り替え（Shift+Alt+A や Shift+Option+A に割り当てられているコマンド）

キーバインドの変更方法:

  1. キーボードショートカット設定画面で、変更したいコマンド（例: editor.action.commentLine）を見つけます。
  2. その行をクリックして選択します。
  3. 行の左側に表示される鉛筆アイコン（編集）をクリックします。あるいは、行を右クリックして キーバインドの変更 (Change Keybinding) を選択します。
  4. 新しいキーバインドを入力するための小さなウィンドウが表示されます。割り当てたいショートカットキーの組み合わせを実際に押します（例: Ctrl + Shift + / と押す）。
  5. 入力が終わったらEnterキーを押して確定します。

これで、選択したコマンドに新しいショートカットキーが割り当てられます。元のショートカットキーは削除されるか、あるいは複数のショートカットが同じコマンドに割り当てられる形になります。

JSON設定ファイルの編集:

キーボードショートカット設定画面の右上にある {} アイコンをクリックすると、現在のカスタムキーバインド設定が記述された keybindings.json ファイルを直接編集できます。これは、より詳細な設定を行いたい場合に便利です。

keybindings.json ファイルには、以下のような形式でカスタマイズされたキーバインドが記述されます。

json
[
{
"key": "ctrl+shift+/", // 割り当てたい新しいショートカットキー
"command": "editor.action.commentLine", // 対象となるコマンドID
"when": "editorTextFocus && !editorReadonly" // ショートカットが有効になる条件
},
{
"key": "ctrl+alt+c", // 別の例
"command": "editor.action.blockComment",
"when": "editorTextFocus && !editorReadonly"
}
]

  • key: 割り当てたいショートカットキーを記述します。キー名はVS Codeの内部名を使用します（例: ctrl, shift, alt, cmd, /, a など）。複数のキーを組み合わせる場合は + で繋ぎます。
  • command: 割り当てたいコマンドのIDを記述します（例: editor.action.commentLine）。
  • when: このキーバインドが有効になる条件を指定します。これはコンテキストキー (Context Key) と呼ばれるもので、エディタがテキストエディタにフォーカスしているか (editorTextFocus)、読み取り専用でないか (!editorReadonly)、特定の言語モードか (editorLangId == 'javascript') など、様々な状態を指定できます。デフォルトのコメントアウトショートカットには editorTextFocus と !editorReadonly が設定されていることが多いです。特定の言語でのみショートカットを有効にしたい場合は、when句に editorLangId == '言語ID' （例: 'javascript', 'python', 'html'）を追加します。

keybindings.json を直接編集することで、より柔軟なカスタマイズが可能になります。例えば、特定の言語では単一行コメントショートカットの挙動を変える、といった高度な設定も行えます。ただし、設定ミスをするとショートカットが正常に動作しなくなる可能性があるため、注意が必要です。設定画面から編集する方が安全で簡単です。

カスタマイズ時の注意点:

  • 競合の確認: 新しいショートカットキーを割り当てる際に、すでに別のコマンドにそのキーが割り当てられていると競合が発生します。設定画面では、競合しているキーバインドが警告表示されるため、確認して必要に応じて他のキーバインドも変更または削除してください。
  • 覚えやすさ: 頻繁に使用するショートカットは、指が覚えやすいキーの組み合わせに設定することをお勧めします。
  • OS固有のキー: Cmd キーはmacOS固有です。Windows/Linuxでは Ctrl や Alt キーを使用します。カスタマイズする際も、使用しているOSに合わせたキー名を記述してください。

自分の手に馴染むようにカスタマイズすることで、VS Codeでのコーディング作業はさらに快適になるでしょう。

コメントアウトに関するVS Codeのその他の機能

コメントアウトショートカット以外にも、VS Codeにはコメントに関する便利な機能や、コメントをより効果的に活用するための機能がいくつかあります。

  1. TODO/FIXME ハイライト:
    前述の通り、コメント内に TODO: や FIXME: といった特定のキーワードを含めると、VS Codeはこれらのキーワードを自動的にハイライト表示します。これにより、コード中の後で対応が必要な箇所を見つけやすくなります。このハイライトの色は、テーマによって異なります。
    さらに、Todo Tree のような拡張機能を使えば、これらの TODO/FIXME コメントをプロジェクト全体から抽出し、サイドバーにツリー形式で一覧表示できます。これは、タスク管理やコードレビューに非常に役立ちます。

  2. コードフォーマッターとの連携:
    PrettierやESLint、Blackなどのコードフォーマッターは、コメントの周辺のスペースや改行、インデントなどを、設定されたコーディング規約に従って自動的に整形してくれます。コメントアウトしたコードの整形や、新しいコメントを追加した後の整形も、フォーマッターに任せることでコード全体のスタイルを統一できます。
    設定によっては、コメントアウトのショートカットを使った際に、自動的にコメントマーカーの後にスペースが挿入される（例: // comment）なども制御できます。VS Codeの設定 Editor: Comments Spacing も関連設定です。

  3. ミニマップでのコメント表示:
    VS Codeの右側に表示されるミニマップは、コード全体を鳥瞰するための便利な機能です。ミニマップには、コメントや文字列リテラルなどが異なる色で表示されることがあり、コメントがコード全体の中でどのくらいの割合を占めているか、どこにまとまっているかなどを視覚的に把握できます。

  4. Diffビューでのコメント:
    Gitなどのバージョン管理システムと連携している場合、VS CodeのDiffビュー（変更差分を表示する機能）で、コメントの追加や削除、変更も他のコードと同様に差分として表示されます。これにより、コメントによる変更も追跡しやすくなります。

  5. コメントブロックの折りたたみ:
    VS Codeは、大きなコードブロックだけでなく、複数行にわたるコメントブロックも折りたたむことができます。これにより、コード全体の可読性を高め、作業に集中したい部分だけを表示できます。特に長いライセンスヘッダーや、詳細な説明コメントなどは、折りたたんでおくと便利です。コメントブロックの左側に表示されるマイナス記号をクリックするか、ショートカット (Ctrl+Shift+[, Ctrl+Shift+] または Cmd+Shift+[, Cmd+Shift+]) で折りたたみ/展開できます。

  6. 拡張機能によるコメント機能の強化:
    VS Codeの豊富な拡張機能の中には、コメント関連の機能をさらに強化するものがあります。

    • Better Comments: コメント内のキーワード（! ? TODO * など）に応じて、コメントの色やスタイルを変更し、視覚的に分かりやすくします。
    • Comment Anchors: コメント内に特定のフォーマットで書かれたアンカー（例: ANCHOR: My Feature）を検出し、サイドバーに一覧表示します。TODOリストやブックマークのような使い方ができます。
    • 言語固有のドキュメンテーション生成支援ツールや、特定のコメント形式（例: Markdown形式のコメント）をサポートする拡張機能などもあります。

これらの関連機能をコメントアウトショートカットと組み合わせて活用することで、VS Codeでの開発体験はさらに効率的で快適になります。

トラブルシューティング：ショートカットが効かない、意図しない挙動をする場合

コメントアウトショートカットを使おうとしてもうまく動作しない、あるいは意図しない形式でコメントアウトされてしまう、といった問題に遭遇することがあります。ここでは、よくある原因とその解決策を見ていきましょう。

  1. ショートカットキーが認識されない:

    • 原因:
      • VS Code以外のアプリケーションが同じショートカットキーをグローバルに占有している。
      • VS Code内でキーバインドが別のコマンドに上書きされている（競合）。
      • VS CodeまたはOSのキーボードレイアウト設定が意図したものと異なる。
      • VS Codeがバックグラウンドで何か処理中（まれ）。
    • 解決策:
      • 他のアプリケーション（特に常駐ソフトやユーティリティ）を一時的に終了させてみる。
      • VS Codeのキーボードショートカット設定画面を開き、「commentLine」や「blockComment」で検索して、目的のコマンドに正しいキーバインドが割り当てられているか、競合が発生していないか確認する。競合している場合は、どちらかのキーバインドを変更または削除する。
      • OSのキーボード設定やVS Codeのキーボードレイアウト設定（Keyboard: Layout 設定）が正しくなっているか確認する。
      • VS Codeを再起動してみる。
      • 使用している拡張機能がキーバインドに影響を与えている可能性があるため、拡張機能を一時的に無効化して試してみる。

  2. コメント形式が正しくない/言語モードが違う:

    • 原因:
      • VS Codeが現在のファイルの言語モードを正しく認識していない。
      • ファイル拡張子が正しくない（例: JavaScriptファイルなのに.txtになっている）。
      • 特定の拡張機能が言語モードの判別やコメント挿入に影響を与えている。
    • 解決策:
      • VS Codeステータスバーの右下で現在の言語モードを確認し、正しくない場合はクリックして手動で変更する。
      • ファイルの拡張子が正しいか確認する。
      • 言語モードに関連する拡張機能や、コード整形、シンタックスハイライトに関する拡張機能が影響している可能性を考え、一時的に無効化して試してみる。
      • VS Codeの設定 Files: Associations で、特定の拡張子と言語モードの関連付けが誤っていないか確認する。

  3. ブロックコメントが単一行コメントのように動作する、またはその逆:

    • 原因:
      • 言語にネイティブなブロックコメント形式がない（例: Python）。この場合、VS Codeのブロックコメントショートカットは動作しないか、あるいは単一行コメントと同様の挙動（複数行に個別にコメントマーカーを付ける）を示すことがあります。
      • HTMLやCSSなど、単一行コメント形式がない言語で、単一行コメントショートカットがブロックコメント形式で動作している。これは VS Codeの仕様です。
      • キーバインドをカスタマイズした際に、意図せず単一行コメントのコマンドにブロックコメントのショートカットを割り当ててしまった、あるいはその逆。
    • 解決策:
      • 使用している言語にネイティブなブロックコメント形式があるか確認する。ない場合は、単一行コメントショートカットを複数行に適用するのが一般的な方法であることを理解する。
      • HTMLやCSSでは、単一行コメントショートカットもブロックコメント形式で動作することを理解する。
      • キーボードショートカット設定画面で、editor.action.commentLine と editor.action.blockComment に割り当てられているキーバインドが意図通りになっているか確認する。

  4. コメントアウト/解除の範囲が意図通りにならない:

    • 原因:
      • ブロックコメントショートカットを使用する際に、コメントアウト/解除したい範囲が正確に選択されていない。
      • 単一行コメントショートカットを複数行に適用する際に、選択範囲に意図しない行が含まれている。
      • マルチカーソルを使用している場合に、カーソル位置がずれている。
    • 解決策:
      • ブロックコメントを使用する際は、必ずコメントアウト/解除したいコードの開始から終了までを正確にマウスやキーボードで選択する。
      • 単一行コメントを複数行に適用する際も、選択範囲を確認する。
      • マルチカーソルを使用している場合は、すべてのカーソルが意図した位置にあるか確認する。不要なカーソルはEscapeキーで解除できる。

これらのトラブルシューティング手順を試すことで、コメントアウトショートカットに関する多くの問題を解決できるはずです。もし問題が解決しない場合は、VS Codeの公式ドキュメントを参照したり、開発者コミュニティで質問したりすることも検討してください。

コメントアウトのベストプラクティス

VS Codeのショートカットを使ってコメントアウトを効率的に行えるようになったら、次に考えるべきは「どのようなコメントを書くべきか」という質の問題です。効果的なコメントはコードの価値を高めますが、質の低いコメントはかえって混乱を招くこともあります。

以下に、コメントアウトに関するいくつかのベストプラクティスを挙げます。

  1. 「何を」ではなく「なぜ」をコメントする:
    優れたコードは、それ自体が「何を」行っているかをある程度説明できるべきです（自己説明的なコード）。したがって、コメントでコードの各行が何をしているかを逐一説明するのは冗長になりがちです。
    それよりも、「なぜ」このコードが必要なのか、なぜこのように実装したのか、どのような背景や意図があるのか、といったコードだけでは分からない情報をコメントするのがより価値があります。特定の設計上の判断、考慮したトレードオフ、回避した問題などについてコメントすると良いでしょう。

  2. コードとコメントを同期させる:
    コードを変更した際には、それに合わせてコメントも更新することを忘れないでください。コードとコメントの内容が異なっていると、コメントは役に立たないどころか、誤解を招く原因となります。古くて間違ったコメントは、ない方がましです。

  3. 冗長なコメントは避ける:
    明らかすぎるコードにコメントをつける必要はありません。例えば、i++ // iをインクリメントする のようなコメントは不要です。コメントは、コードの理解を助ける場合にのみ使用するべきです。

  4. 将来不要になる可能性のあるコメントは書かないか、一時的なものと割り切る:
    開発中の試行錯誤の過程で書いたコメントや、デバッグのために一時的に追加したコメントは、作業が完了したら忘れずに削除しましょう。長期間残るべきコメントは、コードの永続的な部分として管理する必要があります。

  5. TODO/FIXME コメントを効果的に使う:
    後で対応が必要な箇所には、必ず TODO: や FIXME: といった標準的なマーカーを付けてコメントアウトしましょう。これらのコメントは、専用のツールや拡張機能で管理し、定期的に見直す習慣をつけることが重要です。

  6. ドキュメンテーションコメントを活用する:
    APIとして公開される関数やクラスなど、他の開発者が利用する可能性のある部分には、JavadocやJSDocなどの標準的なドキュメンテーションコメント形式で詳細な説明を記述しましょう。これにより、自動生成されるドキュメントが充実し、利用者がコードを理解しやすくなります。

  7. 読みやすいコメントを書く:
    コメントもコードと同様に、簡潔で明確に、そして正確に書くことが重要です。適切な改行やインデントを使って、コメントブロック自体も読みやすく整形しましょう。VS Codeのコメントアウトショートカットは、コメントマーカーのインデントを自動で調整してくれるため、この点でも役立ちます。

VS Codeの強力なコメントアウト機能を使いこなすことは、単にコーディングを速くするだけでなく、質の高いコードを書くための基盤となります。これらのベストプラクティスを意識しながら、コメントアウトショートカットを活用していきましょう。

まとめ

この記事では、Visual Studio Codeにおけるコメントアウトのショートカットについて、その基本的な使い方から、言語ごとの挙動、応用テクニック、カスタマイズ方法、関連機能、そしてトラブルシューティングに至るまで、詳細に解説しました。

VS Codeのコメントアウトショートカットである Ctrl + / (Cmd + /) と Shift + Alt + A (Shift + Option + A) は、単一行およびブロックコメントを素早く挿入・解除するための非常に強力なツールです。これらのショートカットを使いこなすことで、コードの説明、デバッグ、一時的なコード無効化といった作業を効率的に行えます。

また、マルチカーソルとの組み合わせや、TODO/FIXMEコメントによるタスク管理、さらにはキーバインドのカスタマイズといった応用的な使い方もご紹介しました。VS Codeが提供するこれらの機能を最大限に活用することで、あなたのコーディングワークフローは劇的に改善されるでしょう。

コメントアウトは、コードを書く上で欠かせない要素です。VS Codeの便利なショートカットをマスターし、本記事で解説したベストプラクティスを実践することで、あなたはより効率的に、そしてより質の高いコードを書けるようになるはずです。

この記事が、あなたのVS Codeを使った開発生活の一助となれば幸いです。ぜひ今日から、コメントアウトショートカットを積極的に活用してみてください！

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール