HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのconsole.table()メソッドとは？使い方とサンプルコードを解説

HTML DOMのconsole.table()メソッドは、データを見やすく整理された表形式で表示するためのメソッドです。複雑な配列やオブジェクトを視覚的に把握したい場合に特に便利です。テーブルは、配列内の各要素が1行として配置されるように構成されます。このメソッドは、tabledata(必須)とtablecolumns(任意)の2つのパラメータを受け取ります。

構文

console.table()メソッドの構文は以下のとおりです。

console.table( tabledata, tablecolumns );

各パラメータの意味は次のとおりです。

  • tabledata: 必須パラメータです。テーブルに格納するデータを表します。オブジェクト型または配列型を指定できます。
  • tablecolumns: 任意パラメータです。テーブルに表示する列を指定するための配列です。指定しない場合は、すべての列が表示されます。

使用例

HTML DOMのconsole.table()メソッドの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>console.table() Method</h1>
<p>下のボタンをクリックするとコンソールにテーブルが作成されます</p>
<button type="button" onclick="createTable()">TABLE</button>
<script>
    function createTable(){
        var fruit1 = { Name : "Mango", price : "100", color: "Yellow" }
        var fruit2 = { Name : "Guava", price : "50", color:"Green" }
        var fruit3 = { Name : "Strawberry", price : "150", color:"Red" }
        console.table([fruit1, fruit2, fruit3], ["Name","price"]);
    }
</script>
<p>テーブルはコンソールタブで確認できます</p>
</body>
</html>

出力結果

上記のコードを実行すると、以下のような出力が得られます。

HTML DOMのconsole.table()メソッドとは？使い方とサンプルコードを解説

TABLEボタンをクリックし、コンソールタブで確認すると、次のように表示されます。

HTML DOMのconsole.table()メソッドとは？使い方とサンプルコードを解説

コードの解説

上記の例では、まずユーザーがクリックするとcreateTable()関数を実行するボタンを作成しています。

<button type="button" onclick="createTable()">TABLE</button>

createTable()関数の中では、fruit1、fruit2、fruit3という名前の3つのオブジェクトを作成しています。それぞれ果物の名前・価格・色の情報を持つオブジェクトです。その後、これらのオブジェクトを配列にまとめ、consoleオブジェクトのtable()メソッドの第1引数(tableData)として渡しています。

第2引数(任意)には、テーブルに含めたい列の名前を配列として渡します。この例では「Name」と「price」の2つの列を指定しているため、テーブルにはこれらの列のみが表示され、「color」列は表示されません。

function createTable(){
    var fruit1 = { Name : "Mango", price : "100", color: "Yellow" }
    var fruit2 = { Name : "Guava", price : "50", color:"Green" }
    var fruit3 = { Name : "Strawberry", price : "150", color:"Red" }
    console.table([fruit1, fruit2, fruit3], ["Name","price"]);
}

このようにconsole.table()メソッドを使うことで、開発者ツールのコンソール上でオブジェクトや配列のデータを表形式で簡単に可視化でき、デバッグ作業の効率を大幅に向上させることができます。

  1. HTML DOM テーブルの createTFoot() メソッドとは？使い方をサンプルコード付きで解説

    HTML DOM の createTFoot() メソッドは、HTML文書内のテーブルに対して空の <tfoot> 要素を生成し、テーブルに追加するためのメソッドです。テーブルのフッター行（合計欄や注釈など）を動的に作成したい場合に活用できます。構文createTFoot() メソッドの基本的な構文は以下のとおりです。object.createTFoot()引数は不要で、呼び出されたテーブルオブジェクトに <tfoot> 要素が存在しない場合は新しく生成して返します。すでに存在する場合は、既存の <tfoot> 要素をそのまま返します。createTFoot

  2. HTML DOM Table createCaption()メソッドとは？構文と使い方をサンプルコードで解説

    HTML DOM の Table createCaption() メソッドは、空の <caption> 要素を新しく生成し、HTML ドキュメント内のテーブルに追加するためのメソッドです。JavaScript を使ってテーブルにタイトル（キャプション）を動的に付加したい場合に活用できます。構文createCaption() メソッドの基本的な構文は以下のとおりです。object.createCaption()パラメータと戻り値このメソッドは引数を受け取りません。呼び出すと、新しく生成された <caption> 要素が戻り値として返されるため、その要素に対して textC