format_list_bulleted
【HTML・CSS・JavaScript】コメント・コメントアウトについて解説
最終更新日時:2020-05-09 09:38:24



開発をする上でプログラムのソースコードにコメントを入れることは大事だと言われてます。では、なぜコメントは必要なのか?また、コメントについてコメントアウトって言葉も聞くけど違いは何か?という人のために、コメントが必要な理由とコメントとコメントアウトの用語の意味の違いについて説明します。また、HTML/CSS/JavaScriptのコメントを入れる方法について紹介します。

なぜコメントが必要なのか

なぜコメントが必要なのかと言いますと、コメントがあるとコードの可読性が高まり、他の人が読みやすいプログラムになるからです。これにより、チーム開発において、チーム全員のプログラムの理解が早くなり、仕事がスムーズに進みます。また、開発する際のメモにもなるので、もしエラーが起きた時、なぜエラーが起きたのかわかりやすくなります。

コメントとコメントアウトの違い

コメントとコメントアウトの違いについて説明します。まずは、コメントとコメントアウトについて説明します。

コメント

コメントとは、プログラムのソースコードに書き込まれた、プログラムに影響を与えない文や文字列のことをいいます。コメントを用いることによって、ソースコードがよりわかりやすいものになります。

コメントアウト

コメントアウトとは、特定の記号(「//」や「*/」など)を用いてソースコードをコメントに変え、プログラムを無効化する動作のことです。

コメントとコメントアウトの違い

以上で述べたようにコメントは「文や文字列」、コメントアウトは「動作」です。それぞれの用語を使い間違えないように注意しましょう。

HTMLのコメントアウト方法

HTMLファイルでコメントを入れたい場合、次のコードのように、コメントを入れたい文に「<!--」〜「-->」で囲むことでコメントアウトすることができます。

<!-- コメント文 --> 

<!--
コメント文
コメント文
コメント文
コメント文
-->

CSSのコメントアウト方法

CSSファイルでコメントアウトしたい場合、次のコードのように、コメントを入れたい文を「/*」〜「*/」で囲むことでコメントアウトすることができます。

/* コメント文 */

/* 
コメント文
コメント文
コメント文
コメント文
*/

JavaScriptのコメントアウト方法

JavaScriptのコメントアウト方法について解説します。JavaScriptにコメントアウトする場合、1行だけコメントアウトする場合と指定した範囲をコメントアウトする場合の2種類の方法があります。

では、それぞれ説明していきます。

1行だけコメントアウトする場合の書き方

1行だけコメントアウトする場合、次のコードのようにコメントを入れたい文の先頭に「//」を入れます。

// コメント文

指定した範囲にコメントアウトする場合の書き方

行の一部分や複数行などの指定した範囲でコメントアウトする場合、次のコードのようにコメントを入れたい文に「/*」〜「*/」で囲むことで指定した範囲でコメントアウトすることができます。これはCSSでコメントアウトする場合と同じ記号になります。

/*
コメント文
コメント文
*/

/* コメント文 */ console.log("コメント") /* コメント文 */

この記事のまとめ

本記事ではHTML、CSS、JavaScriptでコメントする方法について説明しました!最後に記事の要点をまとめてみましょう。

  • コメントすることはチームで開発する上で大事
  • コメントは「文・文字列」、コメントアウトは「動作」でそれぞれ意味が違う
  • HTMLのコメントアウト方法は<!--~-->を使う
  • CSSのコメントアウト方法は「/*~*/」を使う
  • JavaScriptのコメントアウト方法は「//」か「/*~*/」を使う

コメントを是非活用してみましょう!