コメントアウトの役割とは｜HTMLで書く方法や気をつけたいことも紹介

コメントアウトの意味とは

HTMLでのコメントアウトとは、Webブラウザには表示させない文字をソースコード上に記載しておくために行うものです。

コメントアウトをしたい文字列をコメントアウト用のタグで囲むことで、コメントアウトすることができます。

コメントアウトの役割とは

コメントアウトの主な役割は、ソースコードを読みやすくして、保守をしやすくすることです。

HTMLのソースコードをチームで管理する場合、作成者以外がソースコードを確認したり、更新したりすることがあります。そのようなとき、ソースコードにコメントで更新日時や処理の内容が記載されていれば、作成者本人でなくとも内容を理解しやすくなります。

特に複雑な構造のソースコードになっていた場合、コメントがあることでプログラミングミスや表示エラーを減らすことが期待できるでしょう。

HTMLでコメントアウトを書く方法

HTMLでコメントアウトを記載するには、次のタグでコメントアウトしたい文字列を囲みます。

・開始タグ（<!--）：開始タグはそれぞれの文字の間に空白を入れないようにする
・終了タグ（-->）：終了タグは「--」と「>」の間に空白が入っていても問題ない

ここでは、複数行のコメントアウトの方法、1行のみのコメントアウトの方法、CSSでのコメントアウトの方法を紹介していきます。

複数行に書く場合

複数行をコメントアウトしたい場合は、以下のようにコメントアウトしたい行の始めと終わりにタグを記載します。

<!--
複数行をコメントアウト
複数行をコメントアウト
複数行をコメントアウト
-->

ブラウザに表示させる必要はないため、コメントアウトのタグの後に改行タグ<br>は必要ありません。

1行のみに書く場合

1行のみコメントアウトしたい場合は、以下のように文の頭と終わりにコメントアウトのタグを記載します。

<!--1行のみをコメントアウト-->

単純にコメントアウトしたい文字列をタグで囲えば、その文字列はコメント行になります。

CSSの定義範囲を書く場合

CSSの定義範囲を分かりやすくするために、コメントアウトを使用することもあります。

HTMLが長くなり複雑になればなるほど、終了タグがどの開始タグとセットになっているかが分かりにくくなります。

以下のようにコメントアウトでどのclassの終了タグであるかを記載しておけば、後で見返す際や他の人が見たときに分かりやすいでしょう。

<div class="main">

</div><!-- End of main -->

コメントアウトを活用する4つのメリット

コメントアウトを使うメリットとは、どのようなものでしょうか。

コメントアウトを活用すれば、ソースコードが読みやすくなる、保守性が向上するなど様々なメリットがあります。

ここでは、コメントアウトを活用するメリットを4つ紹介していきます。

• 構成やタグが分かりやすくなる
• コードを書き止めるメモとして使える
• チームでの作業がスムーズになる
• 更新するときの作業が簡単にできる

1：構成やタグが分かりやすくなる

Webサイトの規模が大きかったり、システムの構造が複雑だったりすると、ソースコードはより大きく複雑になります。

HTMLはその性質上、終了タグが1つ抜けただけでも、正しく表示されなくなったり、デザインが崩れたりすることがあります。

複雑なソースコードであればあるほど、コメントの役割は重要です。開始タグや終了タグにどのような処理の開始と終了であるかを記載しておくことで、その内容や構造が分かりやすくなるため、更新時のエラーやコーディングミスを減らせるでしょう。

処理の内容や更新内容、その箇所での注意点など、コメントを残すことでメンテナンスの際に対応がしやすくなります。

2：コードを書き止めるメモとして使える

Webサイトの中で、「いずれ使うが、今は使わない機能」や「今は表示させたくないが、しばらく経ったら表示させたい内容」など、仕様やコードは決まっているけれども表示させられないという部分があるでしょう。

そのようなときは、ソースコード上は該当の機能や内容を記載しておいて、その部分を丸々コメントアウトしてしまえば、プログラムとしてもWebブラウザでの表示上も影響なくコードを残しておくことができます。

このようにコメントアウトをコードを書き止めるメモとして使用すれば、後で編集する際や更新を行う際に、何もない状態よりは作業が楽になります。

3：チームでの作業がスムーズになる

WebサイトやWebシステムを構築する際、チームを組み複数のメンバーで構築することが多いでしょう。複数人で同じソースコードを更新したり、修正したりする際にも、コメントを残すことが大事です。

「誰が」「いつ」「どのような修正」をしたのかという情報が、コメントで記載されていれば、次に更新や修正を行う際にスムーズに内容を理解することができます。

4：更新するときの作業が簡単にできる

既に表示期間や表示内容が決まっているような部分について、事前にその内容をソースコードに記載しておき、コメントアウトの状態にしておけば、公開するとなったときにコメントアウトのタグを消すだけで更新ができるため、作業が簡単になるでしょう。

例えば、一定期間だけ表示させるお知らせやWebサイトのメンテナンス期間など、表示させたい内容を事前に準備し、更新する際はコメントアウトを追加、削除するだけという作業にすれば、表示内容を全て更新しなければいけないという作業よりは、スムーズに更新ができます。

コメントアウトで気をつけたい5つのこと

コメントアウトはソースコードが見やすくなったり保守性が向上したりと、複数のメリットがあり便利ですが、注意しなければならない点もあります。

コメントアウトで気をつけたいこととは、どのようなことでしょうか。ここではコメントアウトで気をつけたい5つのことを紹介していきます。

• 大切な情報は書き込まない
• ハイフンは連続で使用しない
• WordPressで使用するときは設定を確認する
• phpタグの範囲外にあることを確認する
• 入れ子としての使用はできない

1：大切な情報は書き込まない

コメントアウトした内容は、Webブラウザには表示されませんが、ソースコード上には表示されます。

HTMLのソースコードは、ブラウザの開発者モードや右クリックして表示されるメニューの「ページのソースを表示」から簡単に閲覧することが可能です。言いかえれば、ソースコードはネット上に公開している以上、誰でも簡単に閲覧できてしまうということです。

そのため、個人情報や機密情報、サーバのIDやパスワードなど他の人に見られてはいけない情報は書き込まないようにしましょう。

2：ハイフンは連続で使用しない

コメントアウトのタグには、開始タグ（<!--）にも終了タグ（-->）にもハイフンが含まれています。

そのため、コメント内でハイフンを連続して使用すると、終了タグ（-->）と認識される可能性があり、思ってもみない箇所でコメントアウトが終了してしまう恐れがあります。

本来表示させてはいけない内容が、意図しないコメントアウトの終了によりブラウザに表示されてしまうことを避けるため、コメント内でハイフンは連続で使用しないようにしましょう。

3： WordPressで使用するときは設定を確認する

WordPressを使用して、HTMLのソースコードを編集することもあるでしょう。

WordPressはプラグインや使用しているテーマ、また自動補完機能によってHTMLのコメントアウトが正しく機能しない場合があります。

WordPressで、HTMLのコメントアウトが機能していないと気づいたときは、設定を確認してみると良いでしょう。

また、以下のタグ（codeタグ）を追加することによって、WordPressの自動変換を防ぎ、HTMLのコメントアウトを正しく機能させ、使用することができます。

<code>
<!-- コメントアウトする文字列 -->
</code>

4： phpタグの範囲外にあることを確認する

HTMLは単体で使用することもありますが、PHPやJavaScriptなど他の言語と併用することが多い言語でもあります。

PHPはよくHTMLと併用されますが、PHPのコード内ではHTMLのコメントタグは、コメントアウトとしての効果を持ちません。

PHPとHTMLを併用していてHTMLのコメントタグが効かない場合は、コメントタグがphpタグの範囲外にあることを確認してみましょう。

5：入れ子としての使用はできない

コメントアウトを入れ子にするとは、コメントアウトの中にコメントアウトを記載しようとすることです。

コメントアウトを入れ子にした場合、1つ目の終了タグ（-->）でコメントアウトが終了したと判断され、残りの部分がブラウザに表示されてしまう可能性があります。

例えば、以下のような構造でコメントアウトをした場合、1つ目の終了タグ（-->）の後の内容（入れ子部分の後のコメントアウト-->）がブラウザに表示されてしまいます。

<!--
1つの目のコメントアウト
<!-- 入れ子部分 -->
入れ子部分の後のコメントアウト
-->

コメントアウト部分を削除する方法

開発途中のメモとして残していたコメントが必要なくなった、またはサイトの読み込み速度を上げるためになど、コメントアウト部分を削除したいという場面はあるでしょう。

ここでは、「Adobe Dreamweaver（アドビ ドリームウェーバー）」というツールを使用したコメントアウト部分を削除する方法を紹介していきます。

• クリーンアップを使って削除する
• 置換機能を使って削除する

クリーンアップを使って削除する

Dreamweaverでコメントタグを一括削除する方法の1つとして、クリーンアップを使って削除する方法があります。この方法でコメントを削除できる範囲は1ページのみです。

コメント削除の手順は、Dreamweaverの上部メニューから「コマンド」を選択し、さらに「HTMLのクリーンアップ」を選択、その後削除したい項目を選択して実行します。

置換機能を使って削除する

Dreamweaverでコメントタグを一括削除するもう1つの方法は、置換機能を使って削除する方法です。

この方法では、削除できる範囲に制限はなく、サイト全体に対してコメントアウト部分の一括削除が可能です。ただし、一度削除してしまうと元に戻すことはできないため、しっかりとバックアップを取っておき、慎重に実施する必要があります。

置換機能を使って削除する方法は以下の通りです。

・事前に一括削除を行いたい対象のバックアップを取っておく
・DreamWeaverで検索置換ウィンドウを開き、「<!--\s(.+)\s-->」を入力して検索する
・置換後の文字列を空白に設定してから、「すべて置換」を押下して実行する

コメントアウトの書き方を理解して仕事を効率的に進めよう

コメントアウトは適切に利用すれば、チームで作業する場合でも、自分で後から見直して修正を行う場合でも、効率よく業務を進めることができます。

本記事で紹介したコメントアウトを使用するメリットや注意点をしっかりと理解し、業務の効率化に活用してみてください。