あなたに合った学習プランは?LINE適正コース診断はこちら プログラミングが全て無料で学習可能!
【初心者向け】JavaScriptのコメントの正しい使い方とコツ - 忍者CODEマガジン

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

プログラミング言語の辞書

コメントアウトは、コードを消さずに一時的に実行を止めたいときに使う記述方法です。プログラミングでは、エラーの原因を調べたり、一部の処理だけを止めて動作を確認したりするときによく使われます。学習中はもちろん、実務でも使う機会が多いため、意味や使い方を正しく理解しておくことが大切です。

この記事では、コメントアウトとは何かをはじめ、コメントとの違い、基本的な使い方、HTML・CSS・JavaScript・Pythonでの書き方の違い、注意点やよくある質問までをわかりやすくまとめます

コメントアウトとは?

コメントアウトの概要を説明するイメージ画像

コメントアウトとは、書いたコードを削除せずに一時的に実行対象から外すための記述方法です。プログラミングでは、処理の動きを確認したいときや、不具合の原因を切り分けたいときによく使われます。

学習中はもちろん、実務でも使う機会が多いため、基本的な意味を早めに押さえておくことが大切です。

コメントアウトの意味

コメントアウトの「コメント」は注釈や補足、「アウト」は処理の対象から外すという意味です。つまり、コメントアウトとは、コードとして書かれている内容を一時的に動かない状態にすることを指します。

たとえば、ある処理を消さずに残したまま動作を止めたいとき、コメントアウトを使えば簡単に対応できます。コードを完全に削除すると元に戻す手間がかかりますが、コメントアウトであれば必要になったときにすぐ戻せます

そのため、試しに一部の処理を止めたい場面や、修正前のコードを一時的に残しておきたい場面で役立ちます。

コメントとの違い

コメントとコメントアウトは似た言葉ですが、意味は少し異なります。コメントは、コードの内容や意図を説明するための注釈です。一方でコメントアウトは、本来は動くコードを一時的に実行されないようにする使い方を指します。

  • コメント
    コード内に残す「注釈」や「説明文」そのものです。
    コード内にコメントを追加することで、その部分の目的や意図を明確にすることができます。他の開発者や自分自身が後で見返した際に、理解しやすくなります。
    例:「この変数はユーザーIDを格納します」という説明文が「コメント」です。
  • コメントアウト
    コードの一部を、コメントにすることで一時的に実行させないように無効化する「行為」です。
    デバッグの際に特定の処理をスキップさせたり、古いコードを一旦残しておきたい場合などに役立ちます。
    例:「console.log(user_id); という行を // console.log(user_id); に変更する」という行為が「コメントアウト」です。

たとえば、「この処理はログイン判定を行う」と説明を書くのはコメントです。これに対して、実際の処理コードを一時的に無効化するのがコメントアウトです。

コメントアウトが使われる場面

コメントアウトが使われる代表的な場面は、動作確認やデバッグのときです。ある処理が原因でエラーが起きているかを確認したい場合、その部分をコメントアウトして挙動が変わるかを見ることで、原因の切り分けがしやすくなります。

また、一部の機能だけを外してテストしたいときにも使われます。複数の処理が連動しているコードでは、どこが影響しているのかを確認するために、順番にコメントアウトしながら調べることがあります。

さらに、今は使わないものの、後で再利用する可能性があるコードを一時的に残しておきたいときにも便利です。

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

JavaScriptでコメントアウトを使う場面を説明するイメージ画像

コメントアウトは、コードを削除せずに一時的に実行対象から外したいときに使います。書き直しや検証をするときに便利で、プログラミング学習でも実務でもよく使われる基本操作の一つです。ここでは、コメントアウトの代表的な使い方を3つに分けて見ていきます。

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

コメントアウトの基本的な使い方は、今は動かしたくないコードを一時的に無効化することです。

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

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

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

コードを完全に消してしまうと、あとで再利用したいときに書き直しが必要になることがあります。一方で、コメントアウトなら内容をそのまま残したまま実行だけ止められるため、修正前後を比較したいときにも便利です。

一部の処理を外して動作を確認する

エラーの原因を調べたいときにも、コメントアウトは役立ちます。複数の処理が並んでいるコードでは、どの部分が不具合の原因になっているのかを一目で判断できないことがあります。そのようなときは、気になる処理を一つずつコメントアウトしながら動作を確認すると、原因の切り分けがしやすくなります。

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

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

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

コメントアウトのショートカット

コメントアウトは記号を手入力してもできますが、ショートカットを使うとより素早く操作できます。特に、動作確認やデバッグではコメントアウトと解除を何度も繰り返すことがあるため、ショートカットを覚えておくと作業効率が大きく変わります。

ここでは、WindowsとMacでよく使われる基本操作を見ていきましょう

Windowsで使えるショートカット

Windowsでは、多くのエディタやIDEで「Ctrl + /」を使ってコメントアウトの切り替えができます。対象の行にカーソルを置いた状態で使うと1行を、複数行を選択した状態で使うとまとめてコメントアウトできることが多いです。

手で「//」や「#」を入力する方法でも対応できますが、ショートカットを使えば入力ミスを防ぎやすく、複数行の処理を一時的に止めたいときもスムーズです。学習中のコード確認はもちろん、実務で一部の処理だけを外して挙動を見たい場面でも役立ちます。

ただし、使用しているエディタやキーボード配列によっては、操作が異なる場合があります。うまく動かないときは、エディタのショートカット設定を確認すると安心です。

Macで使えるショートカット

Macでは、多くのエディタやIDEで「command + /」を使ってコメントアウトの切り替えができます。Windowsと同じように、1行だけでなく、選択した複数行をまとめてコメントアウトできることが多いため、コードの比較や切り分けを効率よく進められます。

Macで開発する場合も、毎回記号を入力するよりショートカットを使ったほうが素早く、試行錯誤しながらコードを確認する作業がしやすくなります。特に、何度もコメントアウトと解除を繰り返す場面では、操作の手間を大きく減らせます。

なお、Macでもエディタの種類や設定によっては別のキー操作が割り当てられていることがあります。ショートカットが反応しない場合は、初期設定が変更されていないかを確認してみましょう。

各言語のコメントアウト

コメントアウトの役割はどの言語でも大きく変わりませんが、実際の書き方は言語ごとに異なります。そのため、JavaScriptで使っていた記号をそのままHTMLやPythonで書いても、正しく動かないことがあります。

ここでは、代表的な4つの言語・マークアップ言語におけるコメントアウトの書き方を確認します。

HTML

HTMLでは、コメントアウトしたい内容を <!-- --> で囲みます。ブラウザには表示されず、HTMLの構造やメモを一時的に残しておきたいときに使われます。

たとえば、ある見出しや画像の記述を一時的に非表示にしたい場合、その部分を <!-- --> で囲めば、削除せずに表示だけ止められます

HTMLはタグで構成されているため、コメントアウトする範囲を間違えるとレイアウトが崩れることもあります。開始位置と終了位置を正しくそろえて書くことが大切です。

HTMLでのコメントアウトの書き方をもう少し詳しく知りたい方は、以下の記事も参考にしてみてください。

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

CSS

CSSでは、/* */ を使ってコメントアウトします。スタイルの指定を一時的に無効にしたいときや、どの指定が見た目に影響しているのかを確認したいときによく使われます。

たとえば、文字色や余白の設定を一時的に外してデザインの変化を見たい場合、そのプロパティを /* */ で囲むことで無効化できます。CSSでは1行でも複数行でも同じ書き方を使うことが多く、まとまった範囲を一度に外したいときにも便利です。

ただし、閉じる記号を書き忘れると、その後のスタイルまで正しく読み込まれなくなるため注意が必要です。

CSSでのコメントアウトの書き方もあわせて整理したい方は、以下の記事も参考になります。

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

JavaScript

JavaScriptでは、1行のコメントアウトに //、複数行のコメントアウトに /* */ を使います。用途に応じて使い分けるのが基本です。

短い1行だけを一時的に止めたい場合は // が使いやすく、複数行をまとめて外したい場合は /* */ が便利です。たとえば、特定の処理だけを止めてエラーの原因を調べたいときや、ログ出力を一時的に無効にしたいときによく使われます。

JavaScriptは動作確認やデバッグの機会が多いため、コメントアウトを使う場面が特に多い言語の一つです。

Python

Pythonでは、基本的に1行のコメントアウトに # を使います。1行ごとに先頭へ # を付ける形が一般的です。

複数行をまとめて止めたい場合も、実務では各行に # を付けてコメントアウトすることがよくあります。文字列を複数行で囲む書き方が使われることもありますが、これは本来コメント専用の記法ではないため、コメントアウトとして使う方法とは分けて理解したほうが安全です。

Pythonは文法がシンプルな分、インデントの意味が大きいため、コメントアウトする位置や範囲を意識して書くことが重要です。

Pythonでのコメントアウトの書き方も確認したい方は、以下の記事もあわせてチェックしてみてください。

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

コメントアウトするときの注意点

コメントアウトするときの注意点を説明するイメージ画像

コメントアウトは便利な機能ですが、使い方を誤ると、かえってコードを読みにくくしたり、不要な不具合の原因になったりすることがあります。ここでは、コメントアウトするときに意識しておきたい注意点を紹介します。

不要なコメントアウトは残しすぎない

コメントアウトは一時的にコードを止めたいときに便利ですが、不要になったものをそのまま残し続けると、コード全体が見づらくなります。特に、すでに使わない処理や、過去の修正案を大量に残している状態では、どのコードが現在使われているのかがわかりにくくなります。

学習中は「あとで使うかもしれない」と考えて残したくなることもありますが、必要のないコメントアウトが増えるほど、確認や修正の手間も増えていきます。現在の開発に不要なものは、一定のタイミングで整理することが大切です。

コードの履歴管理ツールを使っている場合は、過去の状態をあとから確認できるため、不要なコメントアウトを無理に残しておく必要はありません

コードの意図が伝わる書き方を意識する

コメントアウトを使うときは、なぜそのコードを止めているのかがわかる状態にしておくことが重要です。単にコードだけをコメントアウトして残していると、後から見たときに「これは使わないコードなのか」「一時的に止めているだけなのか」が判断しにくくなります。

たとえば、動作確認のために一時的に外している場合は、その目的が伝わるように補足を書いておくと親切です。

自分だけでなく、他の人がコードを見る場面でも理解しやすくなります。コメントアウトはただ処理を止めるための手段ではなく、後から見ても意図が読み取れるように扱うことが大切です。

本番環境に不要なコードを残さない

開発中に使っていたコメントアウトを、本番環境にそのまま残さないことも大切です。不要なコードが多く残っていると、ファイルが読みにくくなるだけでなく、保守や改修のときに混乱の原因になります。

特に、本来は削除すべき古い処理や、テスト用に一時停止していたコードが残っていると、現在の仕様と過去の記述が混ざってしまい、誤解を招きやすくなります。実際に使っていないコードを長く残しておくと、「この処理は将来必要なのか」「削除してよいのか」が判断しづらくなるためです。

コメントアウトに関するよくある質問

コメントアウトに関するよくある質問を説明するイメージ画像

コメントアウトはプログラミングの基本操作ですが、学び始めたばかりの段階では細かな違いがわかりにくいこともあります。ここでは、コメントアウトについて特によくある質問を3つ取り上げて、初心者にもわかりやすく整理して解説します。

コメントアウトは実行される?

コメントアウトされた部分は、基本的にプログラムとして実行されません。コードの中に書かれていても、コンピュータはその部分を処理の対象として読み取らないため、動作には反映されないのが一般的です。

そのため、ある処理を一時的に止めたいときや、エラーの原因を切り分けたいときにコメントアウトが使われます。

複数行をまとめてコメントアウトできる?

複数行をまとめてコメントアウトできるかどうかは、言語によって異なります。たとえば、JavaScriptやCSSでは複数行を囲む書き方があり、まとめて無効化しやすいのが特徴です。

一方で、Pythonでは1行ずつ記号を付ける形が基本になることが多く、書き方に違いがあります。言語ごとの記法とエディタの機能をあわせて理解しておくと、作業しやすくなります

まとめ

コメントアウト解説のまとめイメージ画像

コメントアウトは、コードを削除せずに一時的に実行対象から外せる便利な機能です。動作確認やデバッグ、処理の切り分けなど、学習中から実務まで幅広い場面で使われます。

ただし、コメントとの違いや言語ごとの書き方を理解せずに使うと、かえってコードが読みにくくなることもあります。不要なコメントアウトは残しすぎず、意図が伝わる形で整理しながら使うことが大切です。基本的な使い方と注意点を押さえて、状況に応じて適切に活用しましょう。