JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか)

### 更新
2019/5/20
``console.trace()``、``console.time()``、 ``console.timeEnd()``、``console.clear()``を追記しました。


## この記事について
JavaScript大好きっ子とよももです！

JavaScriptの上手なconsole.log()の使用方法を調べていたらいろんな使い方があること、console.log()の他にも色々なデバッグ方法があることを知りました。
自分の勉強も兼ねてまとめてみることにしました。


## 賢いconsole.log()の使い方
### 例えば...
下記のような３つのオブジェクトがあるとします。

```javascript
 const foo = { name: "momoko", age: 29 };
 const bar = { name: "takeshi", age: 34 };
 const baz = { name: "saori", age: 15 };
```


### おすすめしないconsole.log()の使い方
こんな風にconsole.logすると、

```javascript
 // Bad :(
 console.log("↓ Bad :(");
 console.log(foo);
 console.log(bar);
 console.log(baz);
```


変数名が表示されず、どれがどれなのか一瞬ではわかりにくいですね。
console.log()も何度も入力しなければならず、とても手間です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/3e30bd19-216f-a892-be84-f72336b653db.png)

### おすすめのconsole.log()の使い方

こんな風にオブジェクトに変数を入れてconsole.logしてあげると、

```javascript
 // Good :)
 console.log("↓ Good :)");
 console.log({foo, bar, baz});
```

単純にコード数を減らせる上に、どの変数がどのデータを指しているのかが一瞬でわかります。すごーい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/41265b82-49a4-110b-50d5-6e72b4289b52.png)

### CSSスタイルの適用もできるよ
console.logしたいデータがとても重要で目立たせたい場合は、**「"%c + 文字列", "CSSスタイル"」**でCSSスタイリングを指定することも可能です。

```javascript
 // Good :)
 console.log("↓ Good :)");
 console.log("%c お友達！", "color: red; font- weight:bold");
 console.log({foo, bar, baz});
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/447767a3-c74a-9522-0761-3f8aaa604b52.png)

## console.table()のテーブル表示はすばらしく便利
オブジェクトは同じプロパティーを共有しているので、テーブルとして表示することも可能です。

```javascript
 console.table([ foo, bar, baz ]);
```

これは見やすい！特にオブジェクトの配列をconsole.logしたいときにとても便利ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/b0fd4bb1-22bb-3754-ead6-dff3e1d5e74a.png)

## DOMの詳細を見たいならconsole.dir()
console.dir()もconsole.log()とほぼ同じ動きをしてくれますが、**elementを代入したときに違いが見えます。**

```javascript
 let element = document.getElementById('test');

 console.log("↓console.log()だとこうなるよ");
 console.log(element);
 console.dir("↓console.dir()だとこうなるよ");
 console.dir(element);
```

console.log(element)は指定したDOMそのものを表示するのに対し、**console.dir(element)は指定したDOMの詳細を表示します。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/f5adc69e-053a-bca2-c6d9-931046e82ba0.png)

## あのオレンジ色の正体はconsole.warn()

たまにちらっと立ち寄ったWEBサイトでConsoleを見てみると出てくるオレンジ色のあれ、console.warn()でできました。

```javascript
let element = document.getElementById('test');

console.warn("お尻がかゆい");
console.warn(element);
```

何かを目立たせたいときにとても便利です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/a4d04139-c3ff-3871-3d3a-f283ed5a278a.png)

## console.assert()もあるよ
console.assert()はconsole.log()とほぼ同じ動きをしてくれます。
違いは、**1つ目の引数の結果が「false」の時にだけ、第２引数をlog()してくれる**ことです。

```javascript
// falseが返ってくるのでlog()される
console.assert(document.getElementById("demo"), "'demo'というIDはありません"); 
// trueが返ってくるのでlog()されない
console.assert(document.getElementById("test"), "'test'というIDはありません");
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/37c4918d-a38e-8668-0159-9d5c162246ee.png)


## console.count()も忘れないで

カウンターとして使いたいなら、console.count()がおすすめです。

```javascript

for (i = 0; i < 10; i++) {
  console.count();
}
``` 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/6bb405cc-427b-115a-f34d-8246d81c70e8.png)

## callbackにはconsole.trace()
callbackがどこから呼び出されているかを知りたい時は、console.trace()がとても便利です！

```javascript
    function foo() {
        function bar() {
          console.trace();
        }
        bar();
      }
      foo();
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/73db8b93-beb2-16e1-751b-b53fad02ea04.png)

##時間計測にconsole.time()とconsole.timeEnd()
この二つに関しては、console.time()〜console.timeEnd()が呼び出されるまでの間の時間を表示してくれます。

```javascript
function foo() {
 function bar() {
   console.time();
   console.log("タイマー開始");
   console.trace();
   }
   bar();
   }
   foo();
   console.timeEnd();
   console.log("タイマー終了");
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/84d99616-9297-bf13-a999-deef06b4ffa7.png)

## consoleを綺麗にしてくれるconsole.clear()
console.clear()に関してはとてもシンプル。コンソール上を一度まっさらな状態に戻してくれます。

```javascript
function foo() {
 function bar() {
  console.log("開始");
  console.log("いい天気だなぁ");
 }
 bar();
 console.clear();
}
foo();
console.log("終了");
```

「Console was cleared」とあるのが綺麗にされた部分ですね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/b13bf9f4-aea1-47f0-f86f-cf039115d162.png)


##グループ化したいならconsole.group()を！

あなたがJavaScriptマスターを目指していて、もっと深くて複雑でアドバンスなことをしたいなら、console.group()も使うといいかも。
データをネストして表示することができます。

```javascript
let number = 1;

console.group('Loopの外だよ');
console.log(number);
console.group('Loopの中だよ');

for (let i = 0; i < 5; i++) {
  number = i + number;
  console.log(number);
}
console.groupEnd();
console.log(number);
console.groupEnd();
console.log('おわり');
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/9ac3d584-31d1-cae8-0b89-ae769c396213.png)

このconsole.group()、どうやって使えばいいの？と思うかもしれませんが、こんな使い方ができるかも？しれません。

```javascript
class momoClass {
  constructor(dataAccess) {
    console.group('データタイプチェック');
    console.log('チェック結果');
    console.assert(typeof dataAccess === 'object',
      '誤ったデータタイプのオブジェクトの可能性があります');
    this.initializeEvents();
    console.groupEnd();
  }
  initializeEvents() {
    console.group('イベント');
    console.log('イベント発動中');
    console.groupEnd();
  }
}
let myClass = new momoClass(false);
```

このコードを入力してる暇があったらconsole.log()の連発でいい気がしますね！笑

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/ae7fc901-9d4b-a41e-388c-5eebfc087b4f.png)



## まとめ
ということで賢いconsole.log()やほかのconsole.XX()の使い方でした。
今までconsole.log()を何度も入力していたことに、後悔を覚えます。
いや〜勉強になったー！

## 参考
- [Beyond console.log()](https://medium.com/@mattburgess/beyond-console-log-2400fdf4a9d8)
- [JavaScript Pro Tips - Code this, NOT that](https://www.youtube.com/watch?v=Mus_vwhTCq0)

おわりっ