JavaScriptのコメントアウトとは？考え方や使用方法を解説

JavaScriptのコメントアウト

JavaScriptは、HTMLとともにウェブブラウザで処理できるプログラミング言語として人気があります。JavaScriptはブラウザのエンジンで処理されるスクリプト言語で、簡単にプログラミングを始めることができます。

プログラミングを進めていくと、機能拡張のたびに小規模なコードもどんどん複雑化し、保全性の確保が重要になります。ここでは、デバッグコードの埋め込みや注釈の記述に用いるコメントアウトについて理解を深めていきましょう。

JavaScriptは、オブジェクト指向のスクリプト言語です。ウェブページにボタン操作などのインタラクティブ性を持たせることができます。非同期処理による並行処理や、マルチスレッド・プログラミングも可能です。ECMAによって標準化されており、ECMAScriptとして言語仕様が定義されています。

【参考】：ECMA: ECMA-262

オブジェクト指向言語とは？概念とプログラミング言語をわかりやすく解説！

コメントアウトとは、プログラミングで使用するソースコードにコメント機能を用いて追記することです。コメント機能で追記した内容は、プログラム処理から除外されます。一般的には注釈をソースコードに入れたり、デバッグコードをコメント化する際に行います。

次の例は、通常のJavaScriptです。デバッグ用にconsole.log()で”Hello World”を表示させています。

process.stdin.resume();
process.stdin.setEncoding('utf8');
// コメントアウトしていない状態
console.log("Hello World");

もしデバッグ用コードが不要になった場合は、コメントアウトによってコメント化することができます。書き方はシンプルでコメントアウトの前に”//”を追加し、コメント化を行うことができます。

process.stdin.resume();
process.stdin.setEncoding('utf8');
// コメントアウトした状態
// console.log("Hello World");

このコメントアウトにより、console.log()は無効化され”Hello World”は表示されなくなります。JavaScriptライブラリのjQueryでも、同様の考え方でコメントアウトが利用できます。

【参考】：jQuery

コメントアウトは、コードを無効化したりソースコードに注釈をいれたりすることを指します。JavaScriptにおいても、注釈を入れることで保全性が高まります。

後日コードを見直したり、プロジェクトメンバーでメンテナンスしたりする場合に、誰がどのような意図で変更したのかがすぐに分かるため、コードの品質を高めることができます。

統合開発環境（IDE）やエディタでは、コメントアウトを簡素化するためにショートカットキーを設定している場合があります。詳しくは利用中の編集ツールの機能を確認しましょう。

IDEとは？詳細やメリット、おすすめのIDEを紹介します！

JavaScriptのコメントアウトは、ソースコードに保存されています。したがってウェブブラウザに表示しない場合も、ソースコードを表示するとコメント内容が確認できます。そのためにソースコードの流出が気になる場合は、コードを見せないために別の手を講じる必要があります。

このソースコードの記載内容を利用者に見せたくない場合は、JavaScriptのコードを分離して、外部ファイルから読み込んだり難読化したりするなどを別途検討する必要があります。

JavaScriptのコメント機能

JavaScriptのコメント機能はいくつかあります。仕様はECMAScript言語仕様書で定義されています。最新の言語仕様書は、「ECMAScript 2023 Language Specification」です。ここからは、この最新の言語仕様書で定義されている、コメント機能を解説していきます。

【参考】：ECMAScript® 2023 Language Specification

SingleLineComment（シングルライン・コメント機能）とは、1行で記述するコメント機能です。行単位で”//”を挿入し、それ以降はコメントとして扱われます。使い方はシンプルで、次のように用います。

// この行はコメントです。
const a = 10; // この行は実行されます。実行ステートメントより右は、コメントです。
// 行単位でコメントを指定します。

MultiLineComment（マルチライン・コメント機能）とは、複数行を対象とするコメント機能です。特定の命令ブロックを囲ったり、長い説明文を追記するのに使用します。”/*”でコメントが開始され、”*/”でコメントが終了します。

/* この行はコメントです。
この行もコメントです。
　　：
この行までをコメントと解釈します。*/

Hashbangとは、UnixやLinuxのシェルスクリプトで用いる手法です。ECMAScript 2023の言語仕様書で正式に追加されました。スクリプトファイルの先頭行に、”#!”で始まる行を記述するコメント機能です。

Node.jsなど、V8を使用してサーバーサイドJavaScriptインタープリタを実行する際にパスを指定することができます。同様に処理によって任意のインタープリタを指定することもできます。クライアントJavaScriptでは、単なるコメントと解釈されます。

#!/v8のパス/v8-shell  // 先頭行のコメントです
// これ以降に実際のコードを記述します

JavaScriptの非推奨コメント機能

JavaScriptでは、互換性維持を目的とした非推奨の機能も定義しています。ECMAScriptの付随書であるAnnex Bが該当します。これらの機能は、互換性維持を目的とするレガシー機能であり、ウェブブラウザ自体に機能を盛り込みますが、JavaScriptのコードにいれることは推奨されません。

ここでは、メンテナンス知識を高めるために非推奨のコメント機能についても解説していきます。

【参考】：ECMAScript® 2023 Language Specification

HTML-like Commentは、古いバージョンのブラウザでJavaScriptを動作させるための仕様です。昔のブラウザでは、JavaScriptを解釈できないことから、コメント行として解釈を無効化する必要がありました。その古いブラウザでの動作を保証するために、この機能は引き続き提供されます。

・SingleLineHTMLOpenComment SingleLineHTMLOpenComment（シングルラインHTMLオープンコメント）は、コメントの開始を意味します。”<!--”を指定します。

・SingleLineHTMLCloseComment SingleLineHTMLCloseComment（シングルラインHTMLクローズコメント）は、コメントの終了を意味します。”-->”を指定します。

・使い方 次のように、JavaScriptのコードをSingleLineHTMLOpenCommentとSingleLineHTMLCloseCommentで挟みます。HTML-like Comment自体は、コメントとして処理され、間に記述した”const a = 10;”と”console.log("Hello World");”はJavaScriptコードとして処理されます。

<script language="javascript">
<!--
  const a = 10; 
  console.log("Hello World");
-->
</script>

古いブラウザバージョンでJavaScriptが解釈できない場合も、HTMLのコメントアウトと同等と認識されることから、コード全体がコメントアウトされ解釈から除外されます。このコメント機能は、現在非推奨ですが、互換性維持のために残されています。

JavaScriptのコメントアウトを活用して保全性を高めよう

JavaScriptは手軽に始められるスクリプト言語で、ウェブブラウザ搭載のエンジンで処理できるため、マルチプラットフォームで動作させることが簡単にできます。ソースコードが大規模化してくると、保全性を高めるためにもコメント機能が欠かせません。

デバッグコードのコメントアウトや修正箇所の注釈の追加など、メンテナンス性を高めるために積極的に活用しましょう。