HTMLの勉強をしていると、意外と忘れられてしまいがちですが、コメントアウトの方法についてキチンと理解していますか？

WEBスクールや学習ツールなどでも、コメントアウトの仕方については簡単には触れられていると思いますが、使い方を間違えると、意図せず画面に表示されてしまったりするので気をつけなくてはいけない場合もあります。

今回は、HTMLのコメントアウトの仕方、注意点、CSSやJavascript、phpのコメントアウトの仕方について、キチンと解説していきたいと思います。

HTMLコメントアウトの仕方

ここでは簡単に、HTMLのコメントアウトについておさらいしておきましょう。

コメントを入力したい箇所に、<!-- と --> を入れて、その間にコメントを入力します。

<!-- ここにコメントが入ります。 -->
<header>
  <h1>タイトルタイトル</h1>
</header>

上記、1行目のようにコメントを記述することができます。

こうすることで、ソースコードを見やすくしたり、コーディングの意図を他の人に伝えることができます。

また、テストコードをコメント化しておいて、都度コメント解除してテストすることもできたり、修正前に戻すこともできます。

HTMLコメントアウトの注意点

HTMLコードをコメントアウトする際に、注意しなくてはいけないのは、「指定の仕方を間違えると、ブラウザに余計な文字が表示されてしまう」ということです。

<!--
<!-- ここにコメントが入ります。 -->
<header>
  <h1>タイトルタイトル</h1>
</header>
-->

上記のように、コメントも含めた全体をコメントアウトしようとすると（入れ子構造）、1行目から2行目までがコメントとして認識され、3〜6行目はブラウザに表示されてしまいます。

CSSコメントアウトの仕方・注意点

CSSは、JavascriptやC言語のような記述方法に近いものになっています。

/* ここにコメントが入ります。 */
header {
  font-size: 24px; /* フォントサイズを変更します */
}

// この場合はコメントになりません

上記のように、/* と */ で囲んでコメントを記述します。

後述しますが、Javascriptやphpのように、// を使ってコメントにすることはできません。

Javascript・phpコメントアウトの仕方・注意点

Javascript、phpともに、/* と */ で囲むことで複数行をコメントとして記述することができます。

また、// を使って1行のみ（行末）コメント化することもできます。

functionで指定した関数についての説明やこの行はどういう操作なのかを説明する場合に効果的に使うことができますね。

/* なにかしらをする関数
ここではなにかしらの動作をします。 */
function hogehoge() {
  var dx = 0; // 変数dxをゼロクリアします
  console.log(dx); // dxの内容をコンソールに表示します
}

複数行と1行のコメントで使い分けできますね。

<?php
/* なにかしらをする処理
ここでなにかしらの動作をします */
$dy = "こんにちは！";
echo $dy; // dyの内容を表示します
?>

Javascriptとphpについては、使い方が一緒なのでまとめて覚えてしまいましょう！！

/*
var dn = "おはよう"; /* 変数dnに"おはよう"を代入 */
*/

HTMLのコメントと同様、Javascriptやphpの複数行コメントについても入れ子構造にすることはできません。

HTMLとJavascript・php混在でコメントを入れる場合

HTMLファイル、phpファイルでは、HTML構文とphp構文（Javascript構文）が混在することがあります。

そのため、ついうっかりコメントの付け方を間違ってしまいがちです。

キチンとコメントの仕方を理解しておけば、ブラウザ上に誤って不要なコードを表示させてしまうということを回避することもできます。

<script>
<!--
  var dd = 0;
  console.log(dd);
-->
</script>

Javascript内では、<!-- と --> については、コメントとして扱われず無視されますが、HTMLとしてはコメントとして認識されます。

それを利用して、Javascriptのコードが誤ってブラウザ上に表示されることを防ぐという使い方ができます。

ただし、キチンと間違いなく記述できていればこんなことをしなくても誤って表示されるということはありません。

また、意図的にphpのコメントを利用して、HTMLのコードを隠してしまうこともできます。

<?php /*
<header>
  <h1>見出し見出し見出し</h1>
</header>
*/ ?>

上記のように記述することでブラウザに表示した際、デベロッパーツール上でもコメントアウトしたコードが表示されなくなるので、ソースコードを隠蔽したい時に利用できます。

まとめ

HTML、CSS、Javascript、php、それぞれのコメントの記述方法と注意点についてご紹介しました。

よく使われる例法や特殊な使い方についても併せてご紹介してみました。

コメントは使いすぎると逆にソースコードが見づらくなってしまうので、気をつけなくてはいけませんが、適度に使うことで見やすくし、開発意図を他の開発者へ的確に伝えることが可能になります。

ぜひコメントを使いこなして、スマートなコーディングを目指していきましょう！！