Node.jsで待望（?）のコンソールの色を変えられるようになった


Node.js 21.7.0のアップデートでText Stylingという項目がありました。

コンソールに表示させる **文字の色や装飾や背景色を変えられる**ようになります。

> ![スクリーンショット 2024-03-31 19.12.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/7a51a464-e65c-ad8e-b00c-f955b51fa002.png "スクリーンショット 2024-03-31 19.12.55.png")
> https://github.com/nodejs/node/releases/tag/v21.7.0


```js
const { styleText } = require('node:util');
const errorMessage = styleText('red', 'Error! Error!');
console.log(errorMessage);
```

こんな感じでコンソールの文字色が外部モジュール無しで変えられます。

> ![スクリーンショット 2024-03-31 19.13.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/321fb42c-6a7f-57e7-53ef-b84882a8b9e3.png "スクリーンショット 2024-03-31 19.13.40.png")
> https://nodejs.org/api/util.html#utilstyletextformat-text

待ち望んでいた人も多いのでは......たぶん

## 元々チョークがあった


npmモジュールでチョーク(chalk)というパッケージがあり、これを使って色をつけることができました。

https://www.npmjs.com/package/chalk

> ![スクリーンショット 2024-03-31 19.15.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/c1aa7c13-1f06-58d2-bb81-38cec085ac50.png "スクリーンショット 2024-03-31 19.15.36.png")

今回のアップデートでチョークライクなことが外部パッケージを入れずに使えるようになったような印象です。

（チョークを元々ちゃんと使ったことがなかったのでもっと別の機能があるのかもしれないですが）

## 使える色

使える色はこちらにまとまってます。

https://nodejs.org/api/util.html#modifiers

例えば`blue`を指定するとこんな感じ。

> ![スクリーンショット 2024-03-31 20.05.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/3dcd5966-752f-dc8f-4b38-60fd2c02090d.png "スクリーンショット 2024-03-31 20.05.52.png")

### Foreground colors

- black
- red
- green
- yellow
- blue
- magenta
- cyan
- white
- gray (alias: grey, blackBright)
- redBright
- greenBright
- yellowBright
- blueBright
- magentaBright
- cyanBright
- whiteBright


`blueBright`と`blue`、`redBright`と`red`はこんな感じ。

> ![スクリーンショット 2024-03-31 20.10.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/7b6c7d39-6daa-6cdb-5d29-9a9e722c111c.png "スクリーンショット 2024-03-31 20.10.34.png")

絶妙。。

## 使える装飾

下線や取り消し線なども使えるとのことです。

以下が掲載されています。

- reset - Resets all (color) modifiers to their defaults
- bold - Make text bold
- italic - Make text italic
- underline - Make text underlined
- strikethrough - Puts a horizontal line through the center of the text (Alias: strikeThrough, crossedout, crossedOut)
- hidden - Prints the text, but makes it invisible (Alias: conceal)
- dim - Decreased color intensity (Alias: faint)
- overlined - Make text overlined
- blink - Hides and shows the text in an interval
- inverse - Swap foreground and background colors (Alias: swapcolors, swapColors)
- doubleunderline - Make text double underlined (Alias: doubleUnderline)
- framed - Draw a frame around the text

### 装飾も何個か試してみる

- イタリック

```js
const errorMessage = styleText('italic', 'Error! Error!');
```

> ![スクリーンショット 2024-03-31 20.02.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/8af8640d-f7c0-e2b7-deb1-367c690212f3.png "スクリーンショット 2024-03-31 20.02.41.png")

- アンダーライン

```js
const errorMessage = styleText('underline', 'Error! Error!');
```

> ![スクリーンショット 2024-03-31 20.03.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/8542b60d-9351-d145-f027-95dd375d5704.png "スクリーンショット 2024-03-31 20.03.28.png")

- 取り消し戦

```js
const errorMessage = styleText(`strikethrough`, 'Error! Error!',);
```

> ![スクリーンショット 2024-03-31 20.02.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/604e0057-91ff-4f65-e489-4262199f1034.png "スクリーンショット 2024-03-31 20.02.20.png")

## 背景色も使える

背景色も変えられます。
https://nodejs.org/api/util.html#background-colors

### Background colors


`Customizing util.inspect colors`の項目にある背景色は以下の模様です。

- bgBlack
- bgRed
- bgGreen
- bgYellow
- bgBlue
- bgMagenta
- bgCyan
- bgWhite
- bgGray (alias: bgGrey, bgBlackBright)
- bgRedBright
- bgGreenBright
- bgYellowBright
- bgBlueBright
- bgMagentaBright
- bgCyanBright
- bgWhiteBright

### 何個か指定してみる

- 背景を緑に

```js
const errorMessage = styleText(`bgGreen`, 'Error! Error!',);
```

> ![スクリーンショット 2024-03-31 20.16.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/cbddb9dd-d086-6ebd-a97e-b33c0ab225ac.png "スクリーンショット 2024-03-31 20.16.53.png")

- 背景をマゼンタに

```js
const errorMessage = styleText(`bgMagentaBright`, 'Error! Error!',);
```

> ![スクリーンショット 2024-03-31 20.18.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/c3046bbb-0c0a-b82e-7835-da0098ffa2dc.png "スクリーンショット 2024-03-31 20.18.01.png")

## まとめ

割と便利な気がします。
背景色の指定と装飾を同時にしたいってときにどう指定するのか今の所わかってないです。できるのかな。