console.logだけではないconsoleの使い方

![alt_text](https://i0.wp.com/asameshicode.com/wp-content/uploads/2023/02/console.jpg?w=1280&ssl=1 "image_tooltip")

フロントエンド開発にあたりconsole.log()は黄金のツールです。しかし、このconsoleオブジェクトにはもっと使えるメソッドがあります。正しく、そして効率よくデバッグを行うためにこのconsoleについて調べていきましょう。

https://asameshicode.com/how-to-use-console/

## **console.logの問題**

console.logだけを使っているとコードがconsole.logだらけになり、どのコードを実行しているのかわからなくなり、読みづらくなってしまいます。今日はconsoleで使える９の方法を紹介していきます！


## **console.table**

console.tableは表形式でデータを表示してくれるので読みやすいデータを出力することが可能になります。


```JS
const sweets = [
 { id: 1, name: 'Ichigo Cake' },
 { id: 2, name: 'Red Pudding' }
];
console.table(sweets);
```


これを実行すると下記のようにテーブルで結果が返ってきました。





![alt_text](https://i0.wp.com/asameshicode.com/wp-content/uploads/2023/02/image.png?w=546&ssl=1 "image_tooltip")



## **console.group**

console.groupとconsole.groupEndを使ってネスト化されたアコーディオンでグループになったデータを表示できます。これで階層の違うデータを操作しながら確認することができますね。


```JS
console.group('User Info');
console.log('Name: John Doe');
console.log('Age: 32');
console.groupEnd();
```


このようにクリックしてデータをトグルできるようになりました。


![alt_text](https://i0.wp.com/asameshicode.com/wp-content/uploads/2023/02/image-1.png?w=558&ssl=1 "image_tooltip")



## **console.time**

console.timeとconsole.timeEndで指定したコードブロックが実行されるまでの時間を計算することができます。

特にパフォーマンスの検証をする際に使えます。

今回はポケモンAPIのデータ取得にかかった時間をミリ秒で表示してみました。


```JS
console.time('Fetching data');
fetch('https://pokeapi.co/api/v2/pokemon/ditto')
 .then(response => response.json())
 .then(data => {
   console.timeEnd('Fetching data');
   // Process the data
 });
```


このようにconsole.time()とconsole.timeEnd()内のストリングが同じ名前になっている部分を計算してくれます。


![alt_text](https://i0.wp.com/asameshicode.com/wp-content/uploads/2023/02/image-2.png?w=558&ssl=1 "image_tooltip")



## **console.assert**

assertは断言するという意味になります。つまり、常にtrueになると想定する状況を構築しておきます。もし、指定した状況がtrueでない場合に記述しておいたメッセージを表示することができます。コードが正しく実行されているか確認するために、バグをいち早くキャッチするために有効になります。


```js
function add(a, b) {
 return a + b;
}
// Test the add function
const result = add(2, 3);
console.assert(result === 50, 'Expected 2 + 3 = 5');
```


この場合は、resuletが50で返ってくる想定として、5で返ってきたためにメッセージが表示されました。



![alt_text](https://i0.wp.com/asameshicode.com/wp-content/uploads/2023/02/image-3.png?w=552&ssl=1 "image_tooltip")


もちろん、result ===5にすると関数が正しく作動していると検証されるのでコンソールには何も表示されなくなります。


## **console.logのスタイリング**

console.log()で表示させる内容をCSSでスタイリングすることができます。


```js
console.log('%cHello world!', 'color: red; font-weight: bold;');
```


このようにボールドで、赤文字のテキストが表示されました。


![alt_text](https://i0.wp.com/asameshicode.com/wp-content/uploads/2023/02/image-4.png?w=557&ssl=1 "image_tooltip")



## **console.trace**

console.traceはスタックトレースをアウトプットしてくれます。コードが複雑になり、実行される順番を確認したいときに便利になります。


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


このように、関数bar()を実行した際に発火されたfoo()がどこから呼び出されたか理解することができます。


![alt_text](https://i0.wp.com/asameshicode.com/wp-content/uploads/2023/02/image-5.png?w=534&ssl=1 "image_tooltip")



## **console.dir**

console.dirは、オブジェクトを階層ごとで表示することができます。もしオブジェクトをコンソールからみたい場合はこの方法が有効的です。


```js
const obj = {
 id: 1,
 name: 'John Doe',
 address: {
   street: '123 Main St',
   city: 'New York',
   zip: 10001
 }
};
console.dir(obj);
```


このようにトグルできるオブジェクトが表示されました。


![alt_text](https://i0.wp.com/asameshicode.com/wp-content/uploads/2023/02/image-6.png?w=530&ssl=1 "image_tooltip")



## **console.count**

console.countメソッドでは、指定したコードが何回実行されたのかトラッキングすることができます。


```js
function foo(x) {
 console.count(x);
}
foo('hello');
foo('world');
foo('hello');
```


このように、foo(‘hello’)が2回実行されたことが確認できますね。




![alt_text](https://i0.wp.com/asameshicode.com/wp-content/uploads/2023/02/image-7.png?w=557&ssl=1 "image_tooltip")



## **console.clear**

console.clearを実行するとコンソールに表示されるデータがクリア（削除）されます。もし、デバッグのアウトプットが多くて対象のものにフォーカスしたい場合は使ってみるものありですね。


```js
console.log('Hello world!');
console.clear();
console.log('This log message will appear after the console is cleared.');
```


このように、clearされたことが表示されて、その後に新しくコンソールを使うことができます。


![alt_text](https://i0.wp.com/asameshicode.com/wp-content/uploads/2023/02/image-8.png?w=547&ssl=1 "image_tooltip")



## **まとめ**

console.log()だけでない、consoleの使い方を９つ紹介いたしました。知らないもので今日から使えるものはありましたでしょうか？

是非、活用してみてください。

https://asameshicode.com/how-to-use-console/