
console.log(コンソール・ログ)って何?

ブラウザのコンソールにメッセージを出力できる関数だよ。

コンソール?関数?
いまいちイメージが掴めないっす。

まぁこれだけだとわからないよね。
とにかくconsole.logはよく使うの関数なので見ていこう!
目次
console.logとは
console.logで設定した値を、console(コンソール)という画面にlog(履歴・メッセージ)を出力するJavaScriptの関数です。
使い所として、開発時のデバッグを行う時によく使われます。

関数とは与えられた入力に何らかの処理をして、その結果を返す仕組みだよ。
デバッグはプログラムの間違ったところを直していくことだよ。
console.logの出力結果を表示するための準備
それではconsole.logの出力結果を表示するための準備をしていきましょう。
開発者ツールを起動する
まず開発者ツールを起動します。
ブラウザには標準で開発のサポートをする開発者ツールが搭載されています。
今回はGoogle Chromeブラウザで説明していきます。
まだGoogle Chromeをインストールしていない方はこちらからインストールしてください。
参考 Google ChromeGoogle Chrome開発者ツールを起動するにはブラウザを開いた後に、[右クリック] > [検証]をクリックしてください。
下記のような画面が表示されていれば開発者ツールが起動している状態です。

開発者ツール起動のショートカットキー
- WindowsOSの場合 [F12]
- MacOSの場合 [option] + [command] + [i]
Consoleタブを表示する
開発者ツールにはいろいろな機能が備わっていて、その中でconsole.logを使うときに必要なのがConsoleタブになります。
開発者ツールのConsoleタブをクリックして選択してください。

もしConsoleタブが表示されていなければ、隠れているので[>>]をクリックするとセレクトボックスが表示されるのでConsoleを選択してください。

これでconsole.logの出力結果を表示するための準備が完了です。
続いてconsole.logの使い方をみていきましょう。
console.logの使い方
使い方は簡単で、console.logの()内に文字や値を入れて実行するだけです。
それでは以下のコードを書いて開発者ツールのConsoleタブにconsole.logの実行結果を出力してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>console.log</title>
</head>
<body>
<main>
<p>Hello World</p>
</main>
<script>
// console.logの実行
console.log('Hello World');
</script>
</body>
</html>
実行結果の出力内容をConsoleタブに表示させるには、console.logを書いたファイルをブラウザで開く、すでに開いている場合はリロードをします。
うまく実行されれば下記のように、Consoleタブに「Hello World」と表示されます。

console.logの使い方は基本はこれで終わりです。
今は文字を出力しているだけなので必要性はあまり感じられませんが、複雑なプログラムになってくると、処理の流れや値の状態など頭の中だけでは整理できなくなってきます。
そんな時にconsole.logを使えばConsoleタブに値の状態を可視化できるので、プログラムの整理ができるようになります。
まずここではconsole.logを使い方だけでも覚えておきましょう。
まとめ
最後にポイントをまとめておさらいをしましょう!
- console.logは開発時のデバッグで使われるJavaScriptの関数。
- console.logはブラウザのコンソールに出力結果を表示する。
- console.logを使うと、処理の流れや値の状態などを可視化できるので、プログラムの整理ができる。
コメントを残す