-
HTML/CSS
- コメントアウト
- メモ
HTMLでコメントアウトを使う方法と使いどころ、注意点を解説
HTMLのコードを書いているとコードの中にメモしておきたいけど、ページに表示させたくないことがあると思います。そんなときにはコメントアウトと呼ばれる機能を使うことをおすすめです。コメントアウトで囲まれた部分はページ表示や機能を持たない文書になります。
コメントアウトはHTMLで大きなページを作っているとき、塊がどんな役割を果たしているのかをメモすることができます。他にも服す人で仕事をするときにもコメントアウトを使えば、情報の共有も可能です。
本記事ではコメントアウトを使う方法や使いどころを解説します。また、コメントアウトを使うときの注意点も紹介します。
コメントアウトとは
コメントアウトはコード上に書かれていても処理が実行されない状態のことです。コードの役割や複数人で開発をする際に情報を共有するために使われます。HTMLではコメントアウトされた部分の要素は画面上に表示されなくなります。
コメントアウト自体はどのプログラミング言語でもあります。ただし、言語ごとに書き方が違います。Web開発をする際にHTMLだけでなく、CSSやJavaScript、PHPを使うときがあると思いますが、それぞれ書き方が違います。
HTMLのコメントアウトの書き方
HTMLでコメントアウトをする方法は<!–からコメントを書いて–>でコメントの終わりを宣言します。「ここはコメントです」というコメントアウトを作ると以下の通りになります。
<!-- ここはコメントです -->すると、「ここはコメントです」の部分は画面上には表示されなくなります。確認するために以下のコードをコピーして、ブラウザ上で表示してみてください。
<body>
<p> 文書が表示されます</p>
<!-- <p>コメントです</p> -->
</body>
上のコードを実行すると一つ目のpタグの文字は表示されますが、二つ目のpタグの文字は表示されません。もし、二つ目のpタグの<!–と–>を削除すれば、二つ目のpタグの文字も表示させることができます。
エディタをVisual Studio Codeを使っている方は指定した行をコメントアウトするショートカットがあります。コメントアウトしたい行を選択して、windowsなら「Ctrl + /」で、Macなら「Command + /」でできます。
HTMLでのコメントアウトの使いどころ
情報の共有
コメントアウトは情報の共有のために使われることがあります。Web開発では複数の人で開発にあたることがあります。その際、書いたコードの情報を共有するためにコメントアウトを使います。
複数人で作業をしていると、他人の書いたコードがどんな意味があるのかやどのような意図があるかがわからないことがあります。すると、コードに干渉してしまい、動作がうまくいかないと開発効率が落ちます。
他人との意思疎通のために、コメントアウトが使われます。
内容のメモ
大きなページや複雑な構造をしたページを作る際にはかたまりが何を示しているかわかるようにコメントアウトでメモを入れます。複雑な構造を持つほど、ページのどの部分を表すコードかが分かりにくくなります。
メモを1つ入れておけばどの部分を示すのかが一目でわかります。また、コードによって構造のどの部分を示しているのかが分かるので、要素の整理にもなります。要素の整理として、親子関係や兄弟関係が分かりにくいときにも使うこともあります。
繰り返し使う一時的なコード
特定の期間のみ使うコードで何度も使いまわすようなコードはコメントアウトを使うと切り替え1つでできるので便利です。例えば、定期的に行われる期間限定のコードです。イベントのタイミングごとにいちいちコードを書いていては時間の無駄です。
コメントアウトと表示の切り替えだけであれば、数秒で終わるので時間の無駄も無くなります。
HTMLでコメントアウトを使う際の注意点
重要情報を書かない
コメントアウトで重要な情報は書かないようにしなければなりません。コメントアウトを残したままでサーバーにアップロードして、公開すると開発者ツールでコードを見ることができます。コメントアウトしたコードも表示されます。
つまり、重要情報が記載されていると例えコメントアウトしたとしても世界中の人が見ることができます。そのため、HTMLファイル上には重要情報は書かないようにすることをおすすめします。さらに、完成品はファイルをコピーして、コメントアウトを消したバージョンを用意しておき、公開するものにはコメントアウトをしないほうがいいと思います。
ハイフン（-）を使わない
ハイフンを使うと終了と感じてコメントを終了するブラウザがあるので、コメント内ではできる限りハイフンを使わないようにすることをおすすめします。ブラウザは多様化しており、ユーザーがどのブラウザを使うかは分かりません。そのため、コメントアウト内にはハイフンを入れない方がいいと思います。
コメントを多く使いすぎない
コメントアウトが多すぎるとコードが長くなり、わかりにくくなります。分かりやすくするためにしようとした結果、分かりにくくなっては本末転倒ですよね。できるだけ少なく短く、シンプルにすることがコメントアウトをうまく使うコツです。
まとめ
コメントアウトは画面上に表示されないため、メモを残したり、情報を共有する上で大きな役割を持ちます。しかし、HTMLファイルのコード上から消えるわけではないので、公開後も多くの人の目に触れることは意識しなければいけません。
コードが複雑になったり、いろんな情報を残したいと思うほどコメントアウトしたくなりますが、できる限り最小限にすることをおすすめします。また、公開前には重要な情報が残ってないか確認することが大切です。漏れ抜けがあるかもしれないので、全部消してしまうのもいいと思います。
