【知識】様々なコードのコメントアウト（HTML、CSS、JS、PHP他）

文中の説明画像をクリックすると拡大します。

Pocket

コメントアウトはどんなときに使うのか？
1. コメントアウトとは何か
2. コメントアウトのメリットとデメリット
いろいろなコードのコメントアウト方法
まとめ

コメントアウトはどんなときに使うのか？

コメントアウトとは何か

Webページやプログラムを作成する場合には、それぞれの言語のコードを書いていきます。

コードを書いていく中で、コードを削除せず無効化する方法をコメントアウトと言います。

コメントアウトしたコードは、コードを実行しても読み込まれませんが、コードの中にはそのまま残っています。

つまり、「書いてあっても有効ではない」という状態で、コメントを解除すれば再び有効なコードになります。

コメントアウトは、以下のような理由のためにすることが多いと思います。

一時的にその部分を保留にする
削除すると忘れてしまうので、無効にしたまま書いておく
変更履歴を残しておく
コードの中の「メモ書き」として使う

上記の通り、コメントアウトは、コードの有効な部分と区別して見ることができるので、開発者用の「注釈」「注意書き」などにも利用できます。

コメントアウトのメリットとデメリット

コメントアウトを使えば、以下のようなメリットが得られます。

変更前のコードを、プログラムの中に残しておける
使うときには、無効化したコードを再び有効化するだけ
注釈として使えば、コードをわかりやすくできる

ただし、使いすぎるとどこが本来使うコードなのかわかりにくくなる可能性もあるため、適宜使う必要があります。

いろいろなコードのコメントアウト方法

代表的なプログラムのコードの、コメントアウト方法をご紹介します。

HTMLのコメントアウト

Webページを作るときには、HTMLという言語のソースを書きます。

「ソース」とは、テキストや画像・プログラムなどを表示・動作させるための元となるコードの集合体です。

HTMLのソースは、そのWebページを開いたとき、ブラウザのメニューで「ソースを表示」などで確認することができます。

HTMLのコードは、を使ってコメントアウトします。

HTMLのソースを表示すれば第三者にも見られるので、見られたくない内容はコメントアウトではなく「削除」しておいた方が良いでしょう。

一文でも複数行でも、コメントアウトは使えます。

【使用例】

<body>
<h1>コメントの書き方</h1>
<p>本文</p>
<!-- 一行のコメントアウト -->
<!-- 複数行の
コメントアウト
-->
</body>

そもそも、HTMLって何だっけ？という方はこちらをご覧ください。

【基本】HTMLって何？

HTMLは、Webサイトの構造を作るための言語です。Webサイトを構成する要素に役割を与える「目印」のようなものです。Webサイトを構成する要素を「開始タグ」と「終了タグ」で囲むようにしますが、一部「終了タグ」が要らない場合もあります。

CSSのコメントアウト

Webページの装飾やレイアウトなどを行うときには、CSSのコードを書きます。

CSSのコードは、/* */で囲んでコメントアウトします。

ソースには、コメントアウト部分も表示されます。

【使用例】

body {
background: #FFFF;
}

/*
div {
background: #FFF;
color: #000;
}
*/

そもそも、CSSって何だっけ？という方はこちらをご覧ください。

【基本】CSS（カスケーディングスタイルシート）って何？

CSS（シーエスエス）とは、「カスケーディングスタイルシート」と呼ばれるもので、Webサイトのレイアウトやデザインなど「見た目」を操作・制御するための言語のことです。

PHPのコメントアウト

プログラムを書くときに使用するコードの一つに、PHPがあります（WordPressは、主にPHPで構築されています）。

PHPのコードは、/* */で囲むか、または//を使用してコメントアウトします。

/* */は、複数行をコメントアウトするときに使う方法です。

【使用例】

<?php /*
複数行のコメントアウトです。
ソースに表示されません。
*/ ?>
<?php // 一文のみのコメントアウトです。ソースに表示されません。?>

PHPって何だっけ？という方はこちらをご覧ください。

【知識】PHPって何？

PHPは、サーバーサイドで動作するプログラミング言語で、動的にページを生成することができます。プログラミング言語にはコンパイル言語とスクリプト言語がありますが、PHPは記述されたソースコードを一行ずつ機械語に翻訳しながら実行するスクリプト言語です。

JavaScriptのコメントアウト

Webページで、動きを表現したり何かを判別したりするときなどに、JavaScriptという言語を使います。

JavaScriptのコメントアウトの方法も、PHPと同じです。

/* */で囲むか、または//を使用してコメントアウトします。

JavaScriptでも、複数行のコメントアウトは/* */を使います。

【使用例】

<script>
// 一文だけコメントアウト
document.write("Hello world!!");
</script>

<script>
/* 複数行で
コメントアウトする
*/
console.log("Hello \n World!!")
</script>

JavaScriptって何だっけ？という方はこちらをご覧ください。

【基本】Javascriptって何？

JavaScript（ジャバスクリプト）は、ブラウザ上で動作するプログラミング言語です。JS（ジェイエス）と略されることもあります。動きのある仕掛けやサーバーとの連携などの機能を追加するために、JavaScriptが使われます。

.htaccessのコメントアウト

.htaccessのコメントアウトは、#を使います。
複数行のコメントアウトは、1行ごとに#をつけていきます。

【使用例】

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
</IfModule>
# END WordPress

WordPressのコメントアウト

WordPressでは、これまで紹介した言語全てを連携して使用します。

それぞれの言語に合わせて、コメントを記述しましょう。

HTMLのコメントアウト :
CSSのコメントアウト : /* */
PHPのコメントアウト : /* */ または //
JavaScriptのコメントアウト : /* */ または //
.htaccessのコメントアウト : #

WordPressって何？という方はこちらご覧ください。

【基本】WordPress（ワードプレス）って要するに何？

WordPressとは、ブログやサイトが簡単に作れる無料のCMSです。以前はMovable Typeが人気でしたが、現在では圧倒的なシェアを誇るのはWordPressです。

C言語のコメントアウト

C言語のコメントアウトは、/* */ または //を使います。
PHPやJavaScriptのコメントアウト方法と同じです。

【使用例】

#include <stdio.h>
int main(void)
{
// printf("HelloWorld");
/*
printf("Hello");
printf("World");
*/
return 0; }

Pythonのコメントアウト

Pythonは、1行のコメントアウトは#を使います。
複数行のコメントアウトは、'(シングルクォーテーション)または"(ダブルクォーテーション)のどちらかを3つ繋げて使います。

【使用例】

# Hello worldを表示する
print "Hello world"
'''
複数行の コメントアウト
'''

まとめ

Webページやプラグラムなどの様々なコードにおいて、コメントアウトの方法が用意されている。
不要なコードを整理するとき、再度使うかも知れないコードは、削除するのではなくいったんコメントアウトしておけば、将来すぐに再利用できるので便利。
コメントアウトは、開発者向けにコードに注釈などを加えるときにも、使える。

Pocket