JavaScriptのconsole.log()にCSSでスタイルを適用できるのをご存知でしょうか？
今回の内容は豆知識のような形なので、必須の知識ではないですが知っておくとプログラミングが少しばかり楽しくなるかもしれませんので共有です。
また動画もあるので良ければどうぞ。
JavaScriptのconsole.logにスタイル
早速ですがconsole.logを以下のようにすることでCSSも書くことができちゃいます。
console.log(`%cテストです`, "color: red; font-weight: bold;");
意外と簡単ですよね、「%c」を先頭につけることがポイントです。
CSSについては「,」で区切って通常のCSSのように書くことができます。
さらにアレンジして一部にのみCSSをあてることもできます。
console.log(`%cテスト%cです`, "color: red; font-weight: bold;", "");
部分に分ける場合にはそれぞれの先頭に「%c」を付けます。
CSSについては「,」で区切って別々に書くことができて、上記の場合は「です」にはCSSを充てたくないので空文字にしています。
「,」で区切ってCSSを書く順番は「%c」の順番に対応しているので、順番だけ注意しましょう。
文字列だけでなく変数を使った場合に良いかもしれません。
const value = 100;
console.log(`%cvalue：%c${value}`, "", "color: red; font-weight: bold;");
いつものログが明瞭になってデバックも少しばかり作業しやすくなるかもしれませんね。