自己紹介
じゅんじゅんというニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。
HAL大阪の新2回生です👍 (2016.7.18現在)
よくstart up系イベントに行くので、大阪らへんの方は会いましょう！
Twitter @konojunya
では、早速。
console.log知ってる？
はい。ふざけるんじゃねぇと。
よく使いますよと言いたげなそこのフロントエンドエンジニア。
え、サーバーも使いますよと言いたげなバックエンドエンジニア。
しかし、今回は前者、フロントエンドの方向けな記事である。
console.log言わずとしれた、魔法の呪文。
この魔法の呪文を使うときは、そう変数の値確認や動作のチェック、デバッグに使ったりしますね。
一応使い方。
console.log("Hello world");
まぁわかりますよ。やったことない人はいますぐこのブラウザの開発者ツールを開いてコピペ&エンター！
そして、事件は起こりました。
ある日のこと
僕は、ある日お腹を空かせていてcookpadさんを眺めていました。
「あぁ〜うまそう〜〜」
美味しそうなレシピを眺めている時、僕は癖のように開発者ツールを開いていました。（嘘）
するとこれ。
いやまじで？
consoleにcssらしきものをつけられるの！？
はい。つけれます。
console.logにスタイルを適用する
スタイルを適用するのはとても簡単です。
例えば、hello worldを赤文字で出力したいとします。
普段のコードなら
console.log("Hello world");
ですが、赤文字にするには
console.log("%cHello world","color:red;");
%cを文字列中に入れて、第二引数にcssを指定すればいいだけです！
はい簡単！
他にもfont-sizeなどで大きくしていたり、background-colorも使えるようです。
これからはコンソールも装飾する時代！使いこなしましょう！