Web業界のエンジニアにとって、必須といえるのが「HTML」の知識です。

インターネット上で目にするほとんどのWebコンテンツは、HTMLでできています。

Webサイトはもちろん、Webアプリケーションやブラウザゲームを作るには、HTMLのスキルが必要不可欠です。

この記事ではHTML入門の一つとして、HTMLでのコメントアウトの方法や注意点を解説します。

 

コメントアウトとは

プログラミングにおける「コメント」とは、プログラムのソースコード上で「実行させない部分」のことです。

プログラムの一部分をコメントタグで囲んで無効化することを「コメントアウトする」というように、動詞として使われることが一般的です。

 

基本的にHTMLはWebブラウザに表示するためのプログラミング言語なので、コーディングをする際はブラウザに表示させたくない部分をコメントアウトします。

ソースコードを書くのに「実行させない部分を書くのは無駄なのでは？」と疑問を感じるかもしれませんが、コメントアウトには重要な役割があります。

 

コメントアウトの役割

コメントアウトの役割は主に「保守性の向上」と「可読性の向上」の2点です。

Webコンテンツのプログラムは、基本的に完成してから長期にわたって使用され、必要に応じて更新されていきます。

 

システム運用をチームで行っている場合、作成者以外の人がソースコードを読み書きする機会が多々あります。

作成者本人が管理する場合でも、ソースコードが長くなったり時間が経ったりすると、そのソースコードを覚えておくことは困難です。

コメントとしてプログラムの役割や更新日時などを記載しておけば、ソースコードの管理や更新がしやすくなり、保守性の向上に役立ちます。

 

また、複雑なネスト構造（※）のソースコードや関数等で実行部分が広範囲に点在するプログラムの場合、コメントでメモを残しながら書いた方が可読性が良くなり、プログラミングのミスを減らすことができます。

（※）ネスト構造：マトリョーシカのように、同じ形のものが何層にも中に入っている構造のこと。HTMLのソースコードでは、あるタグで囲ったものの外側を、さらにタグで囲うというような時に使用される。

 

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

HTMLを学習中の初心者はタグを覚えることに精一杯で、「コメントアウト」などの補助スキルの習得がおろそかになりがちです。

コード上にコメントを残すことは、エンジニアとして必須の基礎スキルです。

コメントアウトを活用することのメリットを、具体的に解説していきます。

 

複数人でサイト制作を行うのに便利

Webサイトを制作・運用する際は、複数のメンバーで行うことが多いでしょう。

この場合メンバー間でさまざまな情報を共有する必要があり、HTMLのコードも複数人で更新することになります。

 

特に書き変えることが多い箇所については、コメントを残しておくと便利です。

 

• 更新日時
• 担当者名
• 更新した内容

 

このような情報をチーム内で書式を決めて残しておくと、テキストファイルの検索ツールを使用するだけで簡単に探しやすくなります。

たとえば、何度も表示したり消したりする部分を削除せずにコメントアウトしておけば、次に使う時にコメントアウトを外すだけで再利用できます。

 

タグや構成が分かりやすいためメンテナンスに役立つ

Webサイトやシステムが大きくなるほど、ソースコードも膨大な量になります。

HTML要素は開始タグと終了タグで処理を囲む構造のため、終了タグが一つ抜けると表示が大幅に崩れてしまう可能性があります。

タグがネスト構造になっている場合は、開始タグと終了タグの位置に内容のわかるコメントを入れると、構造が理解しやすくなりエラーを防ぐことにも役立ちます。

 

JavaScriptやPHPなど他の言語を併用している場合、構造がさらに複雑になりがちです。

特にjQueryなどのJavaScriptは、プログラムの記述位置がずれただけで正常に動作しなくなることもあります。

どんな目的のプログラムなのか記述位置についての注意点などをコメントに残すことで、仕様の変更やエラーが起きた時にも対処しやすくなります。

 

更新作業がスムーズにできる

事前に近日公開する予定の部分をコメントアウトで作っておけば、更新作業をスムーズに行うことが可能です。

たとえばWebサイトのメンテナンス期間や、店舗の臨時休業期間など、一定期間後に削除する予定の部分も、コメントアウトして事前に用意しておくとスムーズに更新できます。

 

コードの覚書として便利

「今は使用していないけれど、後で使うことになるかもしれない」という部分も、コメントアウトしておけばブラウザには表示されません。

候補のコードが複数ある場合は、コメントアウトで残しておくと便利です。

また、参考にしたサイトのURLや覚書を残しておくこともできます。

後で編集する際や、エラー発生時に修正箇所を探す際にも役立ちます。

 

HTMLでのコメントアウト方法

HTMLでソースコードをコメントアウトするには、非表示にしたい部分を「<!––」と「––>」で囲みます。

 

■ 「<!––」⇒コメントの開始タグ

コメント開始タグの「<!––」は、スペースを空けずに続けて記述する必要があります。

 

■「––>」⇒コメントの終了タグ

終了タグは「–– >」のように、「––」と「>」の間に空白が入っても構いません。

 

単語などの文字列やメモのような数行に渡る文章、HTMLタグもコメントアウトできます。

 

HTMLでのコメントタグの使用例

HTMLでのコメントアウトの使用例です。

1行のときは、以下のように「<!––」と「––>」で囲みます。

 

複数行のときも、以下のように記述すると「<!––」と「––>」の間の記述が非表示になります。

 

HTML以外のタグの書き方

コメントタグは、使用する言語によって書き方が異なります。

コメントアウトする範囲が一行か複数行かで、書き方が変わる言語もあります。

Webプログラミングで使われる代表的な言語での、コメントタグの書き方を紹介します。

引用元：https://creive.me/archives/13347/

 

また、WordPressを使っている場合や、サーバーの設定も行う時は、.htaccessファイルを編集することがあります。

.htaccessファイルの場合は、書き方が少し特殊です。

このように、行頭に「#」を付けます。

終了タグは必要ありませんが、改行はできません。

行の途中からコメントアウトする場合は以下のように、ダブルクォーテーションで囲む必要があります。

 

HTMLでのコメント記述例

HTMLソースコードでのコメントの記述例を紹介します。

 

注意点

コメントアウトを行う上で、いくつかの注意点があります。

 

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

簡単な方法で誰でも読むことが可能ということです。

Macでは、Safariの環境設定で開発メニューを表示させることが必要ですが、Windowsでは、特に設定の必要もなくブラウザで右クリックして、メニューから「ページのソースを表示」を選ぶとHTMLソースが表示されます。

くれぐれも読まれてはいけない情報、社外秘にするべき情報などはコメントに記載しないよう注意してください。

 

コメントタグを入れ子にすることはできない

ほとんどのHTMLタグをコメントアウトすることが可能ですが、コメントタグ自体はコメントアウトすることはできません。

1度コメントアウトした部分をコメントタグで囲ってしまうと、ブラウザによっては最初のコメント終了タグ「––>」をコメントの終了宣言とみなし、コメントアウトを終了してしまいます。

意図しない部分でコメントアウトが終了し、その後のコメントアウト部分がブラウザに表示されてしまう恐れがあるので注意が必要です。

 

-(ハイフン)は使用しない

「-(ハイフン)」を連続して記述すると、コメントの終了と解釈するブラウザがあります。

意図しない部分でコメントアウトが終了する可能性があるので、ハイフンの連続使用は止めましょう。

 

phpタグ内ではコメントアウトできない

PHPはHTMLと併用することが多い言語です。

複数の言語でソースコードが書かれていると、言語の切り替え位置を見落としてしまいがちです。

違う言語のコメントタグは効果がありません。

HTMLのコメントアウトが効かない時は、phpタグの範囲内になっていないか確かめることが重要です。

 

WordPressでは注意が必要

WordPressのバージョンや使用しているテーマによって、HTMLのコメントタグがうまく機能しないことがあります。

WordPressのデフォルト設定で、ハイフン「-」がエンダッシュ「–」へ自動変換されてしまうことが原因です。

このように、HTMLのcodeタグで囲むと、自動変換を防ぎHTMLコメントとしてコメントアウトすることができます。

 

あるいは、ショートコードを登録してコメントアウトする方法もあります。

たとえば、新しくショートコード”ignore”を定義し、それを用いて記述した内容は出力しないように設定します。

使用しているテーマのfunctions.phpに、以下のようなコードを追記します。

テキストエディタで”ignore”ショートコードを使用すると、コメントを非表示にすることができます。

 

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

WordPressでは特に、サイトの読み込み速度を上げるための手段として、コメントアウト部分を一括削除することがあります。

コメントタグを削除すればコメントアウトを解除することができますが、ソースコードが膨大な場合や、コメントが大量にある時は、すべてのHTMLコメントアウト部分を削除するのは大変です。

 

そこで、アドビシステムズが販売しているWebオーサリングツールに、「Adobe Dreamweaver（アドビ ドリームウェーバー）」というものがあります。

Dreamweaverにはテンプレートやライブラリといった機能があり、これらを活用することでコメントタグの一括削除も可能です。

 

Dreamweaverでコメントタグを一括削除するには、2つの方法があります。

• HTMLクリーンアップを使用する
• 置換機能を使用する

 

HTMLクリーンアップを使用して削除する方法

「コマンド」→「HTMLのクリーンアップ」から、削除したい項目を実行すると、コメントアウト部分が一括削除されます。

しかし、削除できる範囲は1ページのみに限られます。

 

置換機能を使用して削除する方法

置換機能を使う場合は、サイト全体を一度に変換することができますが、元に戻すことができません。

バックアップを取って慎重に行いましょう。

Dreamweaverの置換機能を使ったHTMLコメントタグの一括削除方法を説明します。

 

【1】 サイトデータを「ローカルサイト登録」

一括削除の前準備として、バックアップを取ります。

リモートサイトで作業をしている場合は、ローカルサイトへデータをコピーしておきましょう。

ローカルサイトで作業をしている場合は、ローカルサイトのフォルダごとコピーしておきます。

 

【2】 コメントタグを検索

コメントタグで囲まれている部分を検索します。

検索条件に正規表現を使うと、『「<!––」と「––>」で囲まれたすべての文字』という条件で検索することが可能です。

コメントタグを検索する正規表現は、以下のとおりです。

DreamWeaverで検索置換ウィンドウを開き、検索欄に上記の条件を入力してください。

 

【3】 検索結果を置換

検索結果を削除したいときは、置換後の文字列を空白に設定します。

置換の欄を空欄にして、「すべて置換」のボタンで実行してください。

これで、HTMLコメントタグが一括削除されました。

 

コメントアウトを活用すれば業務の効率化を図れる！

Web業界でエンジニアとして仕事をする上で、HTMLの知識は必要不可欠です。

コメントアウトのスキルは、HTML言語の学習にはもちろん、Webサイトの構築と運用を効率的に進めることに役立ちます。

チーム内でWebコンテンツをスムーズに管理・運用するためにも、コメントアウトを上手く活用して、業務の効率化を図りましょう。