1. 導入：なぜconsole.dirが必要なのか？
フロントエンド開発中、デバッグのために console.log を多用していませんか？しかし、DOM要素や複雑な階層を持つJavaScriptオブジェクトを出力した際、「[object HTMLDivElement]」のように表示されて中身が確認できなかったり、逆にDOMの構造が邪魔でプロパティが見づらかったりすることがあります。そんな時、console.dir を使うことで、オブジェクトを「JavaScriptのプロパティ一覧」として整理された形で表示できるようになり、デバッグの効率が劇的に向上します。
2. 基礎知識：console.log と console.dir の違い
console.log は、ブラウザが「最も見やすい形式」で出力しようとします。DOM要素であればHTMLタグの構造として表示されるのがその典型です。対して console.dir は、対象を純粋なJavaScriptオブジェクトとして扱い、そのプロパティをツリー状のリストとして展開します。つまり、DOM要素の「HTMLとしての姿」ではなく「オブジェクトとしての姿」を確認したい時に不可欠なツールなのです。
3. 実装・解決策
使い方は非常に簡単で、引数に出力したいオブジェクトを渡すだけです。特におすすめなのは、APIから取得したレスポンスデータや、巨大なJSON構造を持つ変数の調査です。console.log で出力すると表示形式が崩れる場合でも、console.dir を使えば、すべてのプロパティを論理的な階層構造で探索できるため、予期せぬundefinedや型の間違いを即座に見つけることができます。
4. サンプルプログラム
以下のコードをブラウザのコンソールに貼り付けて、出力結果の違いを比較してみてください。
// 1. HTML要素を取得
const element = document.querySelector('body');
// 2. console.logだとDOM要素として表示される
console.log('--- logの結果 ---');
console.log(element);
// 3. console.dirだとプロパティ一覧として表示される
console.log('--- dirの結果 ---');
console.dir(element);
// 4. 複雑なオブジェクトで試す
const user = {
id: 1,
profile: {
name: '田中太郎',
settings: { theme: 'dark', notifications: true }
}
};
// オブジェクトの階層が深い場合、dirは特に威力を発揮します
console.dir(user);
5. 応用・注意点
現場での活用テクニックとして、console.dir(object, {depth: null}) と記述する方法があります。デフォルトではオブジェクトの深い階層が省略されることがありますが、第2引数にオプションを渡すことで、すべての階層を強制的に展開できます。
注意点として、console.dir はあくまでブラウザのコンソール上での確認用です。本番環境のコードに console.log や console.dir を残しすぎると、意図せず個人情報などがログ出力されるリスクがあるため、リリース前には必ず削除、あるいは eslint-plugin-no-console などのツールを使用して自動的に取り除く設定を行うことを強くおすすめします。