JavaScriptを書いていると、「この変数、いま中身はどうなってるんだろう？」と確かめたくなる場面がたくさんあります。そんなとき、画面には出さずにこっそり中身をのぞけるのがconsole.logです。
コンソールを開いてみよう
コンソールは、ブラウザにはじめから入っている開発者ツールの中にあります。
- ページの上で右クリック→「検証」を選ぶ（またはWindowsは
F12、MacはCommand+Option+I） - 開いたパネルの上にあるタブから「Console」を選ぶ
これだけで準備完了。ここがJavaScriptからの「つぶやき」が届く場所です。実際に開くと、こんな画面になります。
console.logの中身だけが右側にならびます。各行の右端は「script.jsの何行目から出たか」の目印です。じつはこのコンソール、表示されるのを待つだけの場所ではありません。入力欄に直接JavaScriptを打ちこんで、その場で実行できます。ためしに1 + 2と打ってEnterを押すと、すぐに3と返ってきます。「この書き方で動くかな？」をファイルに書く前にちょっと試せる、小さな実験場でもあるのです。
書いてみよう
console.log("こんにちは！");これをscript.jsに書いてページを開くと、コンソールに「こんにちは！」と表示されます。画面（ページ本体）には何も出ません。出る場所がちがう——これがtextContentとの大きなちがいです。
| 部分 | 意味 |
|---|---|
console | コンソール（つぶやきの届け先） |
.log | 「記録して」のお願い |
( ) の中身 | 表示したいもの |
変数の中身を確かめる
console.logがいちばん活躍するのは、変数の中身を確かめたいときです。
const thanksMessage = "おたより ありがとう！";
console.log(thanksMessage);コンソールには「おたより ありがとう！」と表示されます。" "で囲まずに変数の名前を書けば、箱の中身が出てくるわけです。
ラベルを添えると見分けやすい
確かめたいものが増えてくると、コンソールに数字だけがぽつんと出ても「これ、どの変数だっけ？」となりがちです。そんなときは、,（カンマ）で区切ってラベルと中身をまとめて渡します。
const age = 3;
const city = "北海道";
console.log("age:", age);
console.log("city:", city);コンソールには「age: 3」「city: 北海道」のように、名前つきで表示されます。カンマで区切ればいくつでも並べて渡せるので、「どの値がどれか」がひと目で分かるようになります。
「どこまで動いた？」も確かめられる
コードが思いどおりに動かないとき、「そもそもここまで実行されてる？」を確かめるのにも使えます。
console.log("ここは通った！");
form.addEventListener("submit", function (event) {
console.log("ボタンが押された！");
});コンソールに「ボタンが押された！」が出なければ、押しても中の処理が動いていないと分かります。故障の場所をしぼりこむ懐中電灯のような使い方です。
べんりワザエラーが出ても、あわてないコンソールに出た赤いエラーの読み方は、こちらのべんりワザでこのレッスンのまとめ
console.log(中身)で、コンソールにこっそり表示できる- コンソールは右クリック→「検証」→「Console」タブで開く
- 変数の中身の確認、「どこまで動いた？」の調査、エラーの確認に大活躍