console.logの使い方/JavaScript

console.logを使うと、ブラウザのコンソール上にメッセージを表示する事が出来ます。

又、変数の値やオブジェクトのプロパティ等を簡単に確認する事も出来ます。

console.logとは

　console.logは、スクリプト上に記述して使います。以下は、ブラウザのコンソール上にメッセージを表示する時の例です

【ブラウザのコンソールにメッセージを表示する時のスクリプト例】

<script>
console.log("テスト");
</script>

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

　上記はFireFoxの例ですが、Google ChromeやMicrosoft Edgeでも使い方や表示は殆ど同じです。Internet Explorerでも使えますが、先にコンソールを開いておく必要があります。

　document.writeやalertでもメッセージは表示可能ですが、console.logを使えばブラウザ上の表示に影響のないコンソールへ表示が可能になります。

変数の表示

　console.logは、変数の中身を確認する時にも使えます。

【変数に対するconsole.log利用例】

<script>
var x = 1;
console.log(x);
</script>

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

　変数xの値が確認出来ます。

オブジェクトでの利用

　document.write(x);やalert(x);等でも変数の値は確認出来ますが、xがオブジェクトの場合は[object Object]と表示されるだけです。console.logを使うと、オブジェクトのプロパティも確認出来ます。

　以下は、利用例です。

【オブジェクト(リテラル)に対するconsole.log利用例】

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

console.log(yamada);
</script>

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

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

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

【オブジェクト(コンストラクタ)に対するconsole.log利用例】

<script>
function Peaple(address,birthday) {
    this.address = address;
    this.birthday = birthday;
}

var suzuki = new Peaple("Kyoto",1999);
console.log(Peaple);
console.log(suzuki);
</script>

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

ブラウザのコンソールにコンストラクタ関数やオブジェクトのプロパティを表示させた例

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

　尚、FireFoxでは上記のようにPeapleのプロパティも確認出来ますが、Google ChromeやMicrosoft Edge、Internet Explorerでは関数自体が表示されます。

多数の出力がある場合に分かり易くする

　console.logの出力が1つであれば何の結果かすぐ分かりますが、多くなってくると分かり辛くなります。このため、以下のようにも記述出来ます。

【メッセージを追加した変数に対するconsole.log利用例】

<script>
var x = 1;
console.log("変数xの結果", x);
</script>