【JavaScript】Consoleの基本的な出力とグループ化

JavaScriptでコンソールに出力するときにはconosle.logをよく使うがそれ以外にもメソッドが用意されている。

それらを使用することで色分けなどができてログが見やすくなる。

基本的なログ出力のメソッドは下記の4つがある。

| メソッド | 概要 |
|:-:|:-:|
| log  | 一般的なログ  |
| info  | 一般情報を表すログ  |
| warn  |  警告を表すログ |
| error  |  エラーを表すログ |



実際に出力しているところを見てみる。

``` sample.js
document.addEventListener('DOMContentLoaded', function() {
    console.log("test");
    console.info("test");
    console.warn("test");
    console.error("test");
}, false);
```

出力結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935552/6280a7f6-2a14-6ead-eb91-409fc1938e21.png)

warnは警告マーク、errorはエラーマーク＋赤文字でログが出力される。

chromeの場合、logとinfoは違いがなくぱっと見ただけではどちらかわからないが、FirefoxとSafariの場合にはアイコンが付く。

また、chromeのデベロッパーツールを使用すればログの絞り込みをすることができる。

先ほどの出力結果の画像でDefault levelsと書いてあるプルダウンがあるが、ここで表示するログの絞り込みを行うことができる。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935552/80fb040f-dbcc-fa61-f41c-e57067af7863.png)




試しにwarningsのチェックを外してみると、console.warnで出力したログが非表示になる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935552/e6bc97ec-6765-f415-c555-08a49067541b.png)



### ログの書式

ログには以下のような構文がある。

```
console.log(format, args...)

format:書式文字列
args:書式文字列に埋め込む値
```

formatに埋め込むことができる書式指定子は以下の通り。

| 書式指定子 | 概要 |
|:-:|:-:|
| %s  | 文字列  |
|  %d, %i |  整数値 |
| %f  | 浮動少数点数  |
| %o, %O  | オブジェクトを出力  |


例↓

``` sample.js
console.log("名前→%s, 年齢→%d", "佐藤太郎", 20);
```

出力結果
```
名前→佐藤太郎, 年齢→20
```


# ログのグループ化

groupメソッド、groupEndメソッドを使用することで、groupメソッドを呼び出してからgrooupEndメソッドを呼び出すまでに存在するログをグループ化することができる。

``` sample.js
document.addEventListener('DOMContentLoaded', function() {
    

    console.group("サンプルグループ");

    console.log("log1");
    console.log("log2");
    console.log("log3");

    console.groupEnd();

}, false);
```


出力結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935552/5c637138-5292-98a6-7bf5-de8517cbf379.png)

外側のfor文でログ全体をグループ化し、内側のfor文で子グループを作成する処理。

``` sample.js
document.addEventListener('DOMContentLoaded', function() {
    

    console.group("親グループ");
    console.log("親グループのログ");
    
    for(let i = 0; i < 3; i++) {
        console.group("子グループその" + i);
        for(let j = 0; j < 3; j++) {
            console.log("子グループその" + i +  "のログ" + j);
        }
        //子グループのgroupEnd
        console.groupEnd();    
    }
    // 親グループのgroupEnd
    console.groupEnd();

}, false);


```


出力結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935552/67d6850d-fa36-dc4e-c695-392c0443f605.png)





groupメソッドの代わりにgroupCollapsedメソッドを使用するとグループが折りたたまれた状態で表示される。

ログの量が増えてきたときに見やすくするのに活用できる。

``` sample.js
document.addEventListener('DOMContentLoaded', function() {
    

    console.groupCollapsed("親グループ");
    console.log("親グループのログ");
    
    for(let i = 0; i < 3; i++) {
        console.groupCollapsed("子グループその" + i);
        for(let j = 0; j < 3; j++) {
            console.log("子グループその" + i +  "のログ" + j);
        }
        //子グループのgroupEnd
        console.groupEnd();    
    }
    // 親グループのgroupEnd
    console.groupEnd();

}, false);


```


出力結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935552/3c0e5ae6-f201-6898-a122-7902222c6d2a.png)



三角マークをクリックすると開くことができる。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935552/40857d5c-11f9-3ccc-ba2c-52b9c0664afc.png)