Javascriptでプログラミングしている時に、実行中に変数の値などを確認する時に、console.log機能を使いますが、このconsoleを使いこなすと、開発効率が大幅に効率化できます。
開発だけじゃなく、エンドユーザーへの表示デザインなども工夫できるため、機能を理解して見たいと思います。
consoleについて
リファレンスサイト :
https://developer.mozilla.org/ja/docs/Web/API/console
基本的な機能についてはリファレンスサイトに書かれていますが、無駄な機能も書かれていたり、サンプルが不足しているので、これを読んだだけでは、本番で使えません。
主に使う機能は次の通りです。（自分の場合）
console.log(example)
console.warn(example)
console.error(example)
console.assert(example)
console.dirや、console.debugなども使っても良いんですが、上記のモノとあまり使い勝手が変わらないので、他の機能はあまり使いません。（個人的にですが）
console.log
これは基本中の基本ですが、コンソールウィンドウに文字を表示するための処理です。
console.log(a , b , c)と言うふうに、,(カンマ)で区切ることで便利に変数などを追記することができます。
console.log(a + b + c)と書いてもいいんですが、区分けがされないので、カンマ区切りがおすすめです。
また、console.log({a:b})という風にオブジェクト型や配列データなども、リスト展開してくれて便利なんですよね。
console.log({a:b})
{a: 100}
a: 100
[[Prototype]]: Object
console.log([1,2,3])
(3) [1, 2, 3]
0: 1
1: 2
2: 3
length: 3
console.warn
console.warnは、オレンジ色の背景で表示をしてくれるので、コンソール画面で目立たせることができます。
console.error
console.errorは、実はプログラミングでは、あえて使わないようにしています。
理由は、javascriptの実際のエラーとの区別がつきにくくなるからです。
この表示をみると、開発者はドキッとしてしまうことでしょう。
prefixとして、文字列でコードエラーなのか、consoleでのエラー表示なのかを分別してもいいんですが、コンソール画面で求められるのは、見た目の直感です。
ここは、好き嫌いが分かれるところかもしれないので、使いたい人は使う、使いたくない人は使わないというレベルで十分でしょうね。
console.assert
assertと聞くと、ユニットテストっぽくてなんか使っていてカッコイイ感じがしますよね。
console.assert(flg , 'message...')
第1引数のflgがfalseの場合に、以降のmessageが表示されます。
trueの場合は、messageが表示されません。
ちなみに、false以外でも、null , undefined , ""(blank) , NaN の場合でも、messageが表示されます。
ユニットテストっぽく使うことができますね。
console関数をstyleで装飾
見た目にこだわりたい場合は、console.logの中でcssのstylesheetが一部使うことができます。
簡単なサンプルを作ってみたので、これを見てもらったほうが早いでしょう。
console.log("%c"+'red' , 'color:red;')
console.log("%c"+'blue + bold' , 'color:blue;font-weight:bold;')
console.log("%c"+'background - black' , 'color:white;background-color:black;padding:5px;')
console.log("%c"+'text-shadow' , 'text-shadow:2px 2px 1px rgba(0,0,0,0.3);')
console.log("%c"+'border-line (lime)' , 'border:1px solid lime;padding:5px;')
console.log("%c"+'orange' , 'background-color:orange;padding:5px;color:white;')
console.log("%c"+'text-transform' , 'text-transform:capitalize;')
console.log("%c"+'margin' , 'border:1px solid black;margin:10px;padding:2px;')
console.log("%c"+'text-decoration' , 'text-decoration:underline;')
console.log("%c"+'font-style' , 'font-style:italic;')
console.log("%c"+'font-family' , 'font-family:cursive;')
console.log("%c"+'line-height\nvalue:3' , 'line-height:3;')
console.warn('normal-warn')
console.warn("string-color is %cred%c." , 'color:red;')
console.error('normal-warn')
console.error("string-color is %cred." , 'color:red;')
%cを付けた以降が装飾されるようです。
%3@@@と言うふうにつなげて書いてもいいんですが、読みにくくなるので、上記のように連結で書くようにしています。（お好きにどうぞ）
注意点は、'（シングルクォート）内では、%cは効かないので、必ず"（ダブルクォート）で使いましょう。
一応、Chrome,Safari,Firefoxで確認してみましたが、ほぼほぼ使えるようですね。
chrome以外は、サイズ関係が微妙みたいなので、色程度で使うのが賢明かもしれません。
GoogleChrome
Safari
FireFox
Nodejsでもconsole.logを装飾
次に、Javascriptのサーバー版である、Nodejsでもconsole.logを実行できます。
Nodejsで実行する場合は、サーバーコンソール（ターミナル）内で表示されるので、普通に文字を出すだけなら問題なのですが、ある程度の装飾はできます。
これもサンプルコードを書いておくので、見てください。
console.log("\x1b[30m"+ '文字:gray' +"\x1b[39m")
console.log("\x1b[40m"+ '背景:black' +"\x1b[49m")
console.log("\x1b[31m"+ '文字:red' +"\x1b[39m")
console.log("\x1b[41m"+ '背景:red' +"\x1b[49m")
console.log("\x1b[32m"+ '文字:green' +"\x1b[39m")
console.log("\x1b[42m"+ '背景:green' +"\x1b[49m")
console.log("\x1b[33m"+ '文字:yellow' +"\x1b[39m")
console.log("\x1b[43m"+ '背景:yellow' +"\x1b[49m")
console.log("\x1b[34m"+ '文字:blue' +"\x1b[39m")
console.log("\x1b[44m"+ '背景:blue' +"\x1b[49m")
console.log("\x1b[35m"+ '文字:magenta' +"\x1b[39m")
console.log("\x1b[45m"+ '背景:magenta' +"\x1b[49m")
console.log("\x1b[36m"+ '文字:cyan' +"\x1b[39m")
console.log("\x1b[46m"+ '背景:cyan' +"\x1b[49m")
console.log("\x1b[37m"+ '文字:white' +"\x1b[39m")
console.log("\x1b[47m"+ '背景:white' +"\x1b[49m")
console.log("\x1b[4m"+ 'under line' + "\x1b[0m")
console.log("\x1b[1m"+ 'bold' + "\x1b[0m")
console.log("\x1b[7m"+ 'reverse' + "\x1b[0m")
vscodeのターミナルで実行してみました。
あとがき
Javascriptでconsoleを制するものは、webを制することができる・・・かもしれない。
便利に使いこなして、エンジニアに対して見栄えの良い表示ができると、また違った世界が創り出せるかもしれませんよ。
0 件のコメント:
コメントを投稿