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

この記事は [J2complexed Advent Calendar 2016](http://qiita.com/advent-calendar/2016/j2complexed) の7日目です。

誰も書かないようなので、こっそり埋めちゃいますよー。

# Consoleのこと、知ってますか？
Webのフロントエンドで制作をしたことがある人なら、一度はお世話になってるかと思います。
そうです。 `console.log()` です。
みんな、Consoleのことが好きですよね？JavaScriptのデバッグするときには、相棒と呼んでも過言ではないです。
Consoleオブジェクトにはメソッドがいくつか用意されているんですが、使い分けてますか？

### console.count()
呼び出された回数を指定したラベル毎にカウントしてくれます。

```js
console.count('ねこ')
// ねこ: 1
console.count('いぬ')
// いぬ: 1
console.count('ねこ')
// ねこ: 2
```
この処理を何回と通ってるんだろうとか、知りたいときには欠かせません。

### console.group()
死ぬほどバグの原因がわからないときって、とにかく `console.debug()` を書きまくると思うのですが、そんなときにこれでグループ化しておけば、見やすくなくなりますよ！

```js
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()` を使ったりしてます。
基本的にはできるだけ残しませんが、あとあとトラブルが起こったとき用に、要点のみ残すようにしてます。

### 文字列の置換とか
ただ変数の中身を表示してたりすると、何のことだかわからなくなってしまうので、何かしらの文字列と一緒に表示することがありますよね。
そのときに+でつなげたりとかめんどくさいじゃないですか。
なので、置換で表示します。

```js
var cat = 'とらねこ'
console.log('このねこは、%sです。', cat)
// このねこは、とらねこです。
```

# console.logであそぶ
ここまで `console.log()` を知れば、遊びたくなってきますよね！？
みんなのためにつくりましたよ！クリスマスツリー！しかも、アニメーションしますよ！

```html
<!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がおすすめです。
これをブラウザのデバッグコンソールでみるとこうなります。

![20161207.gif](https://qiita-image-store.s3.amazonaws.com/0/109382/3d51ce8f-864b-2463-28fb-245fd54c4344.gif)

※ 何の役にも立たないので技術的な解説はしませんよ。

# 参考
今回は今回は時間もなかったので、さっくりと説明してますので、もっとマジメな資料から学ぶことをオススメします。
https://developer.mozilla.org/ja/docs/Web/API/console
http://qiita.com/ykyk1218/items/0f5858d077d43a49cfe2

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