JavaScriptでコンソールにテーブルを出力する方法


  1. テーブル形式のデータを作成する: 最初に、テーブル形式で表示したいデータを準備します。これは、配列やオブジェクトの形式で表現できます。例えば、以下のようなデータがあるとします。

    const data = [
     { name: 'John', age: 25, city: 'Tokyo' },
     { name: 'Jane', age: 30, city: 'Osaka' },
     { name: 'Mike', age: 35, city: 'Kyoto' }
    ];
  2. テーブルを作成してコンソールに出力する: JavaScriptのconsole.table()メソッドを使用して、作成したデータをテーブル形式でコンソールに出力します。以下のコードを使用します。

    console.table(data);

    上記のコードを実行すると、以下のようなテーブルがコンソールに表示されます。

    ┌─────┬─────┬───────┐
    │ name │ age │ city  │
    ├─────┼─────┼───────┤
    │ John │ 25  │ Tokyo │
    │ Jane │ 30  │ Osaka │
    │ Mike │ 35  │ Kyoto │
    └─────┴─────┴───────┘

    テーブルの各列には、データオブジェクトのプロパティが表示されます。

  3. 応用例: テーブル形式でのデータの表示方法はさまざまなシナリオで役立ちます。例えば、APIから取得したデータを可視化する場合や、デバッグ情報を整理する場合などです。

    // APIから取得したデータ
    fetch('https://api.example.com/data')
     .then(response => response.json())
     .then(data => {
       console.table(data);
     })
     .catch(error => {
       console.error('データの取得に失敗しました:', error);
     });

    上記のコードでは、APIから取得したデータをconsole.table()を使ってテーブル形式で表示しています。また、エラーメッセージもコンソールに表示することで、問題が発生した場合に追跡しやすくしています。

これらの手順を参考にして、JavaScriptでテーブルをコンソールに出力する方法を実装してみてください。