視覚的に分かりやすく！JavaScript コンソールでメッセージに色を付ける

JavaScript コンソールは、Web 開発者にとって強力なツールです。デバッグやコードの実行だけでなく、ログメッセージの出力にも使用できます。そして、メッセージに色を付けることで、視覚的に分かりやすく情報を整理することができます。

色の付け方

JavaScript コンソールで色を付ける方法はいくつかあります。

エスケープシーケンス

最も簡単な方法は、エスケープシーケンスを使用することです。エスケープシーケンスは、特殊な文字の組み合わせで、コンソールに色などの書式情報を指示します。

例

console.log('%cThis is red text', 'color: red');
console.log('%cThis is blue text', 'color: blue');

CSS スタイルを使用して、コンソール出力に色を付けることもできます。

const style = document.createElement('style');
style.textContent = `
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
`;
document.head.appendChild(style);

console.log('%cThis is red text', 'color: red');
console.log('%cThis is blue text', 'color: blue');

ライブラリ

chalk などのライブラリを使用すると、より簡単に色を付けることができます。

const chalk = require('chalk');

console.log(chalk.red('This is red text'));
console.log(chalk.blue('This is blue text'));

色使いのポイント

• 重要なメッセージが目立つように、明るい色を使用する。
• 似たような意味を持つメッセージには、同じ色を使用する。
• 色を使いすぎると、かえって見づらくなるので注意する。

• 上記以外にも、ブラウザや環境によって異なる方法で色を付けることができます。詳細は、各ブラウザのドキュメントを参照してください。
• JavaScript コンソールで色を使用する際は、読みやすさを考慮することが重要です。

console.log('%cThis is red text', 'color: red');
console.log('%cThis is blue text', 'color: blue');
console.log('%cThis is green text with a black background', 'color: green; background-color: black');
console.log('%cThis is a bold and italicized text', 'font-weight: bold; font-style: italic');

CSS スタイル

const style = document.createElement('style');
style.textContent = `
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
  .green {
    color: green;
    background-color: black;
  }
  .bold {
    font-weight: bold;
  }
  .italic {
    font-style: italic;
  }
`;
document.head.appendChild(style);

console.log('%cThis is red text', 'class: red');
console.log('%cThis is blue text', 'class: blue');
console.log('%cThis is green text with a black background', 'class: green');
console.log('%cThis is a bold and italicized text', 'class: bold italic');

const chalk = require('chalk');

console.log(chalk.red('This is red text'));
console.log(chalk.blue('This is blue text'));
console.log(chalk.green.bgBlack('This is green text with a black background'));
console.log(chalk.bold.italic('This is a bold and italicized text'));

実行例

ポイント

• エスケープシーケンスはシンプルで使いやすいですが、CSS スタイルやライブラリに比べると機能が制限されています。
• CSS スタイルは、より多くの書式設定を適用できます。
• ライブラリは、さらに多くの機能を提供し、コードをより簡潔に書くことができます。

注意

• ブラウザや環境によっては、すべての機能がサポートされない場合があります。

JavaScript コンソールで色を付ける他の方法

HTML エンティティを使用して、文字に色を付けることができます。

console.log('<span style="color: red">This is red text</span>');
console.log('<span style="color: blue">This is blue text</span>');

const div = document.createElement('div');
div.textContent = 'This is red text';
div.style.color = 'red';
console.log(div);

const span = document.createElement('span');
span.textContent = 'This is blue text';
span.style.color = 'blue';
console.log(span);

これらの方法の比較