HTMLにコメントアウトを残していますか？
夢中になってソースコードを書いているとついついコメントアウトを書くのを忘れてしまいます。
しかし、コメントアウトがないコードは読みにくいです。
この記事ではHTMLでコメントアウトを残す方法を紹介します。実装方法を覚えて見やすいコードを書けるようになりましょう。
- コメントアウトの役割
- HTMLでコメントアウトをする方法
- HTMLでコメントアウトする注意点
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
コメントアウトとは
コメントアウトとは記述したソースコードを実行させない部分です。
記述方法はプログラミング言語ごとに異なりますが、全ての言語でコメントアウトをすることができます。
プログラムが実行されないのであれば「記述する必要ないのでは？」と感じるかもしれませんが、どのような処理をしているのか説明を残すことによってソースコードがとても読みやすくなるのです。
コメントアウトの役割
コメントアウトの役割は保守性の向上と可読性の向上です。
HTMLでのコメントアウト方法
コメントアウト方法はプログラミング言語ごとに異なります。
この記事ではHTMLでのコメントアウト方法を紹介します。
1行だけコメントアウトする
コメントアウトしたい内容の最初に<!--を入力し、コメントアウトしたい最後に-->を入力することによって実装が可能です。
<p>pタグ内のテキストはブラウザに表示されます。</p>
<!-- コメントアウトされた内容はブラウザに表示されません。 -->
<div>divタグ内のテキストはブラウザに表示されます。</div>出力結果
pタグ内のテキストはブラウザに表示されます。
このように、コメントアウトした内容がブラウザに表示されることはありません。
複数行をまとめてコメントアウトする
複数行コメントアウトするときも１行の場合と同様に、コメントアウトしたい内容の最初に<!--を入力し、コメントアウトしたい最後に-->を入力することにより実装が可能です。
<p>pタグ内のテキストはブラウザに表示されます。</p>
<!--
1行目がコメントアウトされます
2行目がコメントアウトされます
-->
<div>divタグ内のテキストはブラウザに表示されます。</div>出力結果
pタグ内のテキストはブラウザに表示されます。
複数行のコメントアウトした内容も同様にブラウザ上では非表示にすることができます。
HTMLコメントアウトする際の注意点
HTMLは記述内容が直接ブラウザに反映されるため、間違った方法でコメントアウトしてしまうと思わぬ表示崩れに繋がってしまいます。
この記事ではコメントアウトの必ず知っておくべき注意点を三つ紹介します。
1.ユーザーにみられてはいけない情報をコメントアウトに残さない
HTMLでコメントした内容はブラウザ上に表示されません。
しかし、検証ツールを使うことによってコメントアウトされているソースコードを確認することができます。
ログインパスワードなどユーザーに見られてはいけない情報はコメントアウトに残さないよう気をつけましょう。
検証ツールからコメントアウト内容を確認できることを逆手にとってエンジニアにしかわからない秘密のメッセージとして使っている企業も存在します。
任天堂ニュースは<head>内にコメントアウトで隠しマリオ出力してます。
エンジニアは隠しマリオを見つけた瞬間任天堂ファンになることを避けられません。
2.コメントに「-」を使用してはいけない
HTMLのコメントアウトで-を使用してしまうとブラウザが終了タグだと認識したり、意図せぬ挙動する可能性があります。
ユーザーには表示させたくないコメントアウトした内容が表示されてしまうことにつながるので気をつけましょう。
同様の理由でコメントの中にコメントアウト表記（<!--- -->）を使用してはいけません。
3.WordPressのテキストエディアで使用する際は設定に注意
WordPressの初期設定で、ハイフン「-」がエンダッシュ「–」へ自動変換されます。
コメントアウトする際は<code></code>でコメント部分を囲むとコメントアウトすることができます。
<code>
<!-- ここに書いてある箇所がコメントアウトされます -->
</code>まとめ
この記事ではHTMLでコメントアウトする方法と注意点を紹介しました。
HTMLでは<!-- -->と記述しコメントアウトが実装できます。ソースコードの保守性と可読性を向上させるので注意点を覚え使えるようになりましょう。
それでは最後にこの記事の内容を復習します。
HTMLでコメントアウトに関するまとめ
- コメントアウト内はのプログラムは実行されない
- HTMLでは
<!-- -->の間にコメントアウトしたい内容を記述できる - HTMLのコメントアウト注意点は3つ
- ユーザーにみられてはいけない情報を載せる
<!-- -->内で「-」を使用してはいけない- WordPressのエディタ内では<code>タグを用いてコメントアウトする
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
