console.dirの使い方

console.dirを使うと、ブラウザのコンソール上に配列やオブジェクトの中身を階層的に表示することができます。

console.dirとは

console.dirは、スクリプト上に記述して使います。以下は、ブラウザのコンソール上で配列の中身を表示する時の例です。

【配列に対するconsole.dir利用例】
let x =
 [["○","△","×"],
 ["□","□","□"],
 ["×","△","○"]];
console.dir(x);

ブラウザでF12キーを押してコンソールを選択すると、以下のように表示されます。

console.dirの説明

上記はFirefoxの例ですが、Google ChromeやMicrosoft Edgeでも使い方や表示はほとんど同じです。

document.writeやalertでも、ブラウザ上に「○,△,×,□,□,□,×,△,○」のように羅列して表示させることは可能です。console.dirを使うと、ブラウザの表示に影響がないコンソールへ階層的に表示が可能になります。また、console.dirはコンソール上で直に入力しても動作します。

関数での利用

関数での利用例です。

【関数に対するconsole.dir利用例】
function func1() {
  alert("テストです");
}

console.dir(func1);

上記は、コンソールで以下のように表示されます。

関数にconsole.dirを使った例

プロパティが確認できます。

オブジェクトでの利用

オブジェクトでの利用例です。

【オブジェクト(リテラル)に対するconsole.dir利用例】
const yamada = {
  address: "Tokyo",
  birthday: 2001
};

console.dir(yamada);

上記は、コンソールで以下のように表示されます。

オブジェクトにconsole.dirを使った例

各プロパティの値が確認できます。

次は、コンストラクタ関数を使った場合の利用例です。

【オブジェクト(コンストラクタ)に対するconsole.dir利用例】
function Peaple(address,birthday) {
  this.address = address;
  this.birthday = birthday;
}

const suzuki = new Peaple("Kyoto",1999);
console.dir(Peaple);
console.dir(suzuki);

上記は、コンソールで以下のように表示されます。

オブジェクト(コンストラクタ)にconsole.dirを使った例

同様に、プロパティの値が確認できます。

DOMでの利用

DOMでの利用例です。

【DOMに対するconsole.dir利用例】
<p id ="dom-test">これはテストです。</p>

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

上記は、コンソールで以下のように表示されます。

DOMにconsole.dirを使った例

dom-testで使えるプロパティやメソッドが確認できます。例えばinnerHTMLでは、「これはテストです。」と文字列が確認できます。

クロージャでの利用

クロージャでの利用例です。

【クロージャに対するconsole.dir利用例】
function func1(x) {
  function func2(y) {
    return x + y;
  }
  return func2;
}

let closure1 = func1(10);
console.dir(closure1);

上記は、コンソールで以下のように表示されます。

クロージャでconsole.dirを使った例

closure1が関数func1ではなく、func2であることが確認できます。これは、クロージャがx = 10の状態で関数func2を使えることを示しています。

console.logとの違い

console.log(func1)などで関数を表示すると、Microsoft Edgeでは関数自体が表示されます。console.dirを使えば、階層構造的にオブジェクトのプロパティを確認できます。

console.logとconsole.dirの違い

このように、console.logを使うとGoogle ChromeやMicrosoft Edgeでは関数や要素などをそのまま表示することがあります。

つまり、プロパティなどを確認したい場合はconsole.dirを使うのがお薦めです。