console.dirとは
console.dirは、スクリプト上に記述して使います。以下は、ブラウザのコンソール上で配列の中身を表示する時の例です。
【配列に対するconsole.dir利用例】
<script>
var x =
[["○","△","×"],
["□","□","□"],
["×","△","○"]];
console.dir(x);
</script>
ブラウザでF12キーを押してコンソールを選択すると、以下のように表示されます。
上記はFireFoxの表示例ですが、Google ChromeやMicrosoft Edgeでも使い方や表示は殆ど同じです。Internet Explorerでも使えますが、先にコンソールを開いておく必要があります。
document.writeやalertでも、ブラウザ上に「○,△,×,□,□,□,×,△,○」のように羅列して表示させる事は可能です。console.dirを使うと、ブラウザの表示に影響がないコンソールへ階層的に表示が可能になります。又、console.dirはコンソール上で直に入力しても動作します。
関数での利用
関数での利用例です。
【関数に対するconsole.dir利用例】
<script>
function func1() {
document.write("テストです");
}
console.dir(func1);
</script>
上記は、展開すると以下のように表示されます。
プロパティが確認出来ます。
オブジェクトでの利用
オブジェクトでの利用例です。
【オブジェクト(リテラル)に対するconsole.dir利用例】
<script>
var yamada = {
address: "Tokyo",
birthday: 2001
};
console.dir(yamada);
</script>
上記は、展開すると以下のように表示されます。
各プロパティの値が確認出来ます。
次は、コンストラクタ関数を使った場合の利用例です。
【オブジェクト(コンストラクタ)に対するconsole.dir利用例】
<script>
function Peaple(address,birthday) {
this.address = address;
this.birthday = birthday;
}
var suzuki = new Peaple("Kyoto",1999);
console.dir(Peaple);
console.dir(suzuki);
</script>
上記は、展開すると以下のように表示されます。
同様に、プロパティの値が確認出来ます。
DOMでの利用
DOMでの利用例です。
【DOMに対するconsole.dir利用例】
<p id ="dom-test">これはテストです。</p>
<script>
var x = document.getElementById("dom-test");
console.dir(x);
</script>
上記は、展開すると以下のように表示されます。
dom-testで使えるプロパティやメソッドが確認出来ます。例えばinnerHTMLでは、「これはテストです。」と文字列が確認出来ます。
クロージャでの利用
クロージャでの利用例です。
【クロージャに対するconsole.dir利用例】
<script>
function func1(x) {
function func2(y) {
return x + y;
}
return func2;
}
var myValue1 = func1(10);
console.dir(myValue1);
</script>
上記は、展開すると以下のように表示されます。
myValue1が関数func1ではなく、func2である事が確認出来ます。これは、クロージャがx = 10の状態で関数func2を使える事を示しています。
console.logとの違い
var x = 1をconsole.dir(x)で表示すると、Microsoft Edgeではエラーになります。console.logを使えば、値の1が表示されます。
console.log(func1)等で関数を表示すると、Google ChromeやMicrosoft Edge、Internet Explorerでは関数自体が表示されます。console.dirを使えば、階層構造的にオブジェクトのプロパティを確認出来ます。
このため、console.logはメッセージや変数の値を確認する時に使えます。配列やオブジェクト等階層構造として表示が必要な時は、console.dirが使えます。