こんなカッコイイことができるようになれます。

とりあえず色をつけてみる

うだうだ解説してないで、さっそく色を変えてみましょう。

console.log('\u001b[31m' + 'hoge' + '\u001b[0m');

(分かりやすいように制御文字を分割してますが、繋げても同じ動作をします)

これを実行すると赤色で「hoge」と表示されます。

なんだか呪文みたいな文字列ですが、制御文字について理解できれば難しくありません。

解説: 制御文字とは?

制御文字とは、標準出力すると様々な効果を発揮する文字のことです。たとえば以下のような操作ができます。

色がつく(今回のテーマ)
カーソル位置を変える
標準出力をクリアする

ちなみに、制御文字はただの文字列なのでどの言語でも扱えます。

制御文字は \u001b[31m や \u001b[0m で表現されます。

制御文字で色をつける

console.log('\u001b[31m' + 'hoge' + '\u001b[0m');

\u001b[(色コード)m を出力すると、それ以降の文字列の文字色を好きに設定できます。このコードでは色コードとして31 (赤)と 0 (デフォルト色)が指定されています。

文字色を赤にする (\u001b[31m)
hoge と出力する
文字色をもとに戻す (\u001b[0m)

使える色コードは以下のとおりです。ちなみに、10の位を4にすると背景色が変わります(たとえば40なら背景色を黒に設定できる)。

30:黒
31:赤
32:緑
33:黄色
34:青
35:赤紫
36:シアン
37:白

余談: 制御文字の構造について

\u001b[31m は3つの部分からできています。

エスケープ: \u001b[
数字: 31
命令: m

\u001bは「ここからエスケープシーケンスだよ」という目印です。JavaScriptでは他にも「\x1b」「\033」をエスケープとして使えます。(「\e」「\0x1b」を使える言語もあるそうです)

31や0は後ろに続く命令(この場合はm)に渡す引数のようなもので、この数字によって命令内容が変化します。

mは「グラフィカルな処理をしろ」という命令です。受け取った数字に応じて文字色や背景色を変えます。例えば31なら文字色を赤に変更、0なら文字色をデフォルトの色に戻します。

他にもAやBなどの命令が存在します。このあたりを詳しく知りたいかたは、こちらがとてもわかりやすいので参照ください。

使いやすいように関数化する

制御文字で文字色を変更したら、最後に必ず\u001b[0mで元の色に戻さなければなりません。さらに、制御文字を見ても文字が何色になるのか分かりづらいです。なので、人間が読めるように関数化します。

const color = col => str => `\u001b[${col}m${str}\u001b[0m`; // 補助関数
const colors = {
    black: color('30'),
    red: color('31'),
    green: color('32'),
    yellow: color('33'),
    blue: color('34'),
    magenta: color('35'),
    cyan: color('36'),
    white: color('37')
};

console.log(`[${colors.blue('INFO')}] Hello world!`);
console.log(`[${colors.green('DEBUG')}] I'm Panda Noir!`);

これなら「INFOが青になるんだな」とわかりやすいです。

おまけ: 背景色もカスタマイズする

背景色バージョンも作ってみました。ただ、注意していただきたいのが、「\u001b[0mが背景色ごとリセットしてしまう」ことです。そのため、文字色と一緒に使う場合はご注意ください。

例えば、下のコードは変更が打ち消されて意図した動作をしません。

const color = col => str => `\u001b[${col}m${str}\u001b[0m`;
const colors = {
    black: color('30'),
    red: color('31'),
    green: color('32'),
    yellow: color('33'),
    blue: color('34'),
    magenta: color('35'),
    cyan: color('36'),
    white: color('37')
};
const bg = {
    black: color('40'),
    red: color('41'),
    green: color('42'),
    yellow: color('43'),
    blue: color('44'),
    magenta: color('45'),
    cyan: color('46'),
    white: color('47')
};

console.log(`[${bg.white(colors.blue('INFO'))}] Hello world!`);
console.log(`${bg.white(`[このカッコの中を白にしたい${colors.blue('ここだけ青くしたい')}ここでリセットされてしまった…]`)}`);

細かい指定をしたい場合は、関数化をあきらめて普通に書くことをオススメします。

Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

標準出力に色をつけてカラフルにログ表示する