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>
上記は、以下のように表示されます。
何の変数に対する結果か分かり易くなります。