コメントアウトとは？各言語ごとの記述の仕方を紹介

今回は、コーティング案件（HTMLやCSS）などで良く使われるコメントアウトについて、言語ごとの記述の仕方や利用シーン、注意点などを紹介します。（複数行の記述の仕方もあり）

コメントとは？

コメントとは、マークアップ言語やプログラミング言語の記述内に入れる事ができるソース上で動作しない（読み込まれない）言葉です。

下記の4行目と14行目のような<!–ここから表–>と<!–ここまで表–>の部分が実際のコメントの記述です。

<h2>ここにタイトルが入ります。</h2>
<p>ここにテキストが入ります。</p>
<figure class="wp-block-table">
<table class="">    <!--ここから表--->
<tbody><tr>
<td>表1</td>
<td>表1</td>
<td>表1</td></tr>
<tr><td>表1</td>
<td>表1</td>
<td>表1</td>
</tr></tbody>
</table>
</figure>  <!--ここまで表--->

HTMLやCSSのコーティングの最中に技術者がこの要素は何なのかを直ぐに把握出来るようにメモ書きとして残しておくのが一般的なコメントの使い方です。

下記の様に、1行目〜2行目の<h2>と<p>タグを丸々コメントアウトすれば、そこは表示されず、すぐに次の要素（table）が読み込まれます。

<!--   <h2>ここにタイトルが入ります。</h2>
<p>ここにテキストが入ります。</p>  --->
<figure class="wp-block-table">
<table class="">    <!--ここから表--->
<tbody><tr>
<td>表1</td>
<td>表1</td>
<td>表1</td></tr>
<tr><td>表1</td>
<td>表1</td>
<td>表1</td>
</tr></tbody>
</table>
</figure>  <!--ここまで表--->

いらない要素があった時に試しに消してみたいが、いきなり削除するのは怖いのでコメントアウトして様子を見るといった使い方が一般的です。逆に要素を追加したいけどまだ未完成なのでコメントアウトしとくなども良いと思います。

言語ごとのコメントの記述

面倒臭い事に、コメントの書き方は言語ごとに異なります。ここでは特に使用頻度の高い代表的なものを紹介します。

HTML

<!–コメント–>

以下、例）

<h2>タイトル</h2> <!--コメント-->
<p>テキストテキストテキスト</p>
<!-- <p><a href="https://kt-life.net/wpmanual/">リンク</a></p> -->

CSS

/*コメント*/

以下、例）

/*コメント*/
#sitename{
text-shadow:3px 3px 4px #777777;
/*font-size:55px;*/
}

php

一行限定

下記のコメントの記述は改行の出来ないコメントです。

#コメント or //コメント

以下、例）

add_filter( 'jetpack_implode_frontend_css', '__return_false' ); #コメント
function jeherve_custom_thumb_size( $get_image_options ) {
        $get_image_options['avatar_size'] = 75; //コメント
 
        return $get_image_options;
}

複数行

下記のコメントの記述は改行が可能なコメントです。

/＊コメント＊/

以下、例）

/* コメントアウト add_filter( 'jetpack_implode_frontend_css', '__return_false' );
function jeherve_custom_thumb_size( $get_image_options ) {
        $get_image_options['avatar_size'] = 75; 
        return $get_image_options;
}*/

JavaScript

一行限定

下記のコメントの記述は改行の出来ないコメントです。

//コメント

以下、例）

function altRan2() {
	var r = Math.floor(Math.random() * 6) +1; //コメント
  document.getElementById("sai").innerHTML = r; //コメント
}

複数行

下記のコメントの記述は改行が可能なコメントです。

/＊コメント＊/

以下、例）

/* コメントアウト function altRan2() {
	var r = Math.floor(Math.random() * 6) +1; 
  document.getElementById("sai").innerHTML = r; 
}*/

ショートカットキー

WordPressやテキストエディタでは基本的にコメントアウトのショートカットが用意されているかと思います。

良くあるショートカットキーは

command + /

です。ショートカットキーを使うと、その行のテキストがコメントアウトされます。また選択した場合はその部分のみがコメントアウトされます。（バージョンやテーマなどによって若干異なる場合もある）

実際の利用シーン

WEB制作の仕事では良くコメントアウトは多様します。

毎年恒例の行事、イベント、緊急の連絡、注目情報など年に1〜3回くらいしか更新せず、1週間程度しか掲載しないような内容だがトップの方に大きく出したいといった要望を毎回答えるためにその要素をコメントアウトして残しておき、要望があった際だけコメントアウトを解除するといった運用の仕方がよくあります。

ブログ運営の場合は、大量に記述してきたCSSの要素が何なのかをメモ書きとしてコメントを残すといった使い方がよくあります。

注意点

各記述の仕方で、閉じタグでコメントをしっかりと終わらせないと、下記のダメな例のようにその後のコードが全てエラーになります。もしくはコメントの閉じタグが見つかるまで永遠とコメントが続きます。

/*ダメな例
#sitename{
text-shadow:3px 3px 4px #777777;
font-size:55px;
}

また下記のダメな例のように、1行コメントの同じ行の後ろに書いたコードもコメント化されます。なので1行コメントを使う際は必ず行の最後尾に記述し、次の記述は改行する様にしましょう。

add_filter( 'jetpack_implode_frontend_css', '__return_false' ); #ダメな例function jeherve_custom_thumb_size( $get_image_options ) {
        $get_image_options['avatar_size'] = 75; //ダメな例 return　$get_image_options;
}

特に1行コメント付きのコードを整形ツールや圧縮などを行うと改行がなくなりエラーになる場合があるので注意が必要です。

以上が「コメントアウトとは？各言語ごとの記述の仕方を紹介」でした。

サイト運営、WEB制作、ブログ運営のどれにでも使える知識なので覚えておいて損は無いかと思います。コメントを有効に活用して、より運用しやすい記述を意識していきましょう。