コメントアウトを活用する「教えてマリオ」

• 2012年4月5日
• technique

ソースコード整理したり、一時的に隠しておきたいときに便利なのがコメントアウトです。 ここではコメントアウトの使い方を説明していきます。

1. コメントアウトとは?
2. 一時的に無効にする
3. 目印として活用する
4. かっこいいコメントアウトを考える
5. HTML以外のコメントアウト方法

1.コメントアウトとは？

コメントアウトとは実際に消すのではなく無効化することを言います。なぜ消さずに無効化するかというと、目印として使う場合と、お客さんにある部分を一度取ったものが見たいとか言われることが多いのですが、このような場合あとで復活する場合があるので消してしまうとまたタグを書きなおさなければいけなくなるので一時的に無効化しておくと復活するときにすごく便利です。

コメントアウトのやり方は

<!--ここに目印となる文字または一時的に無効にしたいものを入れる-->

簡単に説明すると<!- –と– ->で挟んだものが表示されない、無効になるということです。

2.一時的に無効にする

先ほど述べましたがお客さんにある部分を一度取ったものが見たいとか言われることがよくあります。ここではお客さんに表（tableタグ）を消してくれと頼まれたとします。 こんな感じで作っていたとします。

<table>
    <tr>
        <th>商品名</th>
        <th>金額</th>
    </tr>
    <tr>
        <td>リンゴ</td>
        <td>１００円</td>
    </tr>
    <tr>
        <td>みかん</td>
        <td>１５０円</td>
    </tr>
</table>

これを一度消してくれと頼まれたとき本当に消してしまうと復活するとなった時にまた書かないといけなくなるので、コメントアウトします。

<!--
<table>
    <tr>
        <th>商品名</th>
        <th>金額</th>
    </tr>
    <tr>
        <td>リンゴ</td>
        <td>１００円</td>
    </tr>
    <tr>
        <td>みかん</td>
        <td>１５０円</td>
    </tr>
</table>
-->

以上でお客さんには消えた状態になります。元に戻してといわれても<!- –と– ->を外せばすぐに元通りになります。すごく便利ですね。

3.目印として活用する

上記以外にもコメントアウトは目印にも使えます。活用例として閉じタグがどの閉じタグかわかりやすく目印代わりにすることが多いです。ここではインデント（スペース）をいれてよりわかりやすくしたものとそうでないものの例を挙げます。

目印のコメントアウトがなくスペースも入れていない場合

<div id="wrapper">
<div id="header">ここはヘッダー</div>
<div id="leftcont">
<div id="leftcopy">
レフトコントのコピー
</div>
</div>
<div id="rightcont">
<div id="rightcopy">
ライトコントのコピー
</div>
</div>
<div id="footert">ここはフッター</div>
</div>

divタグをたくさん使っていてどれがどの閉じタグがわからなくなってしまいます。上記のようにタグの中にタグを入れることを入れ子といいます。ホームページを作るときはほぼこのような状態になります。そこでどれがどの閉じタグかわかりやすくするためにコメントアウトを使って目印を置き、インデント（スペース）を使って入れ子になっているタグは一段落下げてあげるとすごく見やすくなります。

目印のコメントアウトをいれてスペースも入れた場合

<div id="wrapper">
    <div id="header">ここはヘッダー</div><!--header_end -->
    <div id="leftcont">
        <div id="leftcopy">
            レフトコントのコピー
        </div>
        <!--leftcopy_end -->
    </div>
    <!--leftcont_end -->
    <div id="rightcont">
        <div id="rightcopy">
            ライトコントのコピー
        </div>
        <!--rightcopy_end -->
    </div>
    <!--rightcont_end -->
    <div id="footert">ここはフッター</div><!--footer_end -->
</div>
<!--wrapper_end -->

今回は書いている量が少ないのであまりわかりやすくなった感じはしませんが上記のようにどれがどの閉じタグかコメントアウトで記述し、入れ子になっているものはインデント（スペース）を入れてあげたほうが見やすいと思います。マリオデザインではインデントはキーボードのtabを使用してスペースを入れています。

今回は閉じタグの後ろに<!- -ID名_end – ->と書きましたがここはみなさんおわかりやすいように入れてください。<!- -ヘッダーの終わりのタグ- ->とわかりやすく日本語で書いてもOKです。

閉じタグだけでなく開始タグに入れたり、ブロックごとに入れたりわかりやすくコメントアウトをたくさん使いましょう。
コメントアウトは自分がわかりやすくするためだけでなく、ほかの人がデータを直すことがある場合もあるので、ほかの人のためにもなるべく入れるようにしましょう。

＊コメントアウトの目印はわかりやすくするものなので、逆にわかりずらくなるとか入れなくても十分わかるという方は必須ではないので入れなくていいと思います。

4.かっこいいコメントアウトを考える

コメントアウトはわかりやすくするものですが、なるべくカッコよくスマートに書きたいものです。ここでは色々なコメントアウトを考えてみたいと思います。

①閉じタグに英語で入れる

<div id="header">
    ここにヘッダーの内容を入れる
</div>
<!--header_end -->

②閉じタグに日本語で入れる

<div id="header">
    ここにヘッダーの内容を入れる
</div>
<!--ヘッダーここで終わり-->

③開始タグ閉じタグに記号を使って入れる

<!--▼header_start▼-->
<div id="header">
    ここにヘッダーの内容を入れる
</div>
<!--▲header_end▲-->

④開始タグ閉じタグに記号を使って入れる2

<!--↓↓↓header_start↓↓↓-->
<div id="header">
    ここにヘッダーの内容を入れる
</div>
<!--↑↑↑↑header_end↑↑↑-->

⑤開始タグ閉じタグにアスキーアートを使って入れる

<!--o(*^▽^*)o ヘッダー始まり-->
<div id="header">
    ここにヘッダーの内容を入れる
</div>
<!--Σ（ﾟдﾟlll）ヘッダー終わり-->

いろいろ考えました使いやすくわかりやすいものでがんばってください。
私はこんなコメントアウトを使っている、こんな方法がある、などありましたら、メッセージお待ちしております。

5.HTML以外のコメントアウト方法

最後にHTML以外のコメントアウト方法を説明いたします。

CSSのコメントアウト方法

/*と*/でコメントアウトしたいものを挟む
例・背景のプロパティをコメントアウトする場合。

body {
	margin:0;
	padding:0;
	/*background:#000;*/
}

JAVASCRIPT・ACTIONSCRIPT・PHPのコメントアウト方法

１行をコメントアウトする場合
コメントアウトしたい行の先頭に//（スラッシュスラッシュ）を入れる

例

if(window.addEventListener) {
	//window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
	window.attachEvent("onload", smartRollover);
}

複数をコメントアウトする場合はCSSと同じで/**/で挟む

例

if(window.addEventListener) {
	window.addEventListener("load", smartRollover, false);
}
/*
else if(window.attachEvent) {
	window.attachEvent("onload", smartRollover);
}
*/

以上でコメントアウトに関する投稿を終わります。自分に合ったやり方でたくさんコメントアウトしていきましょう。