コメントアウトの便利な使い方と注意点についてご紹介します

コメントアウトは単なるメモだと思われることも多いですが、「誰でも読みやすいコード」を書く際には必須のスキルです。誰でもコードの変更がしやすい状態を作っておくことで、サイトの「保守性」も高まります。

今回はコメントアウトの基礎知識と注意点についてご紹介します。意味をしっかりと理解したうえで、適切なコメントアウトが活用できるようになりましょう。

コメントアウトの概要

それではコメントアウトについて、ご紹介していきます。

コメントアウトとは？

また、一度コメントアウトで非表示にしたコードを、もう一度表示にする場合は「アンコメント」と言います。

使い方としては、大きく分けて２つあります。それぞれについてご紹介します。

使い方①：コードの補足説明

コードに補足説明を残しておくと、ページの構造を把握しやすくなります。

情報を整理・集約することで、誰でも内容が理解できるようになります。保守性の高いコードを目指すうえでは、コメントアウトは必要不可欠な存在です。

使い方②：一時的な非表示

コードは完成しているけど、ブラウザ上の公開は時期を見計らって段階的に行いたいという場合もありますよね。

そのような場合は、出来上がっているコードを一旦コメントアウトしておきます。公開のタイミングが来た際にアンコメントすれば、一瞬でブラウザに表示させることができので、便利です。

Googleの評価には影響ない

GoogleのJohn Mueller（ジョン・ミューラー）氏は、英語版のGoogleウェブマスター向け公式ヘルプフォーラムでコメントが与える影響について次のように説明しています。

（はっきり言ってしまえばかなり小さいが）ページのサイズは別として、JavaScriptやHTMLのなかのコメントはGoogleのサイトの評価にまったく影響しない。Googleは完全に無視する。必要に応じて自由にコメントを入れて構わない。

コメントはコードを書いたり見たりする時に必要な補足情報のため、中に書いたテキストがSEOの評価に影響を及ぼすことはありません。

言語別のコメントアウトの種類

コメントアウトは言語によって記述方法が異なるため、下記の一覧表でご紹介します。

特にHTMLとCSSは使用する機会が多いので、押さえておきましょう。

コメントアウトの注意点

コメントアウトを使用する際には2点注意すべきことがあるので、それぞれご紹介します。

削除すべきものはコメントアウトとして残しておかない

記述が多くなればなるほどファイルサイズが大きくなるため、読み込みに時間がかかりページの表示スピードが遅くなります。その結果、ユーザビリティの悪化に繋がります。Googleはユーザーファーストを掲げているので、当然SEOで低評価を受けることになります。

対処するためには、まずPageSpeed Insightsなどのツールを使って、コメントアウトの有無による表示スピードの違いを計測するとよいでしょう。

コメントアウト有りの状態でも表示スピードが2秒以内であれば問題ありません。

表示スピードがそれよりも遅い場合は、コメントアウト部分のコードが多すぎると判断する基準となります。1度コードを見直して、削除しても問題ないコメントアウトがある場合は、削除することを推奨します。

秘匿性の高い情報を記載しない

コメントアウトを使えばブラウザ上では非表示になりますが、ソース上の記述はそのまま残っています。つまり、ユーザーがデベロッパーツールなどでソースを表示させると、コメントアウトの中身を見ることができるのです。リリース前の重要な情報や、社外秘の内容などは、コメントアウトでの非表示には適していません。

コメントアウトはただのメモじゃない！

コメントアウトをうまく活用してサイトを保守しやすい状態にすることは、エンジニアにとって必須のスキルと言えるでしょう。

コメントアウトは誰でも簡単にできる内容ですが、注意点をきちんと理解したうえで使用しましょう。でないと、重要な情報が漏洩したり、ページの表示速度が下がりSEOに影響を及ぼしたりする可能性があります。

筆者紹介

片山 岳（katayama gaku）

株式会社doubLe　ソリューション事業部　SEO部門 　部門長

2017年4月新卒として株式会社doubLeに入社。

WEBデザイン、リスティング広告運用、SEO内部対策と幅広い分野の業務を経験し、2019年6月SEO部門の部門長に就任。

ファイナルSEOブログの運用を担当し、「効果の出るSEO対策」を追及している。ソリューション事業部の元気印として日々奮闘中。