HTML・CSS・JavaScriptのコメントの書き方を徹底解説!初心者向けガイド

コードにコメントを追加することは、「このコードが何をするものなのか」という説明を自分自身や他の開発者に伝えるためのメモを残すうえで非常に役立ちます。コメントアウトされたコードやテキストはブラウザによって無視されるため、実際の表示には影響しません。

この記事では、HTML・CSS・JavaScriptそれぞれにおけるコメントの作成方法を、具体例とともにわかりやすく解説します!

HTMLでコメントを書く方法

1行のHTMLコメント

HTMLの1行をコメントアウトするには、コメントしたいテキストやコードをコメントタグ <!-- --> で囲みます。

コードでは次のように記述します:

<!-- ここに書いたテキストはウェブサイト上では非表示になります -->
<div class="content">
  こちらは通常のHTMLコンテンツです!
</div>

ウェブサイトを読み込むと、HTMLコメントはページ自体には表示されません:

しかし、ブラウザの開発者ツールでソースコードを検証すると、HTMLコメントのテキストはしっかり確認できます:

つまり、コメントはユーザーには見えませんが、ソースコード上には残るという点に注意が必要です。

複数行(ブロック)のHTMLコメント

複数行にわたるHTMLコメントを作成する場合も、同じコメントタグ(<!-- -->)を使用します。開始タグと終了タグの間にあれば、何行でも自由にコメントを記述できます。

複数行のHTMLコメントの例は以下の通りです:

<!-- 
  ここに書いたテキストはウェブサイト上では非表示になります!
  コメントの2行目です。
  行数は好きなだけ増やせます 😁
-->
<div class="content">
  そしてこちらが通常のHTMLコンテンツです。
</div>

ウェブサイト上ではこのように表示されます:

開発者ツール(インスペクター)では、HTMLコメント全体を確認できます:

CSSでコメントを書く方法

1行のCSSコメント

CSSで1行コメントを作成するには、コメントしたいテキストやコードを /* */ タグで囲みます。

例は以下の通りです:

/* このテキストはブラウザに無視されます! */
.description {
  font-size: 1rem;
  line-height: 1.25rem;
  color: #202020;
}

複数行(ブロック)のCSSコメント

複数行のCSSコメントを書く場合も、同じ /* */ タグを使い、コメント内容を複数行に分けて記述します。

複数行のCSSコメントは次のようになります:

/* 
  このテキストはブラウザに無視されます!
  この行もコメントとして扱われます!
  最後にもう1行、念のためコメントしておきます 😁
*/
.description {
  font-size: 1rem;
  line-height: 1.25rem;
  color: #202020;
}

JavaScriptでコメントを書く方法

1行のJavaScriptコメント

JavaScriptで1行コメントを作成するには、行の先頭にスラッシュ2つ(//)を付けます。

例は以下の通りです:

// このテキストはコメントなので無視されます!

また、コードと同じ行に1行コメントを追加することも可能です。コメントがその行の最後に置かれていれば、正しく機能します。

具体的には次のようなイメージです:

console.log('Test code here!'); // これはコンソールログのメッセージです

複数行(ブロック)のJavaScriptコメント

JavaScriptで複数行またはブロックコメントを作成する場合は、コメントテキストを /* */ タグで囲みます(CSSと同じ方法です)。

記述すると次のようになります:

/* 
  関数名: doSomeAwesomeThing()
  何か素晴らしいことをしますが、詳細は不明です!
*/

function doSomeAwesomeThing(){
  console.log('Run awesome function');
}

コメントを活用する際のポイント

• 意図を説明する: 「何をしているか」だけでなく「なぜそうしているか」を書くと、後から見返したときに理解しやすくなります。
• 更新を忘れない: コードを修正したら、関連するコメントも必ず最新の状態に保ちましょう。古いコメントは混乱のもとになります。
• 本番環境に残さない: テスト用に一時的にコメントアウトしたコードは、リリース前に削除するのがベストプラクティスです。

まとめ

HTML・CSS・JavaScriptのコードに適切なコメントを追加することで、他の人があなたのコードの意図や構造を理解しやすくなります。チーム開発ではもちろん、将来の自分へのメモとしても大きな助けになるでしょう。

また、開発中のプロジェクトでテストを行う際に、一時的にコードをコメントアウトして動作を確認する使い方もとても便利です。ただし、本番環境のコードに不要なコメントやデバッグ用のコードを残さないよう、最終確認を忘れずに行いましょう!