コンソール出力はconsole.logだけじゃない！？console.dirの使いどころや便利な場面を考察

JavaScript

2023.04.14

エンジニアなら常識的に使っているconsole.log()。デベロッパーツールのコンソール画面に変数の値やオブジェクトの中身などを表示出来る便利な機能です。
F12キーでデベロッパーツールを開いてもいいですが、Ctrl + Shift + Jでクールにキメることもできます。（『コンソール画面を瞬時に開く』を参照）

ただ、console.log()というのは実はConsole APIの一つに過ぎないことが意外と知られていません。
そこで今回はコンソール画面に結果を出力するためのconsole.logとconsole.dirについて紹介したいと思います。

console.log()はログをコンソール画面に出力する便利な機能
console.dir()の使いどころを考える

console.log()はログをコンソール画面に出力する便利な機能

JavaScriptやNode.jsなどでログをコンソール出力する定番です。console.log()はどのオブジェクトでもコンソールに文字列や折り畳まれたオブジェクトの中身を表示することが出来ます。

const arraysample = ['apple', 'orange', 'banana', 'cherry', 'pine'];

for (let i = 0; i < arraysample.length; i++) {
  console.log(arraysample[i]);
}

上記コードの実行結果をデベロッパーツールのコンソールウィンドウで確認すると下記のような文字列が出ているのが確認できます。

apple
orange
banana
cherry
pine

とくに言及もいらない基本的な使い方です。

console.dir()の使いどころを考える

console.log()に次いでメジャーどころはconsole.dir()ではないでしょうか。こちらはMDN公式サイトによると

console.dir() メソッドは、指定された JavaScript オブジェクトのプロパティの対話的なリストを表示します。出力は折り畳み式の階層的なリストで表示され、子オブジェクトの中身を見ることができます。
言い換えれば console.dir() は指定された JavaScript オブジェクトのプロパティをすべてコンソール上で見る方法であり、開発者は簡単にオブジェクトのプロパティを得ることができます。
https://developer.mozilla.org/ja/docs/Web/API/console/dir

とあり、オブジェクトのプロパティを詳しく確認するのに便利そうな印象を受けます。

しかし、個人的にはオブジェクト内のプロパティの確認のみに焦点を当てるとconsole.log()とそこまで大差ないかなという感じがします。実際にconsole.dir()でオブジェクトを出力した場合とconsole.log()で同等のことをした場合を見てみると、console.log()の場合は

console.dir()にしてみると

うーん、あまり恩恵が感じられません。

では、dir()を使う最大のメリットがあるのは一体どのような場合なのか。
それは、DOMを取得して中身を確認する場合です。つまり

<div id ="dom-test">
  <span>これはテストです。</span>
  <div class="sampleclass">SampleClassDIV</div>
</div>
<!-- 上記のDOMを取得しJavaScriptでdir()出力してみます -->

<script>
const x = document.getElementById("dom-test");
console.dir(x);
console.log(x);
</script>

div#dom-testというエレメントをJavaScriptで取得して中身を確認するときは、log()よりもdir()の方が圧倒的に情報量が多いのです。

上記コードを出力し、比較すると一目瞭然です。
（このWebページに実際にconsole.dir()とconsole.log()しておきましたのでデベロッパーツールで確認できます。Ctrl + Shift + Jでクールにキメてみてください）

これはテストです。

SampleClassDIV