JavaScriptのconsole.logの使い方

はじめ
はじめ

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

かみさま
かみさま

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

はじめ
はじめ

コンソール?関数?

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

かみさま
かみさま

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

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

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を選択してください。

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

console.logの実行結果表示

console.logの使い方は基本はこれで終わりです。

今は文字を出力しているだけなので必要性はあまり感じられませんが、複雑なプログラムになってくると、処理の流れや値の状態など頭の中だけでは整理できなくなってきます。

そんな時にconsole.logを使えばConsoleタブに値の状態を可視化できるので、プログラムの整理ができるようになります。

まずここではconsole.logを使い方だけでも覚えておきましょう。

まとめ

最後にポイントをまとめておさらいをしましょう!

console.logについて
  • console.logは開発時のデバッグで使われるJavaScriptの関数。
  • console.logはブラウザのコンソールに出力結果を表示する。
  • console.logを使うと、処理の流れや値の状態などを可視化できるので、プログラムの整理ができる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です