JavaScriptで開発者ツール上で特定のオブジェクトの構造を確認するのに便利なconsole.dir()・console.table()メソッドの使い方

JavaScriptで開発者ツール上で特定のオブジェクトの構造を確認するのに便利なconsole.dir()・console.table()メソッド

JavaScriptで開発者ツール上で特定のオブジェクトの構造を確認するにはconsole.dir()・console.table()メソッドを使います。

オブジェクトや配列を使っていると、深い構造のデータを扱うことがあり、その様なデータを効率良く確認するにはこれらのメソッドが役立ちます。

メソッド

メソッド意味返り値
console.dir(オブジェクト)オブジェクトの構造を出力なし
console.table(オブジェクト )オブジェクトの構造をテーブルにして出力なし
console.dir と console.tablebの仕様

サンプルコード

サンプルコードとして、簡易なオブジェクトを出力するためのサンプルコードを紹介します。

まずは元データです。

JavaScript
// console.table のサンプル
const targetArray = [
  { id: 1, name: 'User A', age: 10 },
  { id: 2, name: 'User B', age: 20 },
  { id: 3, name: 'User C', age: 30 }
];

それでは、2つのコードの実行結果を見ていきましょう

console.dir()

JavaScript
console.dir(targetArray);
Console.rir()の出力例
Console.rir()の出力例

console.table()

JavaScript
console.tableの出力例
console.tableの出力例
console.tableの出力例
インストラクター