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

Programming

今回は、コーティング案件(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制作、ブログ運営のどれにでも使える知識なので覚えておいて損は無いかと思います。コメントを有効に活用して、より運用しやすい記述を意識していきましょう。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました