【JavaScript】 コメントの種類と書き方

コメントアウトは、コードの一部を一時的に無効化するためにコメント化することを指します。
動作確認したいときなどによく使う手法ですね。

現状では説明などのコメントもコメントアウトと呼ぶ人が多いので、細かいことは気にしなくてよさそうです。

今回はJavaScriptのコメントの書き方について、お伝えします。

JavaScriptにはコメントアウトの書き方が4種類あります。

一行のみのコメント

// 以降、改行までコメントとして扱われます。

if( flg === true ) { // flgがTrueなら1を返す
    return 1;
}else{ // flgがFalseなら2を返す
    return 2;
}

範囲（複数行）コメント

/* と */ で囲まれた範囲がコメントとして扱われます。

if( flg /* === true */ ) {
    return 1;
}else{ 
    return 2;
}

/* から */まではソースコードの解析時に読み飛ばされるので、複数行をコメントアウトできます。

if( flg  === true  ) {
    return 1;
} /* else{ 
    return 2;
} */

複数行コメントは、次のように関数の概要を記述したり、プログラムの作成者情報・ライセンスに関する情報を記述する目的で使用することが多いですね。

/**
 * ○○する関数
 * 引数： 
 * 戻り値:
 */

/*
 * ○○○プログラム
 * Copyright (c) 2022 K-chan
 * ○○○ Licensed
 */

なお、コメントの入れ子はできません。
JavaScriptは単純にキーワードが出現するかどうかを見ているだけです。

次のコードは、緑色の文字がコメントとして解釈されます。

/* 
　/* xxxx */
コメント
*/

コメントは変数として扱われますが、定義されていないのでエラーになります。

HTMLライクコメント

現在のJavaScriptプログラマは全く気にする必要がありませんが、以前のコードとの互換性のためにHTMLライクコメントというものが存在します。

HTMLライクコメントはブラウザでの使用に限り、 // と同じように、<!-- と --> を一行コメントの開始として記述できる機能です。

<!-- コメント
const a = 1;
--> コメント
const b = 1;
--> コメント
<!-- コメント

<!-- から --> までの範囲ではないので、注意しましょう。

以前のHTML仕様は、ブラウザのJavaScriptが無効になっている場合、コードがブラウザ上に表示されていました。
そのため、HTMLのコメント機能である <!-- --> が利用されていました。

<script language="javascript">
<!--
  var x = 5;
-->
</script>

このような記述をしている古いコードにも対応させるために、現在でも使用できます。

なお、htmlのscriptタグではなく、外部スクリプトファイルでもHTMLライクコメントは使用できます。

ハッシュバンコメント

ハッシュバンコメント（Hashbang Comments）は、ファイルの先頭行のみ使用できるコメントです。
行頭から #! で開始し、行末までがコメントとして適用されます。

#! コメント ← ファイルの先頭行
#! 値をセット ← 行頭以外はエラー！

const value = 1;

このコメントはNode.jsで使用可能でした。
しかしECMAScript® 2023よりJavaScriptの仕様として採用され、現在では主要なブラウザで使用できます。

なお、あくまで外部ファイルの先頭行で使用できる点に注意が必要です。
scriptタグ内では使用できません。

次のコードは、エラーが発生します。

<script>
#! コメント

</script>

コメントは、複雑な処理を理解するためのヒントとして記述します。
そのため、見てわかるようなことを書く必要はありません。

const a = 3; // aに3をセット

上の例では、3が何を表しているのかわからない場合にコメントを入れるといいですね。

const a = 3; // 3は○○

チームで開発を行う場合、自分だけでなくチームメイトも読むことを念頭に置いてコメントを記述します。

個人的な要望を書いてはいけません。
僕は若かりし頃、『残業もういや！！』と書いて上司に怒られました。

なおチームごとに規約があると思うので、そちらに従いましょう。

趣味でプログラムしている人は、好きに書きましょう。
他人にとやかく言われることはありません。

広い範囲をコメントアウトするとき、その中にコメントアウト済みの範囲が含まれるときがあります。

範囲コメントが入れ子になった状態ですね。

/*
const a = 1;
/* const a = 2; */
console.log( a );
*/

実行すると、次のようなエラーが表示されます。

Google Chrome：
Uncaught SyntaxError: Unexpected token '*'
Firefox：
Uncaught SyntaxError: expected expression, got '*'

そうです。入れ子は、できないのです。

範囲コメントは、/* から */ までです。

JavaScriptのソース解析は、最初の /* から文字をチェックして行き、入れ子の */ までを範囲コメントと判断します。
続く console.log( a ); は正常に解析され、続いて現れる * で、「こんなところで * が出現するのはおかしい」とエラーになります。

範囲コメントは入れ子にできなということを知らないと、原因解明に意外と時間がかかるエラーだったりします。
覚えておきましょう。