HTMLコードを無効にする方法｜コメントアウトの使い方や注意点を解説

HTMLコードを書いている時に「あれ？これどこの部分のコードだっけ？」と思ったことはありませんか？

とはいえ、コードとは別に「このclassは○○が書いてあるメイン部分のコード」というメモ書きをわざわざ作成するのは面倒ですよね？

そこで今回は、HTMLコードを無効にしてメモとして記述できるコメントアウトの使い方を解説します！

この記事を読んでわかる内容は以下の通りです。

コメントアウトは、後からHTMLコードを修正しやすいメモ書きを残せるので、チームでコードを書いている場合は欠かせない機能です。

プログラミング関係の仕事をしている方や、これからコーダーやエンジニアになりたい方は、必須の技術になるので覚えておきましょう！

HTMLコードを無効にする方法｜コメントアウトの使い方や注意点を解説

ブラウザ上に反映させたくないHTMLコードはコメントアウト

コメントアウトとは、記述したHTMLコードを無効にし、メモ書きとして残して置ける機能のことです。

例えば、以下のように使用します。

<!-- コメントアウト -->

上記のみのHTMLコードを記述した場合、ブラウザ上には何も反映されません。

しかし、ブラウザの「検証」などのツールからHTMLコードとして確認することはできます。

「<!--」と「-->」（コメントタグ）の中に記述すれば、1行でも複数行でもコメントアウトすることが可能です。

ちなみに、CSSでコメントアウトさせたい時は、以下のように記述します。

/* コメントアウト */

使用する記号が異なりますが、JavaScriptやjQueryでもコメントアウトできます。

どんな時にコメントアウトを使用するか？

コメントアウトは、主に以下のように使用します。

<!-- ヘッダー部分 -->
  <header>
    header部分のコードを記述
  </header>

ブラウザ上に反映されるどこの部分の実装コードなのかを記述することで、後から見ても何のコードなのかがすぐにわかるようになります。

個人でコードを記述している方は「後から自分が作業しやすいようにするメモ」として、チームで作業している方は「チームでコードの情報を共有するためのメモ」として使用するケースが多いです。

また、Webサイトの制作途中などで以下のように使用することも可能です。

<h1>タイトル</h1>
<!-- <p>ここにキャッチコピーを書く</p> -->

<h2>見出し1</h2>
<p>これは文章です。これは文章です。これは文章です。</p>

どの部分にどのような内容を記述するのか、または実装するのかをコメントアウトしてメモしておくことで、後から作業しやすくなります。

コメントアウトのメリット

上記でも述べているように、コメントアウトは個人でもチームでも必要不可欠な機能になります。

具体的には、以下5つのメリットが挙げられます。

保守とは、プログラムの動作に不具合がないか確認する作業のことで、定期的に更新・確認作業が必要になります。

コメントアウトにより作業効率が向上したことで、チームや個人に余裕ができ、よりスムーズに保守性を高めることができるのです。

また、プログラムが膨大になると、どのコードが何の目的で書かれたものなのかが不明確になりがちですが、コメントアウトを有効活用すれば、いつでも明確な説明を確認することが可能になります。

コードの再利用とは、一度書いたコードを削除する時にコメントアウトとしておくことで、再びそのコードが必要になった時にすぐに再表示することができるということです。

コメントアウトを使う時の注意点

個人においても、チーム開発においても欠かせないコメントアウト機能ですが、使用する時には注意点が3つあります。

では、それぞれについて詳しく見ていきましょう。

コメントタグを入れ子にするのはNG

「入れ子」とは、コメントタグの中にさらにコメントタグを入れるということです。

<h1>タイトル</h1>
    <!-- <p>ここにキャッチコピーを書く</p>
    <!-- <p>ここに商品の説明を記載します</p> --> -->

▼ブラウザ表示▼

上記のように、一部のコメントタグが表示されてしまっています。

コメントタグは「<!--」と「-->」の間にコメントを記述できるタグなので、中に入れたコメントタグの「-->」が終了宣言とみなされ、そこでコメントが終わってしまう場合があります。

コメントが多くなる場合は、1行ずつ分けるか、複数行内で改行するなどして処理しましょう。

<h1>タイトル</h1>
    <!-- <p>ここにキャッチコピーを書く</p> -->
    <!-- <p>ここに商品の説明を記載します</p> -->

    <h1>タイトル</h1>
    <!-- <p>ここにキャッチコピーを書く</p>
    <p>ここに商品の説明を記載します</p> -->

ソースコード自体は確認できてしまう

ブラウザ上では非表示になるコメントアウト機能ですが、ソースコードとしては外部からも確認できてしまうので注意しましょう！

Googleでは「検証」ツールを使用して、ソースコードを確認することができますが、コメントアウトしたコードもそこで表示されてしまいます。

社外秘や、他人に見せたくないコメントや個人情報などはコメントアウトでも記載しないようにしてください。

-（ハイフン）を連続で使用しない

「-(ハイフン）」は、コメントタグでも使用しているので、コメントタグ内で使用しないのがおすすめです。

特に、「-（ハイフン）」を連続して使用すると、コメントの終了宣言とみなしてしまうブラウザもあります。

コメントタグ内で間を区切りたい時などは、スペースや改行を設ける、「=====」などハイフン以外の記号を使用するなどして対処しましょう。

HTMLコードをコメントアウトしてブラウザ表示を無効に

今回は、HTMLコードを無効にし、メモ書きを残せるコメントアウトの使い方や注意点を解説しました。

以下はこの記事のまとめです。

コメントアウト機能は、コードを書いている上で必ず必要と言っても過言ではありません。

個人情報や重要な情報はコメントアウトでも記載せず、外部に見せても良い実装に関する情報を上手にコメントアウトして、作業効率をアップさせましょう！