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

Jecelyn Yeen 氏

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

このガイドは、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. 次のコンソール コマンドを入力します。 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 のパラメータはいずれも省略できます。省略した場合、その値は 0 とみなされます。
  • \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