JavaScriptのconsole.logの使い方

はじめ

console.log（コンソール・ログ）って何？

かみさま

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

はじめ

コンソール？関数？

いまいちイメージが掴めないっす。

かみさま

まぁこれだけだとわからないよね。

とにかくconsole.logはよく使うの関数なので見ていこう！

1 console.logとは
2 console.logの使い方
3 まとめ

console.logとは

console.logで設定した値を、console（コンソール）という画面にlog（履歴・メッセージ）を出力するJavaScriptの関数です。

使い所として、開発時のデバッグを行う時によく使われます。

かみさま

関数とは与えられた入力に何らかの処理をして、その結果を返す仕組みだよ。

デバッグはプログラムの間違ったところを直していくことだよ。

console.logの出力結果を表示するための準備

それではconsole.logの出力結果を表示するための準備をしていきましょう。

開発者ツールを起動する

まず開発者ツールを起動します。

ブラウザには標準で開発のサポートをする開発者ツールが搭載されています。

今回はGoogle Chromeブラウザで説明していきます。

まだGoogle Chromeをインストールしていない方はこちらからインストールしてください。

参考 Google ChromeGoogle Chrome

開発者ツールを起動するにはブラウザを開いた後に、[右クリック] > [検証]をクリックしてください。

下記のような画面が表示されていれば開発者ツールが起動している状態です。

MEMO

開発者ツール起動のショートカットキー

WindowsOSの場合 [F12]
MacOSの場合 [option] + [command] + [i]

Consoleタブを表示する

開発者ツールにはいろいろな機能が備わっていて、その中でconsole.logを使うときに必要なのがConsoleタブになります。

開発者ツールのConsoleタブをクリックして選択してください。

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

これでconsole.logの出力結果を表示するための準備が完了です。

続いてconsole.logの使い方をみていきましょう。

console.logの使い方

使い方は簡単で、console.logの()内に文字や値を入れて実行するだけです。

それでは以下のコードを書いて開発者ツールのConsoleタブにconsole.logの実行結果を出力してみましょう。

HTML

<!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」と表示されます。