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

Jecelyn Yeen

このガイドでは、Chrome DevTools コンソールでメッセージの書式とスタイルを設定する方法について説明します。コンソールにメッセージを記録する方法については、メッセージ ロギングを使ってみるをご覧ください。

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

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

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

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

次の例をご覧ください。

  1. コンソールを開きます。
  2. 次のコンソール コマンドを入力します。 js 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 つのメッセージに複数の形式指定子を使用できます。

  1. 次のコンソール コマンドを入力します。 js 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. 次のコンソール コマンドを入力します。 js 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. 次のコンソール コマンドを入力します。 js console.log('Jane has %i kiwis.', 'two');
  2. 上記のコマンドにより、Jane has NaN kiwis. というメッセージが生成されます。 コンソール メッセージ内の NaN
  3. %i は値を整数に変換する必要があることを示しますが、引数は文字列です。したがって、NaN (Not-A-Number) が返されます。

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

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

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

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

  1. 次のコンソール コマンドを入力します。 js 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. 次のコンソール コマンドを入力します。 js 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 underline を text-decoration プロパティに追加
9 line-through を text-decoration プロパティに追加
22 font-weight プロパティをリセット
23 font-style プロパティをリセット
24 text-decoration プロパティから underline を削除
29 text-decoration プロパティから line-through を削除
38;2;R;G;B color: rgb(𝑅,𝐺,𝐵)
39 color propertyをリセット
48、2、R、G、B です background: rgb(𝑅,𝐺,𝐵)
49 background propertyをリセット
53 overline を text-decoration プロパティに追加
55 text-decoration プロパティから overline を削除

こちらも、複数のスタイル設定を使ったより複雑な例です。

  1. 次のコンソール コマンドを入力します。```js 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