【初心者向け】JavaScriptのコメントの正しい使い方とコツ

JavaScriptにおけるコメントの正しい使い方

「コメント」と「コメントアウト」の違いとは？

プログラミングを学ぶ際、「コメント」と「コメントアウト」という2つの言葉が出てきます。これらは密接に関連していますが、意味が少し異なります。

この記事では、主にJavaScriptで「コメント」を記述する方法と、それを利用して「コメントアウト」を行う具体的なテクニックを解説します。

JavaScriptのコメントには、２種類の書き方があります。

コメントは、プログラムの可読性や保守性を向上させるための重要な手法です。適切にコメントを活用することで、自分や他の開発者がコードを理解しやすくなり、効果的なプログラミング作業が行えます。

一行コメント

一行コメントは、単一の行に対してコメントを追加する方法です。
JavaScriptでは、一行コメントには「//」を使用します。コメント記号「//」を行の先頭に追加することで、その記号が書かれた場所から行の終わりまでがすべて「コメント」になります
一行だけの短い注釈や、特定のコード行を素早く無効化（コメントアウト）したい場合に便利です。

サンプル例

// この行はコメントなので、実行されません。
let message = "こんにちは"; // 変数に挨拶を代入します。
// console.log(message); ← このように一時的に実行を止めたい行をコメントアウトします。

多くのコードエディタでは、「Ctrl + / 」(Windows) や 「Cmd + /」 (Mac) のショートカットキーで簡単に行をコメントアウトできます。

複数行コメント

複数行コメントは、複数の行や範囲にわたるコメントを追加する方法です。
JavaScriptでは、複数行コメントには「/*」と「*/」を使用します。コメント記号「/*」と「*/」で囲むと、その間の複数行すべてをまとめて「コメント」にすることができます。
長い説明文を書いたり、複数のコードブロックを一度にコメントアウトしたりする場合に役立ちます。

サンプル例

/*
以下のブロックは、ユーザー情報を設定するサンプルコードです。
現在は使用しないため、全体をコメントアウトしています。

 let user = {
name: "忍者コード",
level: 99
};
console.log(user.name);
*/

console.log("複数行コメントのテスト");

JavaScriptでのコメントアウトの活用方法

コメントの書き方を応用することで、開発作業を効率化できます。

コードの一時的な無効化

これが「コメントアウト」という行為の最も代表的な使い方です。機能のテスト中やデバック中に、特定の処理を一時的にスキップさせたい場合に非常に役立ちます。

例えば、以下のようなコードがあったとします。

var name = "John";
// var age = 30;
console.log(name);

上記の例では、var age = 30;がコメントアウトされています。そのため、実行時にはage変数は定義されず、コンソールにはnameの値が表示されます。

デバッグ情報の追加

開発中に、変数の内容を確認するためのconsole.logなどをコードに埋め込むことがあります。これらのデバック用コードは、不要になったらコメントアウトしておくことで、後から「こういう確認をした」という履歴として残しつつ、普段は実行されないようにできます。

var x = 5;
var y = 10;
// console.log(x + y);

上記の例では、console.log(x + y);がコメントアウトされています。デバッグの際には、この行をコメント解除して実行することで、xとyの値の合計を確認することができます。

デバッグ：コンピュータプログラムに潜む欠陥を探し出して取り除くこと。
引用：IT用語辞典 e-Words

コードの説明やドキュメンテーション

コメント構文の最も重要で本来的な使い方が、コードに対する説明（ドキュメンテーション）を記述することです。これは「コメントアウト」ではなく、純粋な「コメント」の活用法です。

コードが「何をしているか（What）」だけでなく、「なぜこうしたのか（Why）」を書き残すことで、未来の自分やほかのチームメンバーがコードを修正・再利用する際の大きな助けとなります。

// ユーザーの名前を格納する変数
var username = "John";

// ユーザー名の表示
console.log("Welcome, " + username + "!");

// コメントアウトされたコード
// console.log("This line is commented out.");

コメントは、JavaScriptコードをより理解しやすくし、開発の効率化にも役立つ重要なツールです。適切に活用して、自分自身や他の開発者とのコミュニケーションを円滑にしましょう。

JavaScriptでのコメントに関する注意点

コメントは便利ですが、使い方を誤ると逆にコードを読みにくくしてしまうこともあります。

過剰なコメントアウトの避け方

過剰にコメントアウトされたコード（＝実行されないコード）が残っている状態は、コードの可読性やメンテナンス性に悪影響を与えます。コード全体の理解が難しくなるため、次の点に留意することが重要です。

コメントの書き方と可読性への影響

読みやすいコメントはコードの可読性を高めますが、不適切なコメントは逆効果になることもあります。以下の点に留意することで、コードの品質を高めることができます。

挫折することなくJavaScriptを習得するなら

独学？スクール？

これからJavaScriptなどプログラミング言語の学習を始めようと考えている方、または最近学習を始めた方がいらっしゃるかと思います。

ただ、実際学習を始めるとなると

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり

関連記事：「未経験からJavaScriptをマスターするには」

まとめ

今回は、JavaScriptにおけるコメントの書き方と、それを使ったコメントアウトの活用法について解説しました。

• 最重要：コメントは「注釈」、コメントアウトは「行為」
  この2つは目的が違います。正しく使い分けましょう。
• 構文：一行は//、複数行は/* */を使う
  用途に応じて2種類の書き方を使い分けます。
• コメントの役割：コードの「なぜ」を説明する
  コードだけでは伝わらない糸や背景を記述し、可読性を高めるのがコメントの主な役割です。
• コメントアウトの役割：コードを一時的に無効化する
  デバックや機能テストの際に、コードを一時的に実行対象から外すために使います。
• 注意点：不要なコードはコメントアウトで残さない
  バージョン管理システムを使い、古くなったコードは積極的に削除して、クリーンな状態を保ちましょう。

＼満足度90%以上！／

プログラミングスクール忍者CODE
無料相談はこちら>