コンソールでメッセージの書式設定とスタイルを設定する

Jecelyn Yeen

このガイドでは、Chrome DevTools Console でメッセージをフォーマットしてスタイルを設定する方法について説明します。コンソールにメッセージをロギングする方法については、メッセージのロギングのスタートガイドをご覧ください。

このガイドは、JavaScript を使用してページにインタラクティビティを追加する方法など、ウェブ開発の基礎を理解していることを前提としています。

コンソール メッセージの書式設定

形式指定子を使用して、コンソール メッセージをフォーマットできます。

形式指定子はパーセント文字（%）で始まり、データの型（整数、浮動小数点数など）を示す「型文字」で終わります。

次に例を示します。

  1. コンソールを開きます。

  2. 次のコンソールコマンドを入力します。

    const tools = 'Chrome DevTools';
console.warn('%s is awesome.', tools);

  3. 上記のコマンドを実行すると、Chrome DevTools is awesome. メッセージが生成されます。 文字列値をフォーマットする

Chrome DevTools で現在サポートされている形式指定子のリストは次のとおりです。

指定子 出力
%s 値を文字列としてフォーマットする
%i または %d 値を整数として書式設定します。
%f 値を浮動小数点値として書式設定します。
%o 値を展開可能な DOM 要素としてフォーマットします。
%O 値を展開可能な JavaScript オブジェクトとしてフォーマットします。
%c 2 番目のパラメータで指定された CSS スタイルルールを出力文字列に適用します。

複数の形式指定子を適用する

メッセージで複数の形式指定子を使用できます。

  1. 次のコンソールコマンドを入力します。

    console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);

  2. 上記のコマンドを実行すると、The total weight of 3 apples and 2 oranges is 432.4 grams. メッセージが生成されます。 複数の形式指定子

型変換について

出力メッセージは、形式指定子に従って変換されます。

  1. 次のコンソールコマンドを入力します。

    console.log('I have %i apples and %d oranges.', 2, 3.5);

  2. 上記のコマンドを実行すると、I have 2 apples and 3 oranges. メッセージが生成されます。 整数値をフォーマットする

  3. 3.5 oranges ではなく 3 oranges が出力されます。%d は、値が整数に変換されることを示します。

型変換が無効な場合の例を次に示します。

  1. 次のコンソールコマンドを入力します。

    console.log('Jane has %i kiwis.', 'two');

  2. 上記のコマンドを実行すると、Jane has NaN kiwis. メッセージが生成されます。 コンソール メッセージに NaN が表示される

  3. %i は、値が整数に変換される必要があることを示していますが、引数は文字列です。したがって、NaN（Not-A-Number）が返されます。

コンソール メッセージをスタイル設定する

DevTools でコンソール メッセージのスタイルを設定する方法は 2 つあります。

形式指定子を使用したスタイル

%c 形式指定子を使用して、コンソール メッセージに CSS のスタイルを適用できます。

  1. 次のコンソールコマンドを入力します。

    const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
console.log("%cHooray", style);

  2. 上記のコマンドを実行すると、CSS スタイルが適用された Hooray が生成されます。 CSS で出力をスタイル設定する

ANSI エスケープ シーケンスを使用してスタイルを設定する

ANSI エスケープ シーケンスを使用して、コンソール メッセージのスタイルを設定できます。

Node.js デベロッパーは、ANSI エスケープ シーケンスを使用してログ メッセージを色分けするのが一般的です。多くの場合、chalk、colors、ansi-colors、kleur などのスタイル設定ライブラリを使用します。

ライブラリを使用せずに、ANSI エスケープ シーケンスでメッセージのスタイルを設定することもできます。構文は次のとおりです。

\x1B[𝘗1;…;𝘗nm

ここで

  • 𝘗1～𝘗n は、SGR（Select Graphic Rendition）パラメータの有効なサブシーケンスです。
  • 𝘗1～𝘗n のいずれかのパラメータは省略できます。省略した場合、その値はゼロと見なされます。
  • \x1B[m は \x1B[0m の省略形で、表示属性がリセットされます。

次に例を示します。

  1. 次のコンソールコマンドを入力します。

    console.log('\x1B[41;93;4mHello\x1B[m');

  2. 上記のコマンドを実行すると、背景が赤、テキストが黄色、アンダーラインが引かれた Hello メッセージが生成されます。 こんにちは

DevTools でサポートされているカラーコードの一覧は次のとおりです。

前景 背景 ライトモード ダークモード
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000AA
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00AAAA
#12b5cb
37 47
#AAAAAA
#cfd0d0
90 100
#555555
#898989
91 101
#FF5555
#f28b82
92 102
#55FF55
#01c801
93 103
#FFFF55
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
#55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

DevTools でサポートされているスタイル設定コードのリストは次のとおりです。

パラメータ 意味
0 すべての表示属性をリセットする
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 text-decoration プロパティに underline を追加
9 text-decoration プロパティに line-through を追加
22 font-weight プロパティをリセットする
23 font-style プロパティをリセットする
24 text-decoration プロパティから underline を削除
29 text-decoration プロパティから line-through を削除
38;2;𝑅;𝐺;𝐵 color: rgb(𝑅,𝐺,𝐵)
39 color propertyをリセット
48;2;𝑅;𝐺;𝐵 background: rgb(𝑅,𝐺,𝐵)
49 background propertyをリセット
53 overline を text-decoration プロパティに追加
55 text-decoration プロパティから overline を削除

複数のスタイル設定を使用した、より複雑な例を次に示します。

  1. 次のコンソールコマンドを入力します。

    const hello = '\x1B[41;93;4mHello';
const space = '\x1B[m ';
const world = '\x1B[34;102;9mWorld';

console.log(hello + space + world);

  2. 上記のコマンドを実行すると、3 つの異なるスタイルの Hello World メッセージが生成されます。 Hello World