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

まとめ

ようやく、クリスマスっぽい記事がかけたと思いますが、どうでしょうか！？

console.log()でアニメーションするクリスマスツリーをつくってみた