いまこそ知ってほしい！JavaScriptのconsoleの魅力 2020

こんにちは！
[ウェブクルー Advent Calendar 2020](https://qiita.com/advent-calendar/2020/webcrew) の3日目の記事です。
昨日は  @kouchanne さんの「[Anyダメ絶対! axios編](https://qiita.com/kouchanne/items/3e81158466cbdc907a3d)」でした！
TypeScriptでAPIからのresponseデータにも型をセットしたいときに参考にしたいですね。

アドベントカレンダーのお祭り気分を楽しみながら書いていきます！

## JavaScriptのconsoleオブジェクトのメソッド
普段使うわりに意外と検索する対象に入らないのではないでしょうか？
知ってみたら、面白いところも便利なところもあるなぁーって感じました。
いろいろ試したことを書いていきます。

## JavaScriptのconsole.log()でフォーマット

### CSSのフォーマット
ログを出力するのに使う`console.log()`の出力をCSSでフォーマットできるようです。
強調したいログに適用できて便利ですね。

試してみましょう。

```js
const criminal = "御主人"
console.log(`犯人は・・・%c${criminal} %c、あなたです!!!`, "color: red;", "");
```
![console_log_color.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/05d8a3ba-f1b9-e3e3-79f8-029f4158479b.gif)
第一引数でCSSを適用したい文字の前に`%c`ディレクティブをつけて、
第二引数以降で宣言したCSSを適用させることができましたね。

#### console.log()は画像も出せる(Chromiumのブラウザのみ)

CSSで画像設定してもコンソールに出力できるようで、Chromeでちょっと試してみました。

```js
console.log("%cHAPPY HOLIDAYS!%c ",
  'color: #FFFFFF; font-size:64px; font-family:"Georgia"; background: -webkit-linear-gradient(0deg, #00BB00, #FFA500, #FF0000); padding: 8px;',
  'background: url(https://1.bp.blogspot.com/-xRE8fggFEAs/X8BV4cGFpYI/AAAAAAABcgE/sgoe7drgu0kgTkUweELLBeGZK0tT7osKgCNcBGAsYHQ/s1103/christmas_mask_santa_tonakai.png); background-size: 100% 100%; padding: 256px 256px');
```
![chrome_holidays.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/e8cd4cf3-3458-a372-bd4c-eccfc9c07089.gif)
画像も出せましたね！

画像は以下の「いらすとや」さんのものを使っています。
[マスクを付けたサンタとトナカイのイラスト（クリスマス） | かわいいフリー素材集 いらすとや](https://www.irasutoya.com/2020/11/blog-post_552.html)

#### console.log()のCSSのブラウザでの違い
`console.log()`のCSSですが、ブラウザによって挙動が違いました。
上記のはAppleのサイトっぽく、文字をくりぬいた形にしたかったのですが、
Chromeだと`-webkit-background-clip: text;`を適用できなかったですね。

```js:cssに-webkit-background-clip使ったconsole.log()
console.log("%cHAPPY HOLIDAYS!",
  'color: #FFFFFF; font-size:64px; font-family:"Georgia"; background: -webkit-linear-gradient(0deg, #00BB00, #FFA500, #FF0000); -webkit-background-clip: text; color: transparent; padding: 8px;');
```
![chrome_clipできない.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/20cadc47-5dea-5747-ef5b-800c35b9080e.gif)

Firefoxだと可能でした！
![firefox_holidays.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/df509600-9133-ec53-a281-f4ce101d1670.gif)

逆に、Firefoxだと画像が出せなかったです。
なのでサンタさんの画像を出力するところではChromeで実行したGIF画像を貼りました。

CSSは以下を参考：
[CSS3でテキストにグラデーションをかける方法](https://marie-web.design/blog/text-gradation/)
[[CSS]background-clipで文字の形に背景を切り取る](https://qiita.com/teinen_qiita/items/9c23ef3befcb1119bce2)
[background-clip - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/background-clip)

### いろいろなフォーマット
他にも以下のようなフォーマットがあります！

| 置換文字列    | 変換用途         | 備考                 |
|:-------------|-----------------:|:--------------------:|
|`%s`          | 文字列           |                      |
|`%d`または`%i`| 整数             |                      |
|`%f`          | 浮動小数点       |※Chromeだと動作しない |
|`%o`または`%O`| オブジェクト      |                      |

これは「[console - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/console)」や「[Console Standard #formatting-specifiers](https://console.spec.whatwg.org/#formatting-specifiers)」に書いてある通りで、
全部を一気にFirefoxで試してみるとこんな感じですね。

```js

console.log("%s, %.3f, %i, %o", "a", 1.1, 10,{id: 1}); 
```
![firefox_float.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/9ee5d1c6-7ea9-3833-4192-290511269e62.gif)

## JavaScriptのconsoleのメソッドをログレベル別で出力
### info()、warn()、error()
ログレベルを変えて出力することも出来ます。
Chromeでの実行結果です。

```js

console.log("log()");
console.info("info()");
console.warn("warn()");
console.error("error()");
```
![chrome_info.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/8e52ce0d-70a6-08ac-0287-f503f5b74bea.gif)

「`log()`と`info()` 同じじゃん」って感じなんですが、
次はFirefoxでの実行結果です。
![Firefox_info.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/4569c1f3-5028-95d5-e99e-f45a4c48396f.gif)
`info()`の出力には`log()`の出力にはない「ⓘ」が出てきました！
Firefoxでなら差が出るようです。

`warn()`や`error()`は、コンソール開くとよく見かけるやつですね。

これらのほかに`debug()`というメソッドもあって、
ChromeだとログレベルがVerboseで、Firefoxだとログレベルがデバッグです。

### assert()
`error()`を条件によって出しわけたいなって時に役立つと思います。

```js

console.assert(true, "エラーは出ない");
console.assert(false, "エラーが出る！");
```
![assert.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/6d6f4b4b-3575-4f00-261d-5e4d363d2e4c.gif)
`assert()`だと、`error()`に出なかった「Assertion failed: 」がエラーメッセージと一緒に出るようですね。

### info()、warn()、error()、assert()もフォーマット可能
Firefoxで試してみた実行結果です。
設定できる置換文字列を全部設定してます(CSSはFirefoxっぽく色を変えてみました笑)。

```js

console.info('%c %s, %.3f, %i, %o',
  'color: #FFFFFF; font-size:64px; font-family:"Georgia"; background: -webkit-linear-gradient(0deg, #9758F5, #E9207A, #FF8552); -webkit-background-clip: text; color: transparent; padding: 8px;', 
  'a', 1.1, 10,{id: 1}
);
```
![firefox_css.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/f61225a3-0b7b-b46e-ca79-113a2df79bd0.gif)
こんな感じで、置換文字列がすべてフォーマットされたものが出力されました。

### log()、info()、warn()、error()、assert()のグループ分け

「[Console Standard #loglevel-severity](https://console.spec.whatwg.org/#loglevel-severity)」に書いてあるのですが、
一般的なグループ分けは以下ですね。

| グループ分け | メソッド            | 説明                             |
|:--------------|------------------:|:--------------------------------:|
|log            | log()             | 一般的なログ                     |
|info           | info()            | 参考になるログ                   |
|warn           | warn()            | ユーザーになにか警告するログ      |
|error          | error(), assert() | ユーザーにエラーを示すログ        |



## console.time()で時間を計測
### time()
`console.time()`でタイマーを開始し、
`console.timeLog()`で途中経過時間を出力、
`console.timeEnd()`でタイマー終了とかかった時間を出力できます。

測定するときに使えそうですね。

### time()で測定してみる
試すのにちょうどいいの探して、フィボナッチ数列求める再帰処理がちょうどいいかもと思って
以下の中で使われていたのを参考にさせてもらっています。
[Haskellをかける少女](https://qiita.com/Yametaro/items/11dcd3ec26027ff30214)
[Haskellをかけない中年](https://qiita.com/Yametaro/items/e163affa4b2db48f9957) 

(「昨日のコード」)

```js

const fibo = n => (n === 0 || n === 1)? n: fibo(n - 1) + fibo(n - 2);
```
(「今のコード」)

```js

const rec = (f2, f1, n) => {
  if (n === 1) return f1;
  return rec(f1, f2+f1, n-1);
};
const fibo = n => (n < 2)? n: rec(0, 1, n);
```
>ハスケル子「昨日のコードだと42番目のフィボナッチ数を求めたくらいでSafariが悲鳴を上げ始めますけど、」
ハスケル子「今のコードなら、1000番目のフィボナッチ数が」
ハスケル子「1ミリ秒以下で返ってきます」

どのくらい違うのか、`time()`を使ってちょっと測ってみました！
上記の「昨日のコード」の処理をChromeで計測してみたものです。

```js

const fibo = n => (n === 0 || n === 1)? n: fibo(n - 1) + fibo(n - 2);
console.time("MyTimer");
console.log(fibo(30));
console.timeLog("MyTimer");
console.log(fibo(35));
console.timeLog("MyTimer");
console.log(fibo(40));
console.timeEnd("MyTimer");
```
![console_time1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/5f7530f4-e8bb-b61d-3598-677e28a89439.gif)
40くらいまで行くと時間がかかっているのが数字に表れていますね。

次に、上記の「今のコード」の処理をChromeで計測してみたものです。

```js

const rec = (f2, f1, n) => {
  if (n === 1) return f1;
  return rec(f1, f2+f1, n-1);
};
const fibo = n => (n < 2)? n: rec(0, 1, n);
console.time("MyTimer");
console.log(fibo(30));
console.timeLog("MyTimer");
console.log(fibo(35));
console.timeLog("MyTimer");
console.log(fibo(40));
console.timeLog("MyTimer");
console.log(fibo(1000));
console.timeEnd("MyTimer");
```
![console_time2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/65e1d75b-13e2-9a49-7850-b735c58b9307.gif)
今のChromeは末尾呼出しの最適化されているようで、
他の処理の後で1000番目まで計算しても余裕で1ミリ秒以下で返ってきてるのがわかりますね。

### time()で複数のタイマー
`time()`は第一引数に文字列や数字やオブジェクトをラベルとして入れて、
複数のタイマーを用意することもできます。

### timelog()はフォーマット可能？
通常の`console.log()`のように複数の引数をとることはできます。
第一引数に`%c`の文字を入れた文字列をラベルとして設定して、Chromeで試してみましょう。

```js

const time1 = {label: "%ctimer_1", color: "font-size: 16px; color: red;"};
const time2 = {label: "%ctimer_2", color: "font-size: 16px; color: blue;"};

console.time(time1.label, time1.color, "1スタート", "出力されないです");
console.timeLog(time1.label, time1.color);

console.time(time2.label, time2.color, "2スタート", "出力されないです");
console.timeLog(time2.label, time2.color);

console.timeLog(time1.label, time1.color);
console.timeEnd(time1.label, time1.color, "1エンド", "出力されないです");

console.timeLog(time2.label, time2.color);
console.timeEnd(time2.label, time2.color,  "2エンド", "出力されないです");
```
![timelog_color.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/331a5285-a760-7c5c-67ce-90b796a30436.gif) 
複数のタイマーを設定したときに、CSSを適用させるのというのは使えるかもしれないですね。


ところで、CSSがラベルだけじゃなくて経過時間にも適用されてる感じですね？
経過時間には別のCSSを適用できそうですね。
こちらもChromeで試してみましょう。

```js

const timerLabel = "%ctimer%c";
const color_2e2623 = "font-size:32px; color: #fff; text-shadow: 1px 1px 1px #2e2623, -1px 1px 1px #2e2623, 1px -1px 1px #2e2623, -1px -1px 1px #2e2623, 1px 1px 1px #2e2623, -1px 1px 1px #2e2623, 1px -1px 1px #2e2623, -1px -1px 1px #2e2623; background: #332826; padding: 16px 4px;"
const color_53b793 = "font-size:32px; color: #fff; text-shadow: 1px 1px 1px #53b793, -1px 1px 1px #53b793, 1px -1px 1px #53b793, -1px -1px 1px #53b793, 1px 1px 1px #53b793, -1px 1px 1px #53b793, 1px -1px 1px #53b793, -1px -1px 1px #53b793; background: #47b58e; padding: 16px 4px;"

console.time(timerLabel);
console.timeLog(timerLabel, color_53b793, color_2e2623);
console.timeLog(timerLabel, color_2e2623 + "text-transform: uppercase;", color_53b793);
console.timeLog(timerLabel, color_53b793, color_2e2623 + "text-transform: uppercase;");
console.timeLog(timerLabel, color_2e2623 + "text-transform: uppercase;", color_53b793 + "text-transform: uppercase;");
console.timeEnd(timerLabel);
```
![timelog_color_one.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/67b4fa0d-a638-ad4a-ece1-d9360e50f0e1.gif)

ラベルと別で経過時間にCSSでフォーマットすることができましたね。
ただ、FirefoxだとCSS適用できなかったです。

CSSは以下を参考：
[HTMLとCSSで作れる！見出しに使えるおしゃれな文字装飾サンプル ｜ CJコラム](https://citrusjapan.co.jp/column/cj-column/w006_201803.html)

## console.trace()で呼び出し元を追う
### trace()
`console.trace()`を呼び出した場所に至るまでの呼び出し経路を出力してくれるらしいので、
試してみます。

```js
const a = (s) =>  b(s);
const b = (s) =>  c(s);
const c = (s) =>  console.trace(s);
a("trace()");
```
![chrome_trace_.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/470f590f-12e9-9680-7486-a3f5e3c7b2be.gif)

呼び出し元を追えているのがわかりますね！

### trace()はフォーマット可能(Chromium)
`trace()`のログ、もうちょっと賑やかにしてみたくなりませんか？
Chromeでフォーマットできるか試してみました！

```js

const a = (s) => {
  console.trace(`%c a: %s`, 
   "color: red; font-size: 30px;  background: linear-gradient(transparent 60%, #ffff66 0%); ", s);
  b(s);
};
const b = (s) => {
  console.trace(`%c b: %s`, 
   "color: blue; font-size: 30px;  background: linear-gradient(transparent 60%, #ffff66 0%); ", s);
  c(s);
};
const c = (s) => {
  console.trace(`%c c: %s`,
   "color: green; font-size: 30px;  background: linear-gradient(transparent 60%, #ffff66 0%); ", s);
};
a("trace()");
```
![chrome_trace_color.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/1a19c0c5-4a86-82d1-3226-d4da9ccc2076.gif)
フォーマットできましたね。
ただ、Firefoxだとフォーマットできないです。残念です！

CSSは以下を参考：
[CSSでおしゃれな装飾！コピペで見出しをデザインしよう！ | みゆ何でもブログ](https://miyu-info.com/midashi/)

## counsole.count()でカウント
### count()
呼び出された回数を出力してくれるようです。
第一引数に文字列や数値、オブジェクトなどラベルを渡して複数管理でき、
不必要に複数回呼ばれてそうな処理がありそうなときとか確認するのに便利かなと思います。

```js

console.count("a");
console.count("b");
console.count("a");
```
![count.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/ee2ade0a-ecdb-7a55-d07d-bc899793a41f.gif)

### count()だとフォーマットはできませんでした
`count()`は第一引数しか見ていないようで複数の引数を渡しても意味ないです、
フォーマットはできません。


### countReset()でカウンターリセット
`countReset()`でカウンターをリセットできます。これはブラウザですこし違いがありました。
Chromeの実行してみた結果です。

```js

console.count("a");
console.count("a", "b");
console.count("a", "b", "c");

console.log("リセット!");
console.countReset("a");

console.count("a");
```
![chrome_countreset.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/f69e184c-32cb-4763-cab5-127c3bb325d6.gif)

Firefoxでも実行してみたものです。
![firefox_count.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/c1ef4e16-acfd-73d9-6870-e304ab8f5022.gif)
`countReset()`のときに0を出力してくれてて、Firefoxのほうがちょっと親切です笑

## console.group()でコンソールのログに階層をつける
複雑な時のログに使えるかもしれないです。

### group()、groupCollapsed()
`group()` 以降の出力を別レベルにインデントして、インライングループを作ってくれるメソッドです。

```js

console.group("1st");
console.group("2nd");
console.group("3rd");
```
![group.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/67143a98-d4b8-7d23-350f-b2087f4a7ff7.gif)
`group()`で出力される文字はすこし大きめに表示されるみたいですね。
わかりやすいですね。

`groupCollapsed`は最初から折りたたまれた状態で出力します。
 
```js

console.groupCollapsed("1st");
console.groupCollapsed("2nd");
console.groupCollapsed("3rd");
```
![groupCollapsed.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/ececdba3-c734-a4bb-a506-763c6833f2e0.gif)

### group()の引数
`group()`、`groupCollapsed()` は引数にとる文字列はログとして出力するために使うようで、
引数の文字が同じでも変えても特に結果に影響はありませんでした。
引数を複数指定することも出来ます。

### group()はフォーマット可能
引数がログに出力するために使われ、複数指定可能なところ、
ちょっと気になりませんか？
`group()`もフォーマットできるかなと試してみました。

```js

for(let n = 1; n < 10; n++){ 
    console.group(`%c Group:%s `, 
    `font-size: ${n*10}px; font-style: italic; letter-spacing: .1em; color: white; text-shadow: -4px 3px 0 #fa4141, -8px 6px 0 black;background:#fa4141; padding: ${n}px;`,n);
}
```
![group_9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/d902523f-ade8-803b-c27e-43f25227d409.gif)
やったね！

### groupEnd()
`groupEnd()`1回あたり1階層上に戻れます。
`group()`と組み合わせて試してみました。

```js

for(let n = 1; n < 7; n++){ 
    console.group(`%c Group:%s `, 
    `font-size: ${n*10}px; font-style: italic; letter-spacing: .1em; color: white; text-shadow: -4px 3px 0 #fa4141, -8px 6px 0 black;background:#fa4141; padding: ${n}px;`,(n + 9).toString(36).toUpperCase());
}
for(let n = 6; n > 0; n--){ 
    console.groupEnd();
    console.log(`%c Group:%s `, 
    `font-size: ${n*10}px; font-style: italic; letter-spacing: .1em; color: white; text-shadow: -4px 3px 0 #fa4141, -8px 6px 0 black;background:#fa4141; padding: ${n}px;`,(n + 9).toString(36).toUpperCase());
}
```
![group_end.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/3c7d37ea-6781-defb-045e-5e5473ec25b6.gif)

`groupEnd()`で上の階層に戻れてますね。
ちなみに、これはFirefoxでも同じように動きました！

CSSは以下を参考：
[CSS見出しデザイン参考100選！コピペ可！どこよりも詳しく解説！ | JAJAAAN](https://jajaaan.co.jp/css/css-headline/)

## console.table()でデータを表で出力
### table()で配列を表に出力
普通の配列で試すとこんな感じですね。
比較のために`log()`と`table()`の2つで出力してみます。

```js

const arr = [1,2,3,4,5];
console.log("log()", arr);
console.table(arr);
```
![table_arr.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/8d112066-ab09-ea4f-d531-6900c76409d9.gif)
`log()`だと配列のオブジェクトが表示されるだけですが、
`table()`だと表が出力されて並べ替えも出来ます。
表の下には配列のオブジェクトも表示されているので多めに情報をもらえる感じですね。

### table()でオブジェクトの配列を表に出力
こちらも、
比較のために`log()`と`table()`の2つで出力してみます！
この [Console Standard](https://console.spec.whatwg.org/#formatting-specifiers) の「Summary of formatting specifiers」の表を`table()`を使って再度表にしてます。

```js

const descriptions = []
descriptions.push({"Specifier":"%s","Purpose":"Element which substitutes is converted to a string","Type Conversion":"%String%(element)"});
descriptions.push({"Specifier":"%d or %i","Purpose":"Element which substitutes is converted to an integer","Type Conversion":"%parseInt%(element, 10)"});
descriptions.push({"Specifier":"%f","Purpose":"Element which substitutes is converted to a float","Type Conversion":"%parseFloat%(element, 10)"});
descriptions.push({"Specifier":"%o","Purpose":"Element is displayed with optimally useful formatting","Type Conversion":"n/a"});
descriptions.push({"Specifier":"%O","Purpose":"Element is displayed with generic JavaScript object formatting","Type Conversion":"n/a"});
descriptions.push({"Specifier":"%c","Purpose":"Applies provided CSS","Type Conversion":"n/a"});
console.log("log()", descriptions);
console.table(descriptions);
```
![table_obj.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/9eb2d630-9035-d604-c07a-baffbb7e0abf.gif)
オブジェクトの配列だと見やすいですね！
使える用途はありそうです。

### table()でクラスの配列を表に出力
オブジェクトのKeyが違っていても、
クラスがサブクラスでも、別のクラスでも平気なのか？
平気だろうなと想像できるのですが試してみました。

```js

class Data {
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }
}
class DummyData {
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }
}
class SubData extends Data {
  constructor(id, name, property, boss) {
    super(id, name);
    this.property = property;
    this.boss = boss;
  }
}
const data      = new Data(1, "Data");
const dummyData = new DummyData(2, "DummyData");
const subData   = new SubData(3,"SubData", 5000, data);
console.log("log()", [data, dummyData, subData]);
console.table([data, dummyData, subData]);
console.table([data, dummyData, subData],["id", "name"]);
```
![table_class.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/05146fc7-11ab-9ba8-0930-607a98be760f.gif)

見ればわかるように、
オブジェクトのkeyと階層が一致していれば同じ列に入れてくれるみたいです。
subdataのbossの`Data`は文字列でないのでクラス名が出力されているようですね。

また`table()`の第一引数のオブジェクトのkeyを
第二引数で配列で指定すれば表に出力する列を設定できるようです。

### table()で文字列を表に出力は出来ません
表になりません。
`log()`で出力したようになります。

### table()はフォーマットできるかな？
`log()`のようになるということは文字列をフォーマットできる？
Chromeで試してみました。

```js

console.table(`%cDOLCE%c&%cGABBANA`,
"font-size: 64px; font-family:Roboto,Helvetica Neue,sans-serif;",
"font-size: 32px; font-family:Roboto,Helvetica Neue,sans-serif; padding: 4px;",
"font-size: 64px; font-family:Roboto,Helvetica Neue,sans-serif;");
```
![table_css.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536039/e2274212-935f-226e-ab98-08be90328b95.gif)

CSS行けましたね。
ただ、`table()`の出力する文字列にCSSを適用させられても、表にCSSを適用させることはできなかったです笑

ちなみに、Firefoxはフォーマットができなくて文字が出力されるだけでした。
Chromiumのブラウザであればフォーマットが可能です。

## 最後に
楽しんで書いたのですが、
読んで楽しんでいもらえたり、役立つ情報がみつかったなら嬉しいです。
全部紹介したわけじゃないので、参考のページも見てもらえたらより情報が手に入ると思います。

もうすぐ年末ですね。
紅白歌合戦でどうなるのかなって気になってるアーティストさんがいるのでちょっと楽しみです。

明日は@shintaro_ike さんになります。
よろしくお願いします！

ウェブクルーでは一緒に働いてくれる方を絶賛募集中です！
興味のある方はぜひお問い合わせください。
[開発エンジニア | 株式会社ウェブクルー](https://hrmos.co/pages/1004681658307198976/jobs/214)

## 参考
##### 動作環境
PC : Windows 10 Pro (64 ビット)
Chormeバージョン: 86.0.4240.198（Official Build） （64 ビット）
Edgeバージョン: 87.0.664.47 (公式ビルド) (64 ビット)
Firefox : 83.0 (64 ビット)

### 参考情報
console - Web API | MDN
  https://developer.mozilla.org/ja/docs/Web/API/console
Console Standard
  https://console.spec.whatwg.org/

[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数
  https://qiita.com/kashira2339/items/874f95aaaa59f4a17d3d
console.logまとめ 2016年夏
  https://qiita.com/ykyk1218/items/0f5858d077d43a49cfe2
Node.js v10.0.0でconsole.table()追加&console.log()アップデートに感動したので早速試してみる
  https://qiita.com/n0bisuke/items/60e52cde73343bbe7703
console.log()系メソッドまとめ
  https://qiita.com/mooriii/items/afad70b19f8150f4f1b1
便利なconsole.xxx
  https://qiita.com/ryo2132/items/64c616a4cf0ae8770a9f
【2019年4月版】JavaScriptのconsoleがすごいことになってた。
  https://qiita.com/koinori/items/83f119cb2d82c0ca2c1e
JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか)
  https://qiita.com/mtoyopet/items/7274761af5424cee342a
【consoleオブジェクト完全版】ログ出力を極める！
  https://qiita.com/sa9ra4ma/items/bc6c12044582126c1be9

マスクを付けたサンタとトナカイのイラスト（クリスマス） | かわいいフリー素材集 いらすとや
  https://www.irasutoya.com/2020/11/blog-post_552.html

CSS3でテキストにグラデーションをかける方法
  https://marie-web.design/blog/text-gradation/
[CSS]background-clipで文字の形に背景を切り取る
  https://qiita.com/teinen_qiita/items/9c23ef3befcb1119bce2
background-clip - CSS: カスケーディングスタイルシート | MDN 
  https://developer.mozilla.org/ja/docs/Web/CSS/background-clip
CSSでおしゃれな装飾！コピペで見出しをデザインしよう！ | みゆ何でもブログ
  https://miyu-info.com/midashi/
HTMLとCSSで作れる！見出しに使えるおしゃれな文字装飾サンプル ｜ CJコラム
  https://citrusjapan.co.jp/column/cj-column/w006_201803.html
CSS見出しデザイン参考100選！コピペ可！どこよりも詳しく解説！ | JAJAAAN
  https://jajaaan.co.jp/css/css-headline/
font-familyで指定できるフォント名一覧
  https://w3g.jp/sample/css/font-family

Haskellをかける少女
  https://qiita.com/Yametaro/items/11dcd3ec26027ff30214
Haskellをかけない中年
  https://qiita.com/Yametaro/items/e163affa4b2db48f9957

Food & Beverage by Dolce & Gabbana | Italian specialties | Dolce & Gabbana | Dolce & Gabbana
  https://world.dolcegabbana.com/food-beverage/