【Node.js】 コンソール(CLI)出力に色や装飾をつける方法

Node.jsの実行結果をコンソールに出力するとき単純に文字を表示するのではなく、色を付けるなどするとメリハリがでてそれなりに見た目がよくなります。
そこで今回は、Node.jsの出力結果に色や装飾をおこなう方法をお伝えします。

コンソール出力した文字に色をつけるには制御文字という特殊な文字を使用します。

単純な色つけをおこなう制御文字を一覧にしてみます。

なお、端末によっては対応する色を変更できるものがあります。
変更してある場合は下記のようにならず、変更した色が表示されます。

リセットは、文字色だけではなく他の文字制御もリセットします。

制御文字の後に入力した文字が、対応する色で出力されます。

console.log( "\x1b[31mこんにちは" );
console.log( "けーちゃんです");
console.log( "\x1b[0mよろしくね！");

コンソールへの出力結果は次のようになります。

リセットするまで、制御文字が有効になっているのがわかりますね。

制御文字は次のように変数から組み立てることもできます。

for( let i = 30 ; i <= 37 ; i ++ )
    console.log( `\x1b[${ i  }m${ i }`);

次のように出力されます。

最初の行は見えていませんが、黒で30と表示されています。

console.logで出力すると、最後に改行されます。

ただ問題なのが、

改行して欲しくないときは、process.stdout.writeを使用します。

for( let i = 0 ; i <= 7 ; i ++ ) {
    process.stdout.write( `\x1b[${ i + 30 }m${  i + 30  }`);
    if( i % 4 === 3 ) process.stdout.write("\n");
}

上のコードは4回出力する毎に、一回改行しています。
改行したいときは、"\n"を出力します。

制御文字は背景色の指定もできます。

こちらも、端末によっては対応する色を変更できるものがあります。
変更してある場合は下記のようにならず、変更した色が表示されます。

背景色変更の制御文字を使って、簡単なコードを作成してみます。

for( let i = 0 ; i <= 7 ; i ++ ){
    process.stdout.write( `\x1b[${ i + 40 }m`); // 背景色指定
    process.stdout.write( `\x1b[${ 37 - i }m`); // 文字色指定
    process.stdout.write( `${ i + 40 }`);
    if( i % 4 === 3 ) process.stdout.write("\n");
}

上のコードはわかりやすいように出力を分割していますが、次のようにまとめることができます。

process.stdout.write( `\x1b[${ i + 40 }m\x1b[${ 37 - i }m${ i + 40 }`);

実行すると、次のようになります。

最後のリセットしていなかったため、次のコマンド入力の文字色と背景がおかしくなってしまいました。

文字に関する制御文字を使用したら、最後に必ず次のコードを実行して変更をリセットしておきましょう。

process.stdout.write( "\x1b[0m");

色変更以外にも文字の装飾を変更する特殊文字があります。

これらの出力結果は、WindowsのコマンドプロンプトやMacのターミナルなど、Node.jsを実行した端末によって異なります。

そのため、端末を制限せずに汎用的な運用をおこなう場合は、これらの制御文字を使用しないほうがいいです。

ここまでの色指定は0から7までの8色でした。
制御文字はもっと多くの色を取り扱うことができます。

ただし、使用する端末が指定した色出力に対応していることが前提となります。

RGBでの色指定

R/G/Bは、それぞれ0から255の範囲で指定します。

簡単なコードで色の変化を確認してみます。

process.stdout.write( `R/G `);
for( let r = 0 ; r <= 255 ; r += 10 ){
    process.stdout.write( (Math.floor(r ).toString().padStart(3,"0") + " " ));
}
process.stdout.write("\x0a");

for( let r = 0 ; r <= 255 ; r += 10 ){
    process.stdout.write((Math.floor(r ).toString().padStart(3,"0") + " " ));
    for( let g = 0 ; g <= 255 ; g += 10 ){

        process.stdout.write( `\x1b[48;2;${ r };${ g };255m`); 
        process.stdout.write( `   \x1b[0m `);
    }
    process.stdout.write("\x0a");
}

赤(R)と緑(G)を10単位で変化させています。
青(B)は255固定です。

カラーインデックスでの色指定

カラーインデックスは、システムであらかじめ用意された256色を番号で指定する形式です。
単純な色指定をおこなう制御文字で紹介した8色は、カラーインデックス0から7番に対応しています。

簡単なコードで色を確認してみます。

process.stdout.write( `   `);
for( let i = 0 ; i <= 9 ; i ++ ){
    process.stdout.write( ` +${i}  `);
}
process.stdout.write("\x0a");

for( let i = 0 ; i <= 255 ; i ++ ){
    if( i % 10 === 0 ) {
        process.stdout.write( (Math.floor(i / 10).toString().padStart(2,"0") + " " ));
    }
    process.stdout.write( `\x1b[48;5;${ i }m`); 
    process.stdout.write( `    \x1b[0m `);

    if( i % 10 === 9 ) process.stdout.write("\x0a");
}

ここまで、文字色や背景色などの指定を個々に行ってきました。

実は ; でつなげることで、一度に指定することができます。

例１：文字色と背景色を指定する

\x1b[31;42m

文字色赤、背景緑で表示されます。

例２：文字色と背景色（RGB）を指定する

\x1b[31;48;2;0;0;255m

文字色赤、背景R:0 G:0 B:255で表示されます。

例３：文字色（カラーインデックス）と背景色（RGB）および太字を指定する

\x1b[1;38;5;9;48;2;100;100;100m

太字、文字色インデックス9、背景R:100 G:100 B:100で表示されます。