2022-06-12

JavaScript: 2次元配列の出力はconsole.tableが便利

JavaScriptで開発をする時に変数の値を確認するためにブラウザのconsole.log()機能を使っている人も多いと思います。通常の変数や配列ならconsole.logで十分なのですが、 2次元配列等は思ったように表示されずに不便な場合があります。

2次元配列をconsoleに出力する場合はconsole.table()機能を使うと便利です。
次のサンプルコードでは、4行3列の2次元配列を用意し、 console.table()を使って表示しています。

// 2次元配列
let arr2 = [
    [10,20,30],
    [20,30,40],
	[30,40,50],
	[40,50,60]
];

// 出力
console.table(arr2);

以下はFireFoxでの出力例です。
一番左側の列が行番号（配列の添字）となっていて、一番上の行が要素番号になっています。

次はGoogle Chromeでの出力例です。 Chromeの場合、一番上の列番号が表示されている部分（下図の赤枠部分）をクリックすると、データのソートも出来ます。

このようにテーブル形式で表示してくれます。

2次元配列をコンソールに出力する場合、 console.log()をループで回すよりも、 console.table()を使ったほうが1行で済むので助かります。