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

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

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

コメントアウトの概要

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

コメントアウトとは？

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

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

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

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

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

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

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

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

Googleの評価には影響ない

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

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

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

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

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

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

コメントアウトの注意点

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

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

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

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

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

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

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

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

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

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

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

関連記事

• モバイルフレンドリーとは？順位を下げないための基礎知識と対応方法 突然ですが、あなたのサイトはモバイルフレンドリーテストに合格していますか？ Webサイトがモバイルフレンドリー化されていないと、検索順位の低下など、深刻な影響を受ける可能性があります。 今回はモバイルフレンド […]
• canonicalとは？正しい使い方、NGな使い方を一挙に解説   canonicalって聞いたけど今一よくわからない、そんな悩みにお応えすべく簡単な概要から詳細な使い方までを紹介いたします。前半は概念を理解するための概要、後半はNGな使用方法や他の正規化タグとの違い […]
• 404エラーの原因と解決方法|マネしたい404エラーページのデザインも紹介します 普段Webサイトを閲覧している時に、真っ白な背景に「お探しのページは見つかりませんでした」「404 not […]
• h1とは？基礎知識と注意事項をご紹介します h1が適切に設定されていないと、クローラーにWebページの内容をきちんと把握してもらえず、せっかく作ったコンテンツが低評価になる可能性があります。 ｈ1の基礎知識と設定方法について詳しく紹介するので、適切なh1を設 […]
• robots.txtに関する基礎知識と正しい書き方を解説   robots.txtについてご存知でしょうか？もし誤った使い方をしていると、評価してほしいWebサイトがクロールされず、SEOにおいて致命的な問題となる場合があります。 今回はrobots.tx […]

筆者紹介

片山 岳（katayama gaku）

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

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

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

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