JavaScriptでログを表示する『console.log』が便利!HTMLを介さずにログを表示する方法

JavaScriptを勉強しているとき、どこにログを表示しようか迷うときがありますね。HTML内に表示させる方法が一般的ですが、多少手間に感じる場合も。

今回はそんな方のために向けて、JavaScriptのログを手軽に出力できる

console.log()メソッド

についてご紹介します!

準備しておきたいもの

まず大前提として、console.log()メソッドで値を出力するためにはブラウザが必要になります。

オススメのブラウザ

ブラウザには様々な種類がありますが、中でもおすすめなのが以下の3つのブラウザです。

Google Chrome

https://www.google.com/intl/ja_jp/chrome/

ChromeはGoogleが提供しているブラウザで、処理速度が速く、世界中で高いシェア率を誇っています。

操作方法もシンプルで分かりやすいため、どれが良いか分からない方にまず勧めたいブラウザです。

Microsoft Edge

https://www.microsoft.com/ja-jp/edge

EdgeはMicrosoftが提供しているブラウザで、以前使用されていたInternet Explorerの改良版です。

Firefox


https://www.mozilla.org/ja/firefox/new/

Firefoxは処理速度が遅いためあまりお勧めではありません。ですがHTML/CSSのタグ/プロパティの中にはFirefoxでしか動作しないものがあるため、HTML/CSSを専門的に学習したいという方は一応入れておくと良いでしょう。

MEMO
コンソール画面はキーボード右上のF12キーで表示されます。

ブラウザごとの対応状況

タグやメソッド、プロパティにはそれぞれ対応状況があります。

console.log()は前ブラウザで対応していますが、バージョンが古い場合は正常に動作しないので、常に最新バージョンを保つようにしましょう。

PC用ブラウザ 対応状況
Chrome 1
Edge 12
Firefox  4
nternet Explorer  8
Opera  10.5
Safari  3
スマートフォン用ブラウザ 対応状況
Android webview  1
Android版Chrome  18
Android版Firefox  4
Android 版 Opera  11
iOS版Safari  1
Samsung Internet  1.0

Console.log()メソッドの使い方

console.log()メソッドの基本の使い方

console.log()メソッドはコンソールという、入力画面と出力画面が一体化した部分に数値や文字を表示させるメソッドです。

メソッドなので必ず(括弧)を付け、括弧の中には文字列や変数、数式を記述します。文字列を入れる場合には、必ず””(ダブルクォーテーション)で囲うようにしてください。

console.log()に変数を入れた場合

console.log()に文字列を入れた場合

console.log()に数式を入れた場合

MEMO
コンソール内で改行させるにはShiftEnter。実行させるにはEnterキーを押します。

console.log()メソッドを使うメリット

ここで疑問になるのが、conole.log()メソッドを使用するメリットです。以下のような『数学の公式を計算して表示するプログラム』を例に見てみましょう。

このプログラムではテキストエリア内に数値を入力すると、その値をJavaScriptの関数で取得し、取得した値で公式の計算結果を表示するプログラムです。

x~dに1を代入し、送信ボタンをクリックした後の結果

完成すると以上のようになりますが、このプログラムをすべて作成する前に、

  • x~dの値がしっかり取得できているか
  • 計算結果が正しいか

というように、逐一実行状況を確認したい場合があります。そんな時に便利なのが、console.log()メソッドなのです。


x~dの値が取得できているか確認する

値の取得を確認するために、scriptタグを以下のように書き換えます。ここでは簡略化のために他のコードは削除していますが、コメントアウトして無効化しましょう。

しっかり値が取得できている場合は、入力した値が表示されているはずです。

まとめ

今回はJavaScriptのメソッド、console.log()メソッドについて解説しました。console.log()メソッドはHTML内ではなくコンソールに結果を表示するため、エラー部分を特定したり、意図したコードがしっかり実行できているかの確認をしたりする際に便利なメソッドです。

JavaScriptを利用する際は、ぜひ活用してみてくださいね。

参考文献:
console.log() – MDN Web Docs