console.logの使い方/JavaScript

console.logとは

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

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

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

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

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

変数の表示

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

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

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

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

オブジェクトでの利用

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

　以下は、利用例です。

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

console.log(yamada);
</script>

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

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

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

<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つであれば何の結果かすぐ分かりますが、多くなってくると分かり辛くなります。このため、以下のようにも記述出来ます。

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

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

　何の変数に対する結果か分かり易くなります。