コメントアウト とは何か、から始まり、FC2ブログでの活用方法などを記しています。以前にも記事にしたことのある内容ですが改めて新規でUPします。
コメントアウト とは
コメントアウト(comment out) というのは、コンピュータに関連するソースコードを 一時的に無効化したり、注釈などを付けたりすること を指します。
基本は「無効化」なんですけども、その性質上、文字列等がプログラムとしては無効になりますので、覚書・メモ的に利用することも可能です。
FC2ブログユーザーが利用するコンピュータ言語は主に
- html
- CSS
- Javascript (jQueryなどライブラリ含む)
の3種に絞られます。そしてそれぞれでコメントアウトを活用することができます。特に テンプレートのカスタマイズ をする際、デフォルトの内容に個人的な何かを追加・付加することがあると思います。追加内容はユーザー個人の管理化にあり、コメントアウトがその管理を楽にしてくれる可能性がありますので、使い方を覚えて積極的に利用されると良いと思います。
基本の使い方① 無効化
まずはCSSを例にし、例えば以下のような内容がテンプレートのスタイルシートに記されているとします。
.xxx {
margin: auto;
color: red;
}この意味は「xxxというclass名を持つ要素は margin が上下ゼロ、左右は auto、文字色は 赤」です。仮にこの赤字を嫌って無効にしたい場合
.xxx {
margin: auto;
/* color: red; */
}コメントアウトの開始を示す記号が /* で、終了を示す記号が */ です。この記号に挟まれた内容が コメント で、CSSのソースコードとはみなされれず単なる文字列として無視されます。つまりこれが「無効化」です。
またあるいは以下のようにした場合には
/*
.xxx {
margin: auto;
color: red;
}
*/.xxx に対するmargin指定もcolor指定も全てルールセットごと無効になります。CSSのひとつのまとまりのことを ルールセット(ruleset) と言いますので、この機会に覚えておかれると今後役に立つかもしれません。
開始記号と終了記号それぞれで1行取る必要はありませんので
/*.xxx {
margin: auto;
color: red;
}*//* .xxx {
margin: auto;
color: red;
} */これでもOKです。見やすさの面でも、開始・終了記号とコメントとの間には半角スペースを設けておくと良いと思います。ただし日本語圏のみなさんはうっかり 全角スペースを打ってしまうことがある ので、無理に入れる必要はありません。開始記号右・終了記号左の半角スペースにしろ全角スペースにしろ、それも「コメント(無効対象)」とみなされますので、仮に全角であってもエラーではありませんが、html, CSS, JS を繰る際は全角スペースは絶対に使用しない ことを心がけてください。
基本の使い方② 注釈・メモ・覚書
コメントアウトの性質を利用してメモ的に使う場合。今度はhtmlを例にとります。
<p class="xxx">あいうえお</p>
上記のような内容をテンプレートに追加したとします。これは自身の希望で記載するもので、テンプレートのデフォルト内容ではない、とします。しかし自分で入れたとはいえ結構な確率で忘れてしまうんですね ^^;
あとから見て「なんのこっちゃわからん」という経験があったりなかったり。
サンプルはごく単純な内容ですが、見た目にも難解なものを記載することもあると思います。例えば アクセス解析系のなにがし また例えば どこかの指南を見ながら導入したなにがし など。そういうときはコメントアウトの出番です。
<!-- 自分で追加したもの, 近況報告用 -->
<p class="xxx">あいうえお</p>あくまでも例えです。何故入れたのか、何のために入れたのか などをメモしておけば管理がしやすいですね。
先に説明をした「ソースコードの無効化」ではありません。理屈わかりますでしょうか。htmlでは何か文字を記せばそれがそのままページに表記されます。けれども「無効」を意味するコメントアウト化を行っているため、htmlのコメントアウト記号 <!-- と --> に挟まれている「自分で追加したもの, 近況報告用」の文字列は無視されて、ページには表記されません。なのでつまるところコメントアウトというのは本来は「無効化」なんですね。特性を上手く利用してメモに使えるよ、と。
仮に以下のようにした場合
<!-- 自分で追加したもの, 近況報告用
<p class="xxx">あいうえお</p> -->記号に挟まれたものは全て無効になるわけですから、「あいうえお」の文章もページに現れることはなくなります。
html, CSS, JS それぞれのコメントアウト記号
それぞれに異なった記号を用いますので注意してください。
| 言語 | 開始記号 | 終了記号 |
|---|---|---|
| HTML | <!-- | --> |
| CSS | /* | */ |
| Javascript | 一行の場合 // | 一行の場合 なし |
| 複数行の場合 /* | 複数行の場合 */ |
JSが少し特殊・複雑なので後述します。
htmlコメントアウト
例1) 覚書を記す
<!-- 以下は材料リスト -->
<ul>
<li>粘着テープ</li>
<li>ペンキ</li>
<li>ホワイトボード</li>
</ul>
描画結果
例2) 全部無効化
<!-- 以下は材料リスト
<ul>
<li>粘着テープ</li>
<li>ペンキ</li>
<li>ホワイトボード</li>
</ul> -->
描画結果
例3) 覚書 + 一部無効化 (コメントは2つ)
<!-- 以下は材料リスト -->
<ul>
<li>粘着テープ</li>
<!-- <li>ペンキ</li> -->
<li>ホワイトボード</li>
</ul>
描画結果
CSSコメントアウト
例1) 覚書を記す(コメントは2つ)
/* ボックスの整形 */
.mybox {
background: #ffc1e0;/* ボックス背景色 */
color: #333;
padding: 1em;
font-weight: bold;
}
描画結果(対応するhtml内容は画像内に記しています)
例2) 全部無効化
/* ボックスの整形
.mybox {
background: #ffc1e0;
color: #333;
padding: 1em;
font-weight: bold;
} */
描画結果(htmlは存在しているがスタイルが失われた様子)
例3) 覚書 + 一部無効化 (コメントは3つ)
/* ボックスの整形 */
.mybox {
/* background: #ffc1e0; */
color: #333;
/* padding: 1em; */
font-weight: bold;
}
描画結果
JSコメントアウト
Javascriptの場合は 1行か複数行か そして html要素なのか純粋なJavascriptなのか によって使い分ける必要があります。一般ユーザーさんがJS内容に覚書をつけることはよほど無いだろうと思いますしちょっと混乱するかもしれませんが、読み進めて頂ければと思います。しんどいな、と感じる方は重要な一部以外読み飛ばしで構わないと思います。「恐らく重要だろう」と思われる項目には「重要」と記します。
いわゆる Javascript とされるのは、以下の紫色の部位です。
<script>
console.log('Hello World1');
console.log('Hello World2');
console.log('Hello World3');
</script>JSの最初に <script>、最後に </script> という htmlタグ が付いています。テンプレートにJSを直に書き込むには必ずこうして script要素 にする必要があります。scriptタグで挟まれると全体は html要素 となるんですね。ちょっとここ混乱するかもしれません。
ともかくFC2ブログテンプレートに何らかのJSを直接書き込む場合はhtmlも絡んできますので、そこは注意が必要です。
まずscriptタグを無視してJS部位に注視します。
例1) 覚書を記す --- 一行コメントの場合
console.log('Hello World1');
console.log('Hello World2'); // ブラウザのコンソールログに「Hello World2」と書き出される
console.log('Hello World3');// の後ろが「コメント」扱いになりますので、「ブラウザの〜出される」までが該当ですね。このコメントは 必ず一行でなければいけません。 改行不可です。折返しは違いますよ。折返しというのはブラウザの横幅を狭くすると自動的に文章が下へ繰り越しますよね。それが「折返し」です。「改行」というのはEnterキーを押すなどして行を意図的に替えることを指します。ですから以下のようなものはダメ。
console.log('Hello World1');
console.log('Hello World2'); // ブラウザのコンソールログに↩
「Hello World2」と書き出される
console.log('Hello World3');「コンソールログに」の後ろにある ↩ は改行したことをわかりやすくするために入れたもので、実際には目視できません。とにかく // の場合コメント途中でのEnterキー押下はダメです。
また、// が開始の合図で、行末までがコメントになりますので、
console.log('Hello World1');
// console.log('Hello World2');ブラウザのコンソールログに「Hello World2」と書き出される
console.log('Hello World3');この場合にはJSの二行目が無効化されます。
例2) 覚書を記す --- 複数行コメントの場合
console.log('Hello World1');
console.log('Hello World2');
/*
ブラウザの
コンソールログに
「Hello World2」と
書き出される
*/
console.log('Hello World3');コメントが複数行に渡る場合はCSSと同じものを用います。
重要例3) 覚書を記す(コメントは2つ) --- script要素として見る場合
<!-- 以下はテスト用のJS -->
<script>
console.log('Hello World1');
console.log('Hello World2');
console.log('Hello World3');
</script>
<!-- テスト用のJSここまで -->FC2ブログのテンプレートカスタマイズの場合、利用頻度が最も高いのはこれだと思います。JS自体の関数だとかロジックの注釈をつけるのではなくて、このscript自体を実行するのかどうか、このscriptは一体何を実行するのかのメモですね。恐らくhtmlとして見るパターンが一番多いだろうと思います。
その場合はhtmlのscript要素なのですから、html用のコメントアウトを利用してください。JSの途中に入れるのは絶対にNGです。必ず <script> の上か左、</script> の下か右に記すことになります。要はscript開始タグと終了タグの内側に書いてはダメ、ということです。
重要例4) 無効化する(実行させない) --- script要素として見る場合
<!-- 以下はテスト用のJS
<script>
console.log('Hello World1');
console.log('Hello World2');
console.log('Hello World3');
</script> -->
こうですね。scriptの実行自体を避ける場合にはscript要素をコメントアウト。
JSについては他にも html like comments というのがあるんですが、後方互換のために利用するものなのでこのご時世なら無視して良いと思います。古いテンプレートなんかに使われていることがあります。ここで私が「script開始タグと終了タグの内側に書いてはダメ」と書いていますが、内側に書かれており、かつ // も混ざっているのがソレです。見かけたら「これかー (´・ω・｀)」ぐらいで良いと思います。
ハイフンは使用しない意気込みで
記号を覚えたら今度は「コメント」のルールなんですが、ハイフンを利用しない と心がけた方が良いですね。
例1) htmlコメント内ハイフン
<!-------------------- ここから -------------------->例2) htmlコメント内アンダースコア
<!--____________________ ここから ____________________-->例3) htmlコメント内イコール
<!--=============== ここから ===============-->
目立たせるために記号を使いたくなりますが、ハイフンは避けてください。実際は連続でなければ利用できるんですが、多くの方が連打してしまいます。なので「意気込み」として「使わない」
CSS, JSも同様です。他の場面でも、例えば 画像などのファイル名 などもハイフンはあまり良くないので、アンダースコアを使うようにされると良いと思います。
記号なしでコメントを打ってはならない
覚書をhtml, CSS, JS にベタっと書いてしまう方もいらっしゃるんですが、絶対的NGです。htmlの場合は表記されてしまうのですぐ気がつくんですが、CSS(スタイルシート)の場合はすぐにはわからないんですね。ですがクリティカルエラーですから、それ以降のCSSが無効化されてしまいます。「あれ？ここは赤文字を指定したのに効いてない？？」とかそういう感じです。
コメント内にコメントを入れ子することはできない
入れ子(nest, nesting)はできません。
例1) htmlコメントアウト内にコメント
<!-- コメント<!--コメント内コメント--> -->例2) CSSコメントアウト内にコメント
/* コメント/* コメント内コメント */ */デメリット
メリットは「ソースコード全体の管理のしやすさ」に繋がる点、そしてデメリットは ファイルサイズが増える 点です。実行や描画はされないとしてもバイト数カウントは行われますので、やたらに長いコメントをめいっぱい入れてしまうのは避けたいところです。不要と思われる場合は用いない、無理に付けない、と心がけましょう。
逆にプロジェクトなど、第三者に管理を託したり引き継いだりすることが明白であるならば、ファイルサイズを犠牲にしてもできるだけコメントをつけると良いかもしれません。FC2ブログのテンプレート製作者の立場がこれに該当しますので、意図的にコメントを付けている作者さんも少なくないと思います。
まとめ
コメントはちゃんとしたルールに則った利用をしないとレイアウトが崩れたり、スタイルが反映されない、JSが実行されないなど害が生じることがありますけれど、しっかり覚えてしまえば非常に便利です。
テンプレートのカスタマイズが好き、頻繁にテンプレートを変更する、記事内で割と複雑なhtmlを書いている、という方は是非活用されたし ('0')/
There are no comments yet.