HTMLのコーディングをしていると、「コメントアウト」をすることがよくあります。
コメントアウトとは、簡単に言うとコードの一部を無効化したりコードに関する説明をメモとして残すことができる機能です。
HTMLの勉強をし始めたばかりの方の中には、いきなりコメントアウトと言われても「どのような場合に使うのかわからない」「コメントを残す余裕がない」と感じる方もいるかもしれません。
しかしコメントアウトを使うと、実行はしたくないけど残しておきたいコードや情報などを保持できて非常に便利なのです。またコメントはHTMLの勉強だけでなく実務でWeb開発をする際も役立つため、デザイナーやエンジニアの実務でも活用されています。
この記事では、初心者の方向けにHTMLでコメントアウトをする方法について解説します。
HTMLの勉強を始めたばかりの方や、コメントアウトについてよくわからない初心者の方はぜひ参考にしてください。
【目次】
コメントアウトとは
前述の通りコメントアウトとは、コードの一部分や説明の文字列を無効化する機能です。たとえばコードの一部分をコメントアウトしておくと、その文字列はブラウザ上に表示されません。
コメントアウトをする方法についてはあとでまた説明しますが、以下のコードで「Hello World!を表示する」という文字列はコメントとなっているため表示されることはありません。HTMLのコードには、このような形式で説明文などの情報をコードに影響しないコメントとして残すことができるのです。
<!-- Hello World!を表示する --> <html> <h1>Hello World!</h1> </html>
「コードが長くなるしコメントを書く時間が余分にかかってしまうのに、なぜコメントを残す必要があるの？」「必要なコードだけがあればよいのでは？」と思うかもしれませんが、コメントアウトを使うとさまざまなメリットがあります。
コメントアウトを使うメリット
たしかにコメントを残そうとするとコード全体が長くなりますし、コードだけでなくコメントを書く時間が余分にかかってしまいます。しかしコメントを残しておけば、さまざまなメリットが受けられるのです。ここからは、コメントアウトを使うメリットについて解説します。コメントアウトを使う意味がいまいちよくわからない、今までコメントアウトを使ったことがないという方はぜひ参考にしてください。
以前のコードを残したまま書き換えたり、書き換えたコードをもとに戻したりできる
たとえば文字の大きさや色味を調整しているときに、「もっと大きく表示させたほうが見やすいかな？逆に邪魔になってしまうかな？」「この色に変更したらどう見えるだろう？目立ちすぎてしまうかな？」などと思ったことはありませんか。
HTMLやWeb開発の勉強をしていると、「こんなコードの書き方をしたらどうなるのかな？」と思うことがよくあるはずです。
そんなときはコメントアウトの出番です。該当する部分を一旦コメントアウトして新たなコードを書けば、既存のコードを保持したまま試したいコードを実行できます。
ここで既存のコードを毎回削除していると、「やはり前に書いていたコードに戻したい」となったときに戻すのが非常に大変です。長いコードや複雑な箇所だった場合は、もともとどう書いていたのかがわからなくなってしまうかもしれません。
しかしコメントアウトを使えば、一旦既存のコードをコメントにするだけで簡単にさまざまなコードを試すことができるのです。
機能や処理などに関する説明やメモ書きができる
コードだけでなく日本語でのメモ書きもコメントアウトできるため、実装した処理の中に説明文を残すことができます。
「そんなのコードを見たらわかるのでは？」と思うかもしれませんが、長いコードや複雑な箇所、似ているけど少しずつ異なる部分が複数ある場合など、毎回すべてのコードを読み解くのは大変です。
しかしコメントで説明を残しておけば、どこでなにをしているのかが一目でわかります。
もちろんすべてのコードや簡単な箇所にまで逐一コメントをする必要はありませんが、わかりづらい部分だけでも説明を残しておけば、あとから見返したり修正したりする際に役立つでしょう。
チーム開発で必要となる情報を残しておくことができる
プログラミングやWeb開発に関するの勉強は独学でしている方が多いかと思いますが、デザイナーやエンジニアはチームで開発をすることがほとんどです。
複数人で開発をする際も、コメントは重要な役割を果たします。コメントを使えば、たとえば既存のコードを修正したときに更新情報をコード内に残しておくことができます。
そのため、勉強中だけでなくデザイナーやエンジニアになってからの実務でもコメントを残すことが重要なのです。
HTMLでコメントアウトをする方法
コメントアウトを活用すると、前述のようなメリットが受けられます。ここからは、実際にHTMLのコード内でコメントアウトをする方法について解説します。
HTMLでは一行のみコメントアウトをする方法と、複数行まとめてコメントアウトをする方法があります。
一行のコメントアウトをする方法
まずは一行のみをコメントアウトする方法について解説します。
HTMLでは、以下のようにの間に書いた文字列はコメントとなります。
以下のコードで、「Hello World!を表示する」はコメントとなっています。
<!-- Hello World!を表示する --> <html> <h1>Hello World!</h1> </html>
なおpaizaラーニングのHTML/CSS入門編1: HTML/CSSを理解しようでは、HTMLで一行ごとにコメントアウトをする方法を詳しく解説しています。
複数行まとめてコメントアウトする方法
次に複数行をまとめてコメントアウトする方法について解説します。
HTMLでは、改行をしていてもの間に書いた文字列はコメントとして扱われます。
たとえば複数の要素についての説明文を残したいときは、無理に一行に書こうとするよりも適宜改行を入れたほうが読み返したときにわかりやすくなるでしょう。
<!-- 12月はクリスマスキャンペーン情報を表示 1月はお正月キャンペーン情報に変更 -->
なおpaizaラーニングの新・HTML/CSS入門編3: コメントを理解しようでも、HTMLでコメントアウトをする方法について詳しく解説しています。コメントアウトについてもっと知りたい方はぜひごらんください。
コメントアウトをする際の注意点
コメントアウトは非常に便利な機能ですが、使用をするにあたっていくつかの注意点があります。HTML・プログラミングの勉強を始めたばかりの方や、デザイナー・エンジニアを目指している方はぜひ参考にしてください。
コメントの中にコメントを入れ子にすることはできない
前述の通り を使えばコメントアウトができますが、コメントの中にコメントをネスト（入れ子）することはできません。
たとえば以下のような形でコメントを入れ子にすると、「要検討」のあとのコメントアウト終了タグ -->でコメントアウトが終了となり、そのあとの「1月はお正月キャンペーン情報に変更 -->」という文字列はブラウザに表示されてしまいます。
<!-- 12月はクリスマスキャンペーン情報を表示 <!-- 要検討 --> 1月はお正月キャンペーン情報に変更 -->
このようにコメントアウトを入れ子にしてしまうと、見せたくないコメントも表示されてしまうため注意しましょう。
コメント内にハイフンを連続で記載しない
コメントのタグ には、ハイフンが2つあります。コメント内でハイフンを連続で記載すると、コメントのつもりでもタグとして扱われてしまい、想定していない場所でコメントが終了してしまう場合があります。
そのためコメント内ではなるべくハイフンを連続で記載しないようにしましょう。
コメントに不要な情報を載せない
HTMLでコメントアウトをした文字列は、ブラウザ上に表示されません。しかしブラウザ上で右クリックをして「ページのソースを表示」を選択すれば、誰でもそのページのソースコードを見ることができます。
そのため例えば担当者の個人名やID、パスワードなどを記載していると、情報漏洩につながってしまうのです。
また個人情報だけでなく開発中の機能や書きかけのコードをコメントアウトしてそのまま置いておくのも、企業として公にしたくない情報の漏洩を引き起こしてしまう危険性があります。
社外に公開したくない情報はコメントに記載せず、あくまでコードを読んだり修正したりする際の手助けとなるような情報だけを残しておくようにしましょう。
コメントのせいで逆にコードが読みにくくなる場合もある
コメントはコード内に説明文などが残せて非常に便利ではありますが、すべてのコードに逐一コメントをつけていく必要はありません。ただしもちろん、必要なコメントが不足しているようなコードもよくありません。
とくに実務でチーム開発をしている場合、個人個人がそれぞれのルールでコメントをつけてしまうとコメントの付け方に統一感がなくなってしまいます。「このページには過剰なコメントがあるのにあのページにはまったく情報がない」といったことにもなりかねません。
またコードが修正・変更されたのにコメントが放置されたままだと、コードとコメントの内容に相違が生じてしまい、開発を助けるためのコメントが逆に妨げとなってしまいます。
こうしたトラブルを防ぐために、多くの開発チームではコメントやコードの書き方をコーディング規約として定めています。デザイナーやエンジニアとして就職・転職した場合、コメントの書き方などはこのコーディング規約に従うようにしましょう。
HTMLのコメントアウトを学んでみよう
この記事ではコメントアウトとはなにか、HTMLでコメントアウトをする方法や注意点などについて解説しました。適切なコメントは学習や個人開発の手助けになるだけでなく、実務でチーム開発をする際も重要な情報を伝えるのに役立ちます。
コメントアウトの方法をマスターして、適切なコメントをつけられるようになることを目指しましょう。
なお「コメントアウトに限らずHTMLの基礎的な学習から始めたい」という初心者の方には、paizaラーニングのHTML入門講座がオススメです。
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
