JavaScript 逆引き集 | console.table で配列表現

console.table で配列表現 — console.table(data)

JavaScript の console.table は「配列やオブジェクトを表形式で見やすく表示する」ための便利な関数です。
初心者は「配列やオブジェクトを表にして確認できるデバッグ用ツール」と覚えると理解しやすいです。

基本のコード例

const data = [
  { name: "Aki", age: 20 },
  { name: "Mika", age: 25 },
  { name: "Ken", age: 30 }
];

console.table(data);

const data = [
  { name: "Aki", age: 20 },
  { name: "Mika", age: 25 },
  { name: "Ken", age: 30 }
];

console.table(data);

出力例（ブラウザのコンソールや Node.js の標準出力に表示）:

┌─────────┬─────────┬─────┐
│ (index)        │  name          │ age     │
├─────────┼─────────┼─────┤
│    0           │  'Aki'         │ 20      │
│    1           │  'Mika'        │ 25      │
│    2           │  'Ken'         │ 30      │
└─────────┴─────────┴─────┘

• 配列の各要素が行に、プロパティが列に並ぶ。
• インデックス（0,1,2…）も自動で表示される。

よく使うテンプレート集

単純な配列

const arr = ["apple", "banana", "cherry"];
console.table(arr);

const arr = ["apple", "banana", "cherry"];
console.table(arr);

出力例:

┌─────────┬──────────┐
│ (index)        │ Values           │
├─────────┼──────────┤
│    0           │ 'apple'          │
│    1           │ 'banana'         │
│    2           │ 'cherry'         │
└─────────┴──────────┘

オブジェクトの配列

const users = [
  { id: 1, name: "Aki" },
  { id: 2, name: "Mika" }
];

console.table(users);

const users = [
  { id: 1, name: "Aki" },
  { id: 2, name: "Mika" }
];

console.table(users);

特定の列だけ表示

const users = [
  { id: 1, name: "Aki", age: 20 },
  { id: 2, name: "Mika", age: 25 }
];

console.table(users, ["name", "age"]);

const users = [
  { id: 1, name: "Aki", age: 20 },
  { id: 2, name: "Mika", age: 25 }
];

console.table(users, ["name", "age"]);

出力例: id 列は省略され、name と age だけ表示される。

例題: APIレスポンスを見やすく表示

async function showPosts() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=3");
  const posts = await res.json();
  console.table(posts, ["id", "title"]);
}

showPosts();

async function showPosts() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=3");
  const posts = await res.json();
  console.table(posts, ["id", "title"]);
}

showPosts();

• 効果: JSON データを表形式で確認できるので、デバッグが楽になる。

実務でのコツ

• デバッグに最適: 配列やオブジェクトの中身を一目で確認できる。
• 列指定で見やすく: 不要な列を省略して必要な情報だけ表示できる。
• ブラウザ/Node.js 両方で使える: 開発環境を問わず利用可能。

ありがちなハマりポイントと対策

• 深い入れ子構造は展開されない: ネストしたオブジェクトは [object Object] と表示される。
  • → 必要なら JSON.stringify を使う。

console.table([{ nested: { x: 1 } }]);
// nested 列は [object Object] と表示される

console.table([{ nested: { x: 1 } }]);
// nested 列は [object Object] と表示される

練習問題（商品リストを表示）

const products = [
  { id: 101, name: "Laptop", price: 120000 },
  { id: 102, name: "Phone", price: 80000 },
  { id: 103, name: "Tablet", price: 60000 }
];

console.table(products, ["name", "price"]);

const products = [
  { id: 101, name: "Laptop", price: 120000 },
  { id: 102, name: "Phone", price: 80000 },
  { id: 103, name: "Tablet", price: 60000 }
];

console.table(products, ["name", "price"]);

直感的な指針

• console.table(data) = 配列やオブジェクトを表形式で表示。
• 列指定も可能。
• デバッグやデータ確認に便利。
• 初心者は「配列」「オブジェクト配列」「列指定」で練習すると理解が深まる。

これを覚えれば「データを見やすく整理して確認」できるようになり、デバッグ効率がぐっと上がります。