console.log(); しか使えなかった自分へ。。。

# この記事について
Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつも`console.log();`ばかりを使って原始的なデバッグをしていた。。。

そんな脳筋な過去の自分に教えてやるための記事です。


## console.log({変数名});
「いきなり`console.log();`の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。

以下のようなHTMLがある場合

```HTML
<form>
  <input type="text" value="名無しの権兵衛" id="name">
  <input type="text" value="80歳" id="age">
  <input type="text" value="バスケ" id="sport">
</form>
```

それぞれの`input`の要素・値を取得します。

```javascript
let nameForm = document.getElementById('name');
let ageForm = document.getElementById('age');
let sportForm = document.getElementById('sport');

let name = nameForm.value;
let age = ageForm.value;
let sport = sportForm.value;
```

上記で取得したinput要素の値を確認しようと思ったら、どれがどのinput要素の値なのかが分かるように`console.log(変数名: ${変数});`と、変数展開して書いていたが、書くのが非常に面倒やった。。。


```javascript
console.log(`name: ${name}`);
console.log(`age: ${age}`);
console.log(`sport: ${sport}`);
```

わざわざコロン区切りに書かなくても`console.log({変数名});`で同じ出力結果になる！！！！

```javascript
console.log({name});
console.log({age});
console.log({sport});
```


![スクリーンショット 2022-05-19 16.54.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653956/408c4548-9bd3-3c19-7992-a31eb14c328f.png)


https://css-tricks.com/console-log-myvariable/

### 追記

@fukken さんにご教示頂きました。
知らないことを学べるので、このような補足コメントは嬉しいです。ありがとうございました。

> {name: name} を {name} と書けるのはconsoleの機能じゃなくてES2015の記法（つまりconsoleに限らずモダンブラウザならJS内のどこでも使える）なので、念の為。

https://jsprimer.net/basic/object/

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#ecmascript_2015_%E3%81%A7%E3%81%AE%E6%96%B0%E3%81%97%E3%81%84%E8%A1%A8%E8%A8%98%E6%B3%95







## console.time();
処理にかかっている時間が知りたいなーという時は、該当の処理の場所を`console.time();`と`console.timeEnd();`で挟んでやる！！！
そうすることで、タイマー開始からの経過時間がミリ秒単位で出力される。

```javascript
console.time();
let input = document.getElementsByClassName('input');
console.log(input)
console.timeEnd();
```

![スクリーンショット 2022-05-19 17.54.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653956/fd294d10-ee2c-2c1a-6124-ceb973f7a373.png)


https://developer.mozilla.org/ja/docs/Web/API/console/time


## console.assert();
第１引数に渡された条件式が`false`になった場合、エラー形式で第２引数の内容をログとして出力させることができて、`true`の場合は何も出力されない。


```javascript
const isEven = num => num % 2 === 0;

console.assert(isEven(5), '奇数やで〜');
console.assert(isEven(10), 'これは出力されへんで〜');
```

![スクリーンショット 2022-05-20 9.03.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653956/b9fabfaf-b903-766a-180a-8d275692f0f4.png)


https://developer.mozilla.org/ja/docs/Web/API/console/assert


## console.table();
配列・オブジェクトの内容を表形式で表現したものを出力してくれる！！！

大量のinput要素があって、１つずつ要素を確認したいとなった時。。。

```HTMl
<form>
  <input type="text" value="1" class="input">
  <input type="text" value="2" class="input">
  <input type="text" value="3" class="input">
  <input type="text" value="4" class="input">
  <input type="text" value="5" class="input">
  <input type="text" value="6" class="input">
  <input type="text" value="7" class="input">
  <input type="text" value="8" class="input">
  <input type="text" value="9" class="input">
  <input type="text" value="10" class="input">
  <input type="text" value="11" class="input">
  <input type="text" value="12" class="input">
  <input type="text" value="13" class="input">
  <input type="text" value="14" class="input">
  <input type="text" value="15" class="input">
  <input type="text" value="16" class="input">
  <input type="text" value="17" class="input">
  <input type="text" value="18" class="input">
  <input type="text" value="19" class="input">
  <input type="text" value="20" class="input">
</form>
```

単純に以下のように取得しても、なんの事かよぉー分からんことになっている

```javascript
let input = document.getElementsByClassName('input');
console.log(input);
```


![スクリーンショット 2022-05-19 17.26.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653956/36bc5614-f3a1-1bc5-94c5-5f2c3eb2be4d.png)

これを見やすく表形式にできる技が`console.table();`なのだ！！！！

```javascript
let input = document.getElementsByClassName('input');
console.table(input);
```

![スクリーンショット 2022-05-19 17.28.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653956/876e1159-00df-7f55-8684-5fab8771248d.png)

「必要な情報だけが見たい！！！」という時は、第２引数に配列で指定したらいいだけ。

```javascript
let input = document.getElementsByClassName('input');
console.table(input, ["value"]);
```

![スクリーンショット 2022-05-19 17.30.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653956/e0df88ab-8bd2-1896-c1a3-1ea512d45abb.png)


https://developer.mozilla.org/ja/docs/Web/API/console/table


## 最後に
chromeも上手いこと使ってデバッグしてね！！！！！