console.logだけじゃない！JavaScriptのログ出力メソッド

## はじめに

JavaScript の`console.log`はよく使われるデバッグ手法ですが、`console`オブジェクトには他にも便利なメソッドが多数あります。本記事では、開発に役立つログ出力の方法を紹介します。

## console.table()

配列・オブジェクトを表形式で出力できます。

```js
const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 30 },
];
console.table(users);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/49827917-4230-4673-9169-3d22777662bd.png)

特定のプロパティのみ出力したい場合

```js
console.table(users, ["id", "name"]);
```

![image 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/7e5876da-578e-4860-9561-953bd517d855.png)

## console.dir()

オブジェクトのプロパティやメソッドをツリー構造で表示するのに便利です。

```js
console.dir(window);
```

![image 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/a8f8a498-3867-4701-bd9b-639cbdd1f227.png)

`console.log` との違いは Element を出力してみるとわかりやすいです。

```js
const main = document.querySelector("#main");
console.log(main);
console.dir(main);
```

▼ `console.log`で出力した場合（HTML 形式のツリー）
![image 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/088d4cd8-08e4-4112-a1d3-d9f564a8f5c1.png)

▼ `console.dir`で出力した場合（オブジェクトツリー）
![image 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/138a76ab-5b96-4112-b8e6-582bfecb3f82.png)

`console.log`では HTML として出力されるのに対し、`console.dir`を使うとオブジェクトの詳細な構造を確認できるため、DOM 要素のデバッグに便利です。

## console.group() / console.groupEnd()

ログをグループ化して整理できます。
group メソッドを呼び出してから groupEnd メソッドを呼び出すまでのログをグループ化して整理できます。入れ子にすることも可能です。

```js
console.group("ユーザー情報");
console.log("ID: 1");
console.log("名前: Alice");
console.group("詳細情報");
console.log("年齢: 25");
console.log("職業:エンジニア");
console.groupEnd();
console.groupEnd();
```

![image 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/e5a46e21-6bfe-467a-99e2-4a6b371e614b.png)

また、`console.groupCollapsed()`を使うと、デフォルトで閉じた状態になります。

```js
console.groupCollapsed("非表示のグループ");
console.log("このメッセージは最初は隠れています");
console.groupEnd();
```

## console.trace()

関数の呼び出し元（スタックトレース）を出力できます。
「関数 A の中で別の関数 B が呼び出されている」など、複数の関数が組み合わさっている時の動作確認に便利です。

```js
function funcA() {
  funcB();
}
function funcB() {
  console.trace("関数の呼び出し元を追跡");
}
funcA();
```

![image 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/62648cf6-2c8a-4115-944f-da8c0245ead3.png)

### console.group と console.trace の組み合わせ

`console.group`と`console.trace`を組み合わせると、呼び出し履歴を整理しながらデバッグできます。

```js
function startProcess() {
  console.group("処理開始");
  stepOne();
  stepTwo();
  console.groupEnd();
}
function stepOne() {
  console.group("ステップ1");
  console.trace("ステップ1の呼び出し元");
  console.groupEnd();
}
function stepTwo() {
  console.group("ステップ2");
  console.trace("ステップ2の呼び出し元");
  console.groupEnd();
}
```

![image 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/c8bd4bce-63be-4853-ad29-6688cfb5236b.png)

## console.time() / console.timeEnd()

time メソッドの呼び出し～ timeEnd メソッドの呼び出しまでの実行時間を計測できます。

```js
console.time("処理時間");
for (let i = 0; i < 1000000; i++) {} // 何らかの処理
console.timeEnd("処理時間");
```

![image 8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/d3109773-38cf-4ba0-84a1-ec9c0b0c10d6.png)

## console.clear()

出力したログをクリアできます。
`setInterval`などで定期的にログを更新する際に、過去のログを消して最新の情報だけを表示させたい時に便利です。

```js
setInterval(() => {
  console.clear();
  console.log("現在の時刻:", new Date().toLocaleTimeString());
}, 1000);
```

![image 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/8045da50-8deb-401d-bf81-5ac58f864eb1.png)

## 番外：JSON.stringify と console.log

オブジェクトをログ出力する際、`JSON.stringify` を使うと見やすくなります。

```js
const obj = { name: "Alice", age: 25 };
console.log(JSON.stringify(obj));
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/91a53f0c-28cb-424b-bfec-c3a68b9cdd5d.png)

## まとめ

| メソッド                                                        | 説明                                       |
| --------------------------------------------------------------- | ------------------------------------------ |
| `console.log`                                                   | 通常のログ出力                             |
| `console.table`                                                 | 配列・オブジェクトを表形式で表示           |
| `console.dir`                                                   | オブジェクトの詳細情報をツリー構造で表示   |
| `console.group` / `console.groupCollapsed` / `console.groupEnd` | ログをグループ化して整理（ネスト可）       |
| `console.trace`                                                 | 関数の呼び出し元（スタックトレース）を出力 |
| `console.time` / `console.timeEnd`                              | 実行時間を計測                             |
| `console.clear`                                                 | コンソールの出力をクリア                   |
| `JSON.stringify`                                                | オブジェクトをフォーマットしてログ出力     |

## 参考

https://developer.mozilla.org/en-US/docs/Web/API/console

---

オブジェクティブグループでは X の投稿も平日毎日行っています！
IT 関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。

https://x.com/obg_ocr