console.table でデータを見やすく表示 - JavaScript

console.table は配列やオブジェクトを表形式で表示するメソッドです。データの一覧を確認したいときや、複数のオブジェクトを比較したいときに威力を発揮します。

基本的な使い方

配列を渡すと、インデックスと値が表形式で表示されます。

const fruits = ['りんご', 'みかん', 'ぶどう'];
console.table(fruits);

(index)	Values
0	りんご
1	みかん
2	ぶどう

オブジェクトの配列を表示

実務で最もよく使うパターンです。各オブジェクトのプロパティが列になります。

const users = [
  { name: 'Alice', age: 30, city: 'Tokyo' },
  { name: 'Bob', age: 25, city: 'Osaka' },
  { name: 'Charlie', age: 35, city: 'Nagoya' }
];

console.table(users);

(index)	name	age	city
0	Alice	30	Tokyo
1	Bob	25	Osaka
2	Charlie	35	Nagoya

console.log では展開しないと中身が見えませんが、console.table ならひと目で比較できます。

表示する列を指定する

第 2 引数に配列を渡すと、表示する列を絞り込めます。

const users = [
  { name: 'Alice', age: 30, city: 'Tokyo', email: 'alice@example.com' },
  { name: 'Bob', age: 25, city: 'Osaka', email: 'bob@example.com' }
];

console.table(users, ['name', 'city']);

(index)	name	city
0	Alice	Tokyo
1	Bob	Osaka

プロパティが多いオブジェクトで、必要な情報だけを見たいときに便利です。

単純なオブジェクトを表示

配列でない普通のオブジェクトも表形式で表示できます。

const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retryCount: 3
};

console.table(config);

(index)	Values
apiUrl	https://api.example.com
timeout	5000
retryCount	3

キーが行のラベルになります。

ネストしたオブジェクト

ネストしたオブジェクトの場合、第 1 階層のキーが行になります。

const data = {
  user1: { name: 'Alice', score: 85 },
  user2: { name: 'Bob', score: 92 },
  user3: { name: 'Charlie', score: 78 }
};

console.table(data);

(index)	name	score
user1	Alice	85
user2	Bob	92
user3	Charlie	78

Map と Set

Map や Set も console.table で表示できます。

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

console.table(map);

(index)	Key	Value
0	a	1
1	b	2
2	c	3

実践例：API レスポンスの確認

API から取得したデータを確認するときに重宝します。

fetch('/api/products')
  .then(res => res.json())
  .then(products => {
    console.table(products, ['id', 'name', 'price']);
  });

必要な列だけを指定することで、大量のデータでも見やすくなります。

DOM 要素の一覧

querySelectorAll で取得した要素リストも表示できます。

const buttons = document.querySelectorAll('button');
console.table(buttons, ['innerText', 'className', 'disabled']);

ページ上の要素を俯瞰して確認したいときに使えます。

注意点

console.table はあくまでデバッグ用です。本番コードに残さないよう注意しましょう。また、データ量が非常に多い場合はブラウザの動作が重くなることがあるため、適宜フィルタリングして使うのがおすすめです。