ここだけ毎回記憶を全て失ってしまうので備忘録。

console

↑こういうやつ。

console.log('\u001B[30ぽぽぽ\u001B[0m')

ソースコードだとこんな感じ。

末尾はリセットコード。これがないと次に出力される文字にまで反映されてしまうので注意。

コード早見表

文字 背景
\u001B[30m \u001B[40m
\u001B[31m \u001B[41m
\u001B[32m \u001B[42m
\u001B[33m \u001B[43m
\u001B[34m \u001B[44m
\u001B[35m \u001B[45m
シアン \u001B[36m \u001B[46m
\u001B[37m \u001B[47m

文字色と背景色の組み合わせはちゃんと試してないけど、ターミナルではできてChromeの検証ツールではできなかった。

つなげて書けるようにする

色ごとに文字をラップする関数をつくってそれらをオブジェクトでまとめることで、簡単なログは格段に見やすくなると思う。
ただ出力するものが文章となると文字列と関数が混ざってソースコードが少々見づらくなる。

`個人${red('的')}には
${yellow('結構')}
${green('見づらい')}。`

なのでメソッドチェーンを使っていい感じにできないかと模索した。

class ColorLog {
  private value = ''

  default (text) {
    this.value += text
    return this
  }

  br () {
    this.value += '\n'
    return this
  }

  black (text) {
    this.value += `\u001B[30m${text}\u001B[0m`
    return this
  }

  red (text) {
    this.value += `\u001B[31m${text}\u001B[0m`
    return this
  }

  green (text) {
    this.value += `\u001B[32m${text}\u001B[0m`
    return this
  }

  yellow (text) {
    this.value += `\u001B[33m${text}\u001B[0m`
    return this
  }

  blue (text) {
    this.value += `\u001B[34m${text}\u001B[0m`
    return this
  }

  purple (text) {
    this.value += `\u001B[35m${text}\u001B[0m`
    return this
  }

  cyan (text) {
    this.value += `\u001B[36m${text}\u001B[0m`
    return this
  }

  white (text) {
    this.value += `\u001B[37m${text}\u001B[0m`
    return this
  }

  end () {
    return this.value
  }
}

こんなクラスに仕上がった。

書くときは、以下のような形にできる。

const message = new ColorLog()
  .default('メソッドチェーンだと')
  .red('このように')
  .blue('書けるので')
  .yellow('結果は')
  .cyan('同じ')
  .yellow('文章でも')
  .default('、')
  .br()
  .cyan('ソースコード')
  .default('はほんの少しだけ')
  .green('見やすくなる!!')
  .end()

console.log(message)

console

好みもあるだろうけど、自作ツールのエラー出力、テスト結果の出力にでもどうぞ。

プロフィール画像

ふじわら

よくわからないもので戯れてたら自分のことすらよくわからない人間になってしまいました。

ひっそりYouTubeしてます。