Webサイト制作で効果的にコメントを使う方法と注意点

プログラミングをしたことがある人ならば、コメントは誰もが使用したことがあると思います。ですが、あなたはコメントを効果的に使用できていますか？今回はWebサイト制作で効果的にコメントを使う方法を解説します。

コメントとは？

コメントとはプログラミングに直接的な影響を与えない文字のことです。コメントの役割は、主に2つです。1つ目の役割は「メモとして使用すること」、2つ目の役割は「コードの機能を一時的に停止させること」です。

1) メモとして使用する

Webサイト制作を進めていく中では、様々なことを考えながらコードを書きます。誰しも、頭の中で考えていたことを、数日後には忘れてしまう経験はあると思います。考えていることをコメントという形で記述しておけば、忘れてしまっても思い出すことができます。

また、チームでWebサイト制作を行っている場合、複雑なコードであればあるほど、記述した本人は理解できていても、他のチームメイトが理解できないということが多発します。それを助けてくれるのがコメントです。コードの説明や注釈をつけておくことでチームメイトの理解を促進し、誤解を防ぐことができます。

2) プログラミングの機能を一時的に停止させる

記述しているコードの機能を一時的に停止させることもコメントの役割です。これを「コメントアウト」といいます。「コメントアウト」の反対、つまり、コメントされていたものをコメントされている状態から解除することを「アンコメント」といいます。

具体的には、コメントアウトは、エラーなどが発生した際、コードの一部分をコメントアウトすることで、どこでエラーが発生しているか調べるために使用することが多いです。

コメントの種類

ここでは、Webサイト制作で使用されることの多い「HTML」、「CSS」、「JavaScript」の3種類に絞ってコメントの記述方法を説明します。

1） HTMLでのコメント

HTMLでのコメントは、

と記述します。

2） CSSでのコメント

CSSでのコメントは、

と記述します。

3） JavaScriptでのコメント

JavaScriptでのコメント方法は2種類あります。

(1) コメントが1行だけの場合

と記述します。

(2)コメントが複数行の場合

と記述します。

［補足コラム～実際に確認してみよう～］ 実際にWebMediaのWebサイトで、コメントアウトされているかを確認してみましょう。ソースコードを表示し、170行目を見てください。Webサイト上では、表示されていませんが、「<!—コメントアウトしています。 -->」というコメントが記述されているのがわかるかと思います。

効果的なコメントの使い方

コードの範囲を伝える

コードの区切りごとに、コメントアウトした文を挿入することで視覚的にコードの範囲を理解することができます。この使い方は「HTML」、「CSS」などでよく使用します。
具体的には、

(1)HTMLの場合

と記述します。

(2)CSSの場合

と記述します。

だれが読んでもコードが理解できるようにする

複雑なコードの場合、なぜこのようになったかは書いた本人しかわかりません。このコードになった過程や意図など、コードを理解するために必要なことはコメントするようにしましょう。

例えば、

のように記述します。上記の例は、変数の値が何を示しているのかを他の人が見てもわかるように記述されています。

JavaScriptのコードが出ないようにする

Scriptタグを認識できないブラウザの場合、JavaScriptの記述がそのままブラウザに表示されてしまいます。それを防ぐためにコメントアウトを使用します。

具体的には、

のように記述します。

コメントの注意点　

コメントを多用しすぎない

コメントは簡単に記述できる上、表向きにはWebページには表示されないため、コメントを多用しがちです。よくありがちなコメントは、コードをただ日本語訳しただけのコメントです。このようなコメントがなくても、実際のコードを読めば理解できることが多く、日本語訳の分、読むのに時間がかかるため不要といえるでしょう。
また、コメントもコードとして読み込まれます。そのため、コメントを使えば、使うほどコンピューターがコードを読み込むのが遅くなってしまいます。この点からも、不要なコメントは記述しないようにすることも大切です。

公開したくない情報はコメントアウトで対応しない

コメントは表向きにはWebページには表示されないですが、上記のコラムでも確認したようにソースコードを表示させれば、だれでも簡単にみることができます。そのため、まだ公開する予定のない情報やURLをコメントアウトという形で非表示にしていても情報が漏洩してしまうので大切な情報はコメントアウトではなく、コードから消すようにしましょう。

連続したハイフンは書かない

上記でも述べた通り、HTMLでコメントアウトするためには連続したハイフン（--）を使用します。そのため、コメントアウト内に連続したハイフンを書いてしまうとうまくいかないので気を付けましょう。

具体的には、

というように書いてしまうと、もしpタグ全体をコメントアウトしたときに、

上記のようになり、--のところでコメントが終了し、続きが通常のテキストとして表示されてしまうことがあります。なので、ハイフンを書く際は文字参照 -を使うようにしましょう。

コメントアウト内にコメントアウトはできない

コメントアウト内にコメントアウトをしてもうまくいきません。

では、どうすることもできないのでしょうか？そんなことはありません。HTMLであれば、<style>タグや<script>タグを用いてコメントアウトしたい箇所を囲み、上記で説明したCSSやjavaScriptのコメントアウトの仕方でコメントアウトすればうまくいきます。

 

例えば、memoという記述をコメントアウトしていたが、その上のdivタグもコメントアウトしたくなった場合は、

このように記述することでコメントアウト内をコメントアウトすることが可能です。

まとめ

コメントは簡単に扱える分、いい加減に使いがちです。ですが、わかりやすいコードを書く人ほど効果的にコメントを使用しています。よりわかりやすいコードになるよう、効果的にコメントを使用できるよう努めましょう。

「作業効率がイマイチ上がらない」

「Webサイトリニューアルをしたい」など、

Webサイト構築に関する悩みをお持ちの方は、 多くの制作実績を持つITRA株式会社にご相談ください！

Webサイト制作に関する質の高い情報・サービスを提供します。