みなさんこんにちわ。
アラタナの岡本隼人です。
僕は日々HTML、CSS、Javascriptのコーディングをしてるわけです。
いつもならさささーっと終わらせるコーディング作業。
あくまで作業。
そうさささーっとね。
終わらせるわけです。
とある日。
いつも通りさささーっといつも通り終わらせようと考えてたわけです。
今日はちょっとJavascriptでちょっとした動きつけちゃうよーって感じで。
何気なーくデバッグ。
うんうん。
できてるできてる。
ん〜・・・
ん〜・・・・・・
なんでこんなChromeのconsoleって味気ないんだろ。
そこでふと何気なーくググるわけです。
ありました。
ありましたよ。
console.logを装飾！！！
正直一切何も生み出さないであろう機能。
でもせっかくなんでやってみます。
うん。普通のlogですね。
いつも通り'こんにちわ世界'。
ちなみに下のように普通に出しました。
console.log('Hello World!')さて。
では早速。
まずコンソールに出したい文字に装飾するために「%c」というフォーマット指定子を書いちゃいます。
console.log('%cHello World!')この様に書きます。
次に装飾していきます。
console.log('%cHello World!', 'background-color: #f00')早速見てみましょう。
おおおお！
背景赤になった。
すごい刺激的。
僕らコーディングする人にとっては原色が一番目をやられるわけですが。
もうちょっと見やすく！
えい。
できました！
なんだろう。この。すごい無駄な感じ。
そんな無駄な時間も大好きです。
何気ない日々に彩りを加えて上げるだけでいつもとは違う世界が見えてきますね。
Hello World!!!
ちなみに３つ目の写真のコード書いときます。
console.log('%cHallo World!', 'background-color: #CBC2FF; color: #000; padding: 20px 20px 5px; font-size: 20px; border: 1px solid #999; border-radius: 5px;')