この記事は J2complexed Advent Calendar 2016 の7日目です。
誰も書かないようなので、こっそり埋めちゃいますよー。
Consoleのこと、知ってますか？
Webのフロントエンドで制作をしたことがある人なら、一度はお世話になってるかと思います。
そうです。 console.log() です。
みんな、Consoleのことが好きですよね？JavaScriptのデバッグするときには、相棒と呼んでも過言ではないです。
Consoleオブジェクトにはメソッドがいくつか用意されているんですが、使い分けてますか？
console.count()
呼び出された回数を指定したラベル毎にカウントしてくれます。
console.count('ねこ')
// ねこ: 1
console.count('いぬ')
// いぬ: 1
console.count('ねこ')
// ねこ: 2
この処理を何回と通ってるんだろうとか、知りたいときには欠かせません。
console.group()
死ぬほどバグの原因がわからないときって、とにかく console.debug() を書きまくると思うのですが、そんなときにこれでグループ化しておけば、見やすくなくなりますよ！
console.debug("ペット")
console.group()
console.debug("ねこ")
console.group()
console.debug("とらねこ")
console.debug("くろねこ")
console.groupEnd()
console.debug("いぬ")
console.groupEnd()
// ペット
// console.group
// ねこ
// console.group
// とらねこ
// くろねこ
// いぬ
使い分けとか
さり気なく書きましたが、debug時のログは console.debug() で、通常時に表示させるのは console.log() ってかき分けたりしてます。
同じものですが、デバッグ後に残っていていいものなのか、判断するときにも役立ちます。
あと、バージョン情報とか表示するときには console.info() 、通信エラーとかでは console.error() を使ったりしてます。
基本的にはできるだけ残しませんが、あとあとトラブルが起こったとき用に、要点のみ残すようにしてます。
文字列の置換とか
ただ変数の中身を表示してたりすると、何のことだかわからなくなってしまうので、何かしらの文字列と一緒に表示することがありますよね。
そのときに+でつなげたりとかめんどくさいじゃないですか。
なので、置換で表示します。
var cat = 'とらねこ'
console.log('このねこは、%sです。', cat)
// このねこは、とらねこです。
console.logであそぶ
ここまで console.log() を知れば、遊びたくなってきますよね！？
みんなのためにつくりましたよ！クリスマスツリー！しかも、アニメーションしますよ！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>console</title>
</head>
<body style="height: 100%;">
<div id="clear" style="width: 200px; height: 40px; margin: auto; line-height: 40px; border: 1px solid black; text-align: center;">clear</div>
<script>
var intervalID = window.setInterval(animateConsole, 2000)
var count = 0
var LOG_STYLE_GREEN_RED = 'background-color: green; color: red;'
var LOG_STYLE_GREEN_YELLW = 'background-color: green; color: yellow;'
var LOG_STYLE_YELLOW = 'color: yellow; font-size: 200%;'
var LOG_STYLE_BROWN = 'background-color: brown;'
var LOG_STYLE_WHITE = 'background-color: white;'
var illuminationStyles = [
LOG_STYLE_GREEN_RED,
LOG_STYLE_GREEN_YELLW
]
function animateConsole()
{
console.clear()
console.log(
'%c %c★\n' +
'%c %c ●\n' +
'%c %c● \n' +
'%c %c ●\n' +
'%c %c ● \n' +
'%c %c ● ●\n' +
'%c %c ● ● \n' +
'%c ● ● \n' +
'%c %c \n' +
'%c %c \n' +
'%c %c \n'
, LOG_STYLE_WHITE, LOG_STYLE_YELLOW
, LOG_STYLE_WHITE, illuminationStyles[count%2]
, LOG_STYLE_WHITE, illuminationStyles[(count+1)%2]
, LOG_STYLE_WHITE, illuminationStyles[count%2]
, LOG_STYLE_WHITE, illuminationStyles[(count+1)%2]
, LOG_STYLE_WHITE, illuminationStyles[count%2]
, LOG_STYLE_WHITE, illuminationStyles[(count+1)%2]
, illuminationStyles[count%2]
, LOG_STYLE_WHITE, LOG_STYLE_BROWN
, LOG_STYLE_WHITE, LOG_STYLE_BROWN
, LOG_STYLE_WHITE, LOG_STYLE_BROWN)
count++
}
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', function() {
clearInterval(intervalID)
})
</script>
</body>
</html>
chromeでみると、チラつくのでfirefoxがおすすめです。
これをブラウザのデバッグコンソールでみるとこうなります。
※ 何の役にも立たないので技術的な解説はしませんよ。
参考
今回は今回は時間もなかったので、さっくりと説明してますので、もっとマジメな資料から学ぶことをオススメします。
https://developer.mozilla.org/ja/docs/Web/API/console
http://qiita.com/ykyk1218/items/0f5858d077d43a49cfe2
まとめ
ようやく、クリスマスっぽい記事がかけたと思いますが、どうでしょうか！？