HTMLコードを「もっと分かりやすく」する魔法：コメントとコメントアウト
Webページ制作の現場で、こんな経験はありませんか？
- 「このHTML、何のために書いたんだっけ…？」
- 「一時的にこの部分を非表示にしたいけど、消すのは怖いな…」
そんな時、あなたのコードを救うのが、「コメント」と「コメントアウト」です。これらは似ているようで、実は異なる役割を持っています。この記事では、HTMLにおけるこれら二つの機能の正しい使い方を、実践的な視点から徹底解説します。
HTMLにおける「コメント」と「コメントアウト」の基本
HTMLの「コメント」とは？：コードに「注釈」を残す
「コメント」とは、HTMLコードの中に書き残す「注釈」や「説明文」そのものです。ブラウザには一切表示されず、コードの実行にも影響を与えません。主に以下の目的で利用されます。
-
- コードの意図を明確にする
なぜこの要素を使ったのか、このセクションの目的は何か、といった「なぜ（Why）」を説明します。 - 複雑な構造の目印
複数の要素が入れ子になった複雑な部分の開始や終了を示すことで、コードの全体像を把握しやすくします。 - 未来の自分やチームへのメッセージ
後からコードを見返す際や、ほかの開発者がコードを理解する際の助けとなります。
- コードの意図を明確にする
HTMLのコメントの基本的な書き方
HTMLのコメントは、<!-->で始まり、-->で終わります。この記号で囲まれた部分がすべて、コメントとして扱われます。
<!-- これはHTMLのコメントです。ブラウザには表示されません。 -->
<p>この文章はブラウザに表示されます。</p>
<!--
複数行にわたるコメントも、
このように書くことができます。
-->多くのコードエディタでは、「Ctrl+/」（Windows）や「Cmd+/」（Mac）のショートカットキーで簡単に行や選択範囲をコメントアウトできます。
HTMLの「コメントアウト」とは？：コードを「一時的に無効化」する行為
「コメントアウト」とは、既存のHTMLコードを「コメント」にすることで、一時的にブラウザで表示されないようにする「行為」を指します。
これはデバックや機能の切り替えに非常に役立ちます。
HTMLのコメントアウトの主な活用シーン
- デバック
特定のコードブロックが原因でレイアウトが崩れたり、予期せぬ動作をしたりする場合、その部分をコメントアウトして問題の切り分けを行います。 - 機能のテスト
新しい機能を追加する前に、既存の関連機能を一時的に無効にしてテストしたい場合に利用します。 - 一時的な非表示
まだ完成していないセクションや、期間限定で表示するコンテンツなどを、一時的に非表示にしておくことができます。
<h1>メインタイトル</h1> <!-- 以下の画像は現在テスト中です。 <img src="test_image.jpg" alt="テスト画像"> --> <p>本文のコンテンツが続きます。</p> <!-- ▼▼ 期間限定キャンペーンバナー ▼▼ <div class="campaign-banner"> <p>今だけ！<特別割引実施中！</p> </div>▲▲ 期間限定キャンペーンバナー ▲▲-->
＼満足度90%以上！／
良いコメント・悪いコメント：コードの可読性を高めるために
良いコメントのポイント
- 「なぜ」を説明する
コードが「何をしているか」はコード自体を見ればわかります。コメントでは「なぜそのように書いたのか」「このコードの意図は何か」といった背景を説明しましょう。
例
<!-- IE11でflexboxのバグを回避するための記述 -->
- 複雑なロジックや構造の補足
特に複雑なJavaScriptの処理を呼び出すHTML要素や、CSSとの連携が複雑な部分など、コードだけでは理解しにくい箇所に補足説明を加えます。 - セクションの区切り
長いHTMLファイルでは、主要なセクションの開始と終了をコメントで明示すると、全体構造が把握しやすくなります。
例
========== ヘッダーセクション開始 ========== --> - 注意点や改善点のメモ
将来の自分や他の開発者への申し送り事項や、一時的な対応であることなどをメモとして残します。
避けるべきコメントの例
- コードを見ればわかることの繰り返し
<!-- これは段落です --> <p>テキスト</p>のようなコメントは不要です。 - 古い情報や誤った情報
コードを修正した際は、関連するコメントも必ず更新しましょう。古いコメントは混乱のもとです。 - 過剰なコメントアウト
デバックなどで一時的にコメントアウトしたコードは、作業が完了したら削除するか、バージョン管理システム（Gitなど）で管理しましょう。不要なコードが残っていると、コードの可読性が低下します。
まとめ：コメントとコメントアウトを使いこなして、よりよいHTMLを
今回は、HTMLにおける「コメント」と「コメントアウト」の正しい使い方、そしてコードの品質を高めるためのコメントの活用術を解説しました。
-
- コメント：コードに「注釈」を残し、意図や背景を伝えるためのもの。
- コメントアウト：コードを「一時的に無効化」する行為。デバックやテストに活用。
この二つの機能を適切に使い分けることで、あなたのHTMLコードは格段にわかりやすくなり、未来の自分やチームメンバーとのコミュニケーションも円滑になります。ぜひ今日から実践し、よりメンテナンス性の高いWebページ制作を目指しましょう。
「忍者CODE」は未経験からでもWeb制作のプロを目指せるオンラインスクールです。
-
- 忍者CODEのWeb制作コースでは、
- 業界最安級の料金でしっかりとスキルを習得できるWeb制作コース・独学プラン
- スキルの習得後に必ず副業案件を紹介してもらえるWeb制作コース・副業支援プラン
- 転職サポートのプロから転職支援が受けられるWeb制作コース・転職支援プラン
の3つのプランから選べます。
学習コースに関するご相談や学習後のキャリアに関するご相談などについては、
こちらの無料メンター相談にて受け付けておりますので、お気軽にお申込みください！
また、JavaScript初学者が無料で基礎を学べる HTMLの入門講座や無料でJavaSctiptの問題に挑戦できる HTMLの無料問題集も非常に好評です！
