console.dirの使い方/JavaScript

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はコンソール上で直に入力しても動作します。

関数での利用

　関数での利用例です。

<script>
function func1() {
    document.write("テストです");
}

console.dir(func1);
</script>

　上記は、展開すると以下のように表示されます。

　プロパティが確認出来ます。

オブジェクトでの利用

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

<script>
var yamada = {
    address: "Tokyo",
    birthday: 2001
};

console.dir(yamada);
</script>

　上記は、展開すると以下のように表示されます。

　各プロパティの値が確認出来ます。

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

<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での利用例です。

<p id ="dom-test">これはテストです。</p>

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

　上記は、展開すると以下のように表示されます。

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

クロージャでの利用

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

<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が使えます。