2024-08-26

JavaScript: オブジェクトの出力はconsole.dir()が便利

JavaScriptの開発時に、変数の値をコンソールに表示させたい場合は通常 console.log()を使います。

オブジェクトの内容を表示させたい場合もconsole.log()で表示できるのですが、横方向にプロパティが表示されます。

次のようなオブジェクトをconsole.log()で表示させてみます。


var obj = {x: 1, y: 20, z: 50};

console.log(obj);

表示結果は次のようになります。（Firefox での表示例）


Object { x: 1, y: 20, z: 50 }

プロパティが横方向に表示されていますね。プロパティの表示を横方向でなく、縦方向に表示させたい場合は console.dir()を使います。


var obj = {x: 1, y: 20, z: 50};

console.dir(obj);

表示結果は次のようになります。（Firefox での表示例）

横方向＋縦方向にも表示されています。

どちらが見やすいかはケースバイケースですが、オブジェクトのプロパティを縦方向に一覧表示したい場合は、 console.dir()を使うと表示できます。