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

Consoleのこと、知ってますか？

Webのフロントエンドで制作をしたことがある人なら一度はお世話になってるかと思います。

みんな、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()

ペット ▼ どうぶつねこ ▼ もようとらねこくろねこいぬ

使い分けとか

さり気なく書きましたが、debug時のログは console.debug() で、通常時に表示させるのは console.log() ってかき分けたりしてます。

同じものですが、デバッグ後に残っていていいものなのか、判断するときにも役立ちます。

あと、バージョン情報とか表示するときには console.info() 、通信エラーとかでは console.error() を使ったりしてます。

基本的にはできるだけ残しませんが、あとあとトラブルが起こったとき用に、要点のみ残すようにしてます。

文字列の置換とか

ただ変数の中身を表示してたりすると、何のことだかわからなくなってしまうので、何かしらの文字列と一緒に表示することがありますよね。

そのときに+でつなげたりとかめんどくさいじゃないですか。

なので、置換で表示します。

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

console.logであそぶ

ここまで console.log() を知れば、遊びたくなってきますよね！？

みんなのためにつくりましたよ！クリスマスツリー！しかも、アニメーションしますよ！

<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でアニメーションするクリスマスツリーをつくってみた

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

Kaneko Takeshi

More Decks by Kaneko Takeshi

Other Decks in Technology

Featured

Transcript