JavaScriptのconsole.dirとconsole.logの違いとは？使い分けを徹底解説

console.log と console.dir の基本的な違い

JavaScript のデバッグで頻繁に使われる console.log() と console.dir() は、似たような目的で使用されますが、オブジェクトを出力する際の挙動に明確な違いがあります。

console.log() の特徴

console.log() は、引数として渡されたオブジェクトの toString 表現を表示します。文字列や数値などのプリミティブ値をそのまま出力するのに適しており、複数の値をカンマ区切りで同時に渡すことも可能です。

const user = { name: "太郎", age: 30 };
console.log(user);
// { name: '太郎', age: 30 }

console.dir() の特徴

console.dir() は、指定された JavaScript オブジェクトのプロパティ一覧を、対話的に操作できるリスト形式で表示します。出力は階層構造になっており、開閉用の三角アイコン（ディスクロージャートライアングル）をクリックすることで、子オブジェクトの内容を段階的に展開しながら確認できます。

console.dir(user);
// ▼ Object
//     name: "太郎"
//     age: 30

DOM要素を出力したときの違いが顕著

両者の違いが最もはっきり現れるのは、DOM 要素を出力するケースです。

• console.log(element): HTML のタグ構造そのものが出力される
• console.dir(element): textContent、children、classList など、要素が持つプロパティが一覧表示される

const div = document.querySelector("div");

console.log(div);
// <div>...</div>（HTMLとして表示）

console.dir(div);
// div {...}（オブジェクトのプロパティ一覧として表示）

Node.js 環境での挙動の違い

ブラウザ環境では単純なオブジェクトの場合、両者の見た目がほぼ同じになることもあります。しかし Node.js では、console.dir() が内部的に util.inspect を利用してオブジェクトを詳細かつ整形して出力するため、深いネスト構造を持つオブジェクトの調査に向いています。

使い分けのポイントまとめ

• 文字列や数値など、値をそのまま確認したい場合 → console.log()
• オブジェクトの内部構造やプロパティを詳しく調べたい場合 → console.dir()
• DOM 要素のプロパティを確認したい場合 → console.dir() が特に便利

日常的なデバッグでは console.log() だけで十分な場面が多いですが、オブジェクトの詳細な構造を把握したい場面では console.dir() を使い分けることで、デバッグ効率を大幅に向上させることができます。