VSCodeから始まるWebデザイナー、Webエンジニア生活

■第11話：VSCodeで一括コメントアウト

（最終更新日：2023.07.20）

「一括で簡単にコメントアウトできる！」

VSCodeには便利なショートカット機能が標準で実装されている。一括コメントアウトは、その便利なショートカット機能の一つである。 ショートカット機能を駆使することで、コーディングやデバッグをより効率的に行えるようなり、作業時間を大幅に短縮することができる。

今回の内容では、各種プログラミング言語のコメントアウトの方法を説明するとともに、VSCodeの一括コメントアウトの方法を説明する。 プログラミング言語には各々固有のコメントアウトの記法があり、それらを理解することはコードの可読性やメンテナンス性を保つ上で重要だ。 そして、VSCodeの一括コメントアウト機能は、これらの言語ごとの記法を自動で適用し、選択範囲のコード行を効率よくコメントアウトできる。 今回の手法を身に着けることにより、コードの編集と管理が一段とスムーズになり、より効果的な開発作業が可能になるはずだ。

１. 各種プログラミング言語のコメントアウト

最初に、各種プログラミング言語のコメントアウトを簡単にまとめる。 Web系の開発でよく使うもので、HTML、CSS、JavaScript(TypeScript)、PHP、Python、Rubyを記す。 HTMLとCSSを除き、1行コメント及びブロック（複数行）コメントの両方が用意されている。 記憶する必要はないが、違いを軽く頭に入れておこう。

言語	1行コメント	ブロックコメント
HTML	なし	<!--　-->
CSS	なし	/*　*/
JavaScript	//	/*　*/
PHP	# または //	/*　*/
Python	#	"""　""" または '''　'''
Ruby	#	=begin　=end

２. VSCodeにおける一括コメントアウト

VSCodeには、選択範囲の行を一括でコメントアウトするという強力なショートカットが存在する。 それが「CTRL」+「/」（Macは「Command」+「/」）だ。 このショートカットでは、使用しているプログラミング言語を自動的に識別し、それに対応したコメントアウトを行う。

下記の動画では、コメントアウトを実際に使った例を見ることができる。 選択した範囲に対してコメントアウトが適用されている様子を確認できる。

ここではJavaScriptを用いているが、他の言語についても同様に、言語に合わせたコメントアウトが行われる。 また、コメントアウトを解除するには、対象となる範囲を選択し、同じショートカット（「CTRL」+「/」）を入力すればできる。 簡単にコメントアウトができることが理解できただろう。

３. VSCodeによるブロックコメント（複数行コメントアウト）

ブロックコメント、つまり複数行まとめてコメントアウトしたい場合には、別のショートカットを使用する。 それは、「Shift+Alt+a」（Macでは「Shift+Option+a」）という操作で利用できる。 このショートカットを使用した場合も、使用中のプログラミング言語に応じた適切なコメントを自動で適用してくれる。

コメントを解除する際も、同じ「Shift+Alt+a」（Macでは「Shift+Option+a」）のショートカットを使用する。 選択した範囲のコメントが解除される。このショートカットキーにより、複数行のコメントの追加や削除が非常に容易になる。

４. まとめ

今回、VSCodeのショートカット機能の一つである「一括コメントアウト」について説明した。 今回紹介したショートカットを用いれば、言語の違いも認識したうえで、自動でコメントアウトしてくれる。 コメントアウトを取り消す場合も同じショートカットで行える。覚えてしまえば非常に便利である。 プロのWebデザイナー、エンジニアを目指すのであれば、早い段階で身に着けておいて損はない。

▼キーワード

VS Code、一括コメントアウト、ブロックコメント、ショートカット