ファイナルSEO　公式ブログ Final SEO

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

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

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

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

目次

コメントアウトの概要

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

コメントアウトとは？

コメントアウトとは…

「文字（コメント）」や「コード」をエディタ上に残しながらも、Webブラウザ上では非表示にすることです。

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

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

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

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

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

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


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

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

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

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

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

 

コメントアウトの注意点

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

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

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

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

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

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

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

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

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

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

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

CTA-IMAGE
CTA-IMAGE

関連記事

筆者紹介

本当に効果のあるSEO対策をしませんか？

CTA-IMAGE ファイナルSEOは運営10年以上の実績を誇り、日本全国の企業へ常に最先端のSEOソリューションを提供し続けてきました。 『SEOはサイト運営の基本だからこそ、一時しのぎではなく長く効果をもたらすものを』 その想いからファイナルSEOでは長期的に効果が持続する本質的なSEO対策に取り組んでおり、事実4,200以上の企業から選ばれています。
メール無料相談はこちら

サイト内部対策カテゴリの最新記事