JavaScriptで配列やオブジェクトのデータを見やすく表示したい場合、`console.table()`メソッドを使用すると便利です。このメソッドを使うことで、データを整理された表形式で確認することができます。

console.table()の基本的な使い方

const users = [
  { id: 1, name: '山田太郎', age: 25 },
  { id: 2, name: '鈴木花子', age: 30 },
  { id: 3, name: '佐藤次郎', age: 28 }
];

console.table(users);

このコードを実行すると、ブラウザの開発者ツールのコンソールに以下のような表形式でデータが表示されます：

  • インデックス番号
  • 各プロパティ（id, name, age）が列として表示
  • データが見やすく整理された状態

特定のカラムのみを表示する

表示するカラムを制限したい場合は、第2引数に配列で指定することができます：

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

これにより、nameとageのカラムのみが表示されます。

オブジェクトでの使用例

オブジェクトを直接渡すこともできます：

const grades = {
  math: 85,
  english: 90,
  science: 78,
  history: 92
};

console.table(grades);

console.table()のメリット

1. データの視認性が高い

2. デバッグ作業が効率的

3. 大量のデータでも整理された形で確認可能

4. 配列・オブジェクトどちらでも使用可能

ブラウザ対応状況

主要なモダンブラウザ（Chrome, Firefox, Safari, Edge）で使用可能です。ただし、Internet Explorer では非対応となっています。

注意点

  • Node.js環境でも使用可能ですが、表示形式は簡略化される場合があります
  • 大量のデータを表示する際はパフォーマンスに影響する可能性があります
  • 本番環境では使用を控えることをおすすめします

console.table()は開発時のデバッグツールとして非常に便利な機能です。特に配列やオブジェクトの構造を確認する際に重宝します。ただし、本番環境ではセキュリティやパフォーマンスの観点から、不要なconsole系メソッドは削除することをお勧めします。