JavaScriptのコメントアウト完全ガイド（// と /* */）

コメントの書き方は2種類

JavaScriptのコメントアウトには2つの書き方があります。まずは単一行コメント。// から行末までがコメントとして扱われます。

ブロックコメントは /* で始まり、次に現れる */ で終わります。行数に制限はなく、好きなだけ複数行にわたって書けます。

どちらの書き方も、JavaScriptエンジンからは完全に無視されます。コメントはあくまで人間のためのもので、自分自身、チームメンバー、そして半年後にこのコードを読み返す未来の自分に向けたメモです。

単一行コメントの書き方

普段一番よく使うのが // です。// から行末までがコメントになり、改行すればそこからは再びコードとして扱われます。

文の末尾に付けるコメントは、ちょっとしたメモ程度なら問題ありません。ただし、注釈が長くなって改行されるようなら、コードの上の行に独立させて書きましょう。末尾に長々と書かれたコメントはエディタで見切れてしまい、誰にも読まれなくなります。

複数行コメント（ブロックコメント）

/* */ 形式のコメントが活きるのは、次の2つの場面です。1行に収まらない長めのコメントを書くときと、式の途中にコメントを挟み込みたいときです。

ひとつ落とし穴があります。ブロックコメントはネストできません。外側のコメントの中にいるつもりでも、最初に現れた */ の時点でコメントが終了してしまいます。

/* 外側 /* 内側 */ まだ外側 */
// SyntaxError — 最初の */ でブロックが閉じられ、
// "まだ外側 */" は無効なコードになる。

すでに /* */ を含むコードをコメントアウトしたい場合は、代わりに各行の先頭に // を付けるのが無難です。

コードを一時的に無効化する

デバッグ中は、数行だけ一時的に無効化したいことがよくあります。そんなときは、どちらの形式のコメントでも使えます。

どのエディタにもショートカットが用意されていて、Windows/Linux なら Ctrl+/、Mac なら Cmd+/ を押すと選択した行の先頭に // が付いたり外れたりします。一度覚えてしまえば、毎日のように使うことになります。

コメントアウトしたコードはあくまで一時的なものです。// 念のため旧バージョンを残しておく みたいなコメントと一緒に、使われないコードの墓場をコミットするのはやめましょう。古いコードはバージョン管理が覚えていてくれます。思い切って消してしまいましょう。

「何を」ではなく「なぜ」をコメントに書く

これは、役に立つコメントとただのノイズを分ける唯一のルールと言ってもいいものです。コードを読めば 何をしているか はわかります。良いコメントが説明すべきなのは なぜそうしているか です。

ノイズの例:

これらのコメントは、コードを読めばわかること以外、何も伝えていません。次の例と比較してみてください。

どちらのコメントも、コードだけでは読み手が気づけないこと——外部の制約や、ドキュメント化された仕様のクセ——を補っています。これがコメントを書く基準です。削除しても誰も困らないなら、そのコメントは役目を果たしていなかったということ。

JSDoc の書き方：ツールが読めるコメント

JSDoc は、関数の仕様を構造化された形で記述するためのブロックコメントの書き方です。エディタや型チェッカーがこれを解釈して、補完候補やホバー時のドキュメント表示を賢くしてくれます。

/**(アスタリスク2つ)で始めるのがポイントで、これがあることで普通のブロックコメントではなく JSDoc として認識されます。すべての関数に JSDoc を書く必要はありません。公開 API や共有ユーティリティ、コードから型が読み取りにくい箇所など、書く価値がある場所に絞るのがおすすめです。

意識しておきたいコメントの書き方

• コメントは対象のコードのすぐそばに書く。 10行上に離して書いたコメントは、コードの変更とともにズレていきがちです。
• コードを変えたらコメントも更新する。 古くなったコメントはコメントがないより厄介で、次に読む人を積極的に誤解させてしまいます。
• コメントを増やす前に、まず名前を見直す。 const d = 86400000; にはコメントが要りますが、const MILLISECONDS_PER_DAY = 86_400_000; なら不要です。
• 一時的な課題には TODO: や FIXME: を付ける。 たいていのエディタがハイライトしてくれますし、あとから grep で探すのも簡単です。

HTMLとJavaScriptのコメントの違いに注意

HTMLファイルの中にJavaScriptを書くときは、2種類のコメント記法を混同しないようにしましょう。HTMLでは <!-- --> を使いますが、JavaScriptでは // や /* */ を使います。<script> タグの中では、JavaScript用の書き方しか通用しません。

<script>
    // 正しい — <script> 内の JS コメント
    /* これも正しい */
    <!-- 間違い — これは HTML コメントで、JS を壊します -->
    console.log("こんにちは");
</script>

ブラウザは昔の名残で <!-- --> をスクリプト内に書いても一応許容してくれますが、これはもう壊れた書き方だと割り切って、使わないようにしましょう。

次のステップ：変数を宣言してみよう

コメントの書き方がわかったところで、次は実際にコードを書いていきます。JavaScript には変数を宣言する方法が 3 つあって、let、const、var のいずれかを使います。どれを選ぶかは、コードを書くたびに最初に向き合う判断ポイントです。次のセクションで詳しく見ていきましょう。