console.log を装飾してみよう

本日は 7/7、クラスメソッド創立記念日です（ちなみに私の結婚記念日でもあります）。ということで、ちょっとした小ネタ投稿になります。

console オブジェクト

console オブジェクトはよく使うのですが、私が使うメソッドは主に以下になります。

• console.log() - 毎日使う
• console.error()- エラーのとき使う
• console.info() - log が多すぎて埋もれてどこに行ったかわからなくなったときに使う（正しい用途ではありません。でもすぐ消すし……）
• console.table()- 思い出したとき、すごくまれに使う。最近は、console.log({ foo }) で済ませている

これくらいしかほとんど使うことがありません。使う比率でいうと console.log が 9 割以上を占めている感じです。なので、この機会にもう少しだけ console.log() でできることを確認しておこう、というのが今回の目的です。

ちなみにその他のメソッドは以下のページに記載されています。

• console - Web API | MDN

console.log は一部の CSS が使える

%c ディレクティブを使用することで、CSS を適用できます。実際に使ってみましょう。

確認したのはすべて Mac Chrome です。

console.log(
  "%c7月7日",
  "color:white; background-color:purple; padding:2px 4px; border-radius:4px;",
  "今日はクラスメソッドの創立記念日です。"
);

次に創立記念日を緑色の文字にしてみましょう。

console.log(
  "%c7月7日%c 今日はクラスメソッドの%c創立記念日%cです。",
  "color:white; background-color:purple; padding:2px; border-radius:4px;",
  "",
  "color:green;",
  ""
);

もうちょっとシンプルに書けないかなーと思って以下のように書いてみましたがうまくいかないようです。

console.log(
  "%c7月7日",
  "color:white; background-color:purple; padding:2px; border-radius:4px;",
  "今日はクラスメソッドの",
  "%c創立記念日",
  "font-weight:bold;",
  "です。"
);

使用できる CSS の プロパティについても先ほどの MDN のページに一覧があります。

といっても、ここの一覧にあるからといって、あまりうまくいかないものもありそうです。例えば以下は太字にしてみたサンプルなのですが、ちょっとよく normal との差がわかりませんでした。（フォントの問題のような気もするので、なんとかする方法があるかもしれませんが、ここでは万人のPCに確実に適用されるものではなさそう、という意図です）

console.log("%c太字サンプル", "font-weight: bold");

さいごに

以上、console.log() の小ネタでした。

ロガーなどで使う以外では使いどころはなさそうかなとも思ったのですが、自分のウェブサイトで装飾したメッセージを流してみるのも面白いかもしれないな、と思いました。