.net column
.NET開発者のためのブログメディア

JavaScriptのconsole.logとは?console.logの使い方を基本から解説します!

公開日時:   更新日時:
JavaScriptのconsole.logとは?console.logの使い方を基本から解説します!
基本情報技術者試験の試験対策はこちら>>
SE
JavaScriptのconsole.logについて詳しく教えてください。
PM
分かりました。JavaScriptのconsole.logについて使い方を基本から解説しましょう。

console.logとは?


console.logはJavaScriptのコマンドです。その名前の通りにコンソールにログを出力する機能があります。デバッグをする上で必須の機能と言えるでしょう。使い方はscriptタグ内に以下のように表示したい文字列をパラメータに記述します。

しかし、これをブラウザで表示しても、ログはどこにも見当たりません。どうすればログを見ることができるのでしょうか。

ブラウザでログを見る方法

console.logの出力をブラウザで見る方法をGoogle Chromeを例にとって説明します。まずconsole.logが記述されたJavaScriptが実行されている状態で、画面を右クリックします。するとメニューに「検証(I)」と言う項目があるので、それをクリックします。

DevToolsが起動しますが、上にならんでいるメニューのうちの「Console」をクリックしてください。これでログを見ることができます。今回のサンプルでは「デバッグ情報」と表示されています。

consoleで変数の値を表示する

実際にconsole.logを使う場合、変数の値を表示することが多いでしょう。以下のようにすれば変数の値を見られます。

以下のような文字列置換の書式を利用することもできます。

実行すると「数値は100、文字列はあいうえお」と表示されます。

配列やオブジェクトを表示する

console.logは配列も簡単に表示することができます。

実行すると「[“りんご”, “みかん”, “いちご”]」と表示されます。ループなどを使う必要が無いので簡単です。また以下のようにオブジェクトも表示できます。

結果は「{name: “りんご”, type: “果物”, color: “赤”}」となります。

文字の装飾が可能

console.log:の出力の文字を装飾して、色を変えたりすることができます。以下をご覧ください。

表示すると%c以降の背景色・文字の色・書体が変化します。CSSの書式が使えるので他にも様々な装飾ができます。重要なログ出力を目立たせるのに便利でしょう。

警告やエラー表示ができる

上のようにCSSで文字を赤くしたりするのではなく、警告やエラーと言うことを明確にしたい場合は以下のようにしましょう。

これにより警告やエラーが通常のconsole.logより目立つようになります。CSSで色を変えるより意図が明確になります。

ログを階層構造にする

ログ出力を階層構造にすることも可能です。

実行するとログが入れ子のような階層になります。ログをグループ分けしたい時に役に立つでしょう。

カウンターでカウント計測ができる

consoleオブジェクトにはカウンター機能もあります。以下を実行してみてください。

実行すると、

カウンター : 1
カウンター : 2
カウンター : 3

のように表示されます。カウント用の変数を用意する必要がないので助かります。なおconsole.countReset(‘カウンター ‘)でカウンターをリセットできます。

タイマーで処理時間を計測できる

consoleオブジェクトはタイマー機能で処理時間を計測することができます。

このサンプルを実行すると「test.html:13 Timer: 5.23291015625 ms」とコンソールに表示されます。console.timerとconsole.timeEndの間の処理の時間を計ることができるということです。なお両方のメソッドで指定する文字列は同じにしてください。

HTMLタグをそのまま表示してみると?

以下のようにHTMLタグをgetElementByIdで取得して、それをそのままconsole.logで出力してみます。

結果は「<div id=”test”>テスト</div>」とタグがそのまま表示されました。

console.dirでDOMツリー情報を表示できる

上のサンプルのconsole.logを以下のように変えてみましょう。

すると、

attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: id, id: id, length: 1}
autocapitalize: “”
autofocus: false
baseURI: “~.html”
childElementCount: 0
childNodes: NodeList [text] children: HTMLCollection [] ・・・

のように、沢山のプロパティ情報が表示されます。これはHTMLの検証に役立ちます。なおconsole.tableを使うとテーブル形式で表示されます。

スタックトレースを見られる

consoleオブジェクトにはスタックトレースを見る機能があります。

このサンプルを実行すると、以下のように表示されます。

console.trace
func_c @ test.html:12
func_b @ test.html:14
func_a @ test.html:16
(anonymous) @ test.html:19

関数の呼び出し順がわかります。デバッグでとても役に立ちます。

SE
JavaScriptのconsole.logについてよく分かりました。
PM
JavaScriptのconsole.logをよく使用している人は多いでしょうがconsoleオブジェクトにはlogメソッド以外にもたくさんの機能があって、使わないのは非常にもったいないので、ぜひ活用してみて下さい。

console.logを使いこなすことが上達の近道

console.logについて解説しましたが、ご理解頂けましたでしょうか。JavaScriptに限らず、バグの発見に重要なことはログを見ることです。品質の高いプログラミングには、ログを適切に表示することが欠かせないのです。

初心者はバグが表示されるとまずソースを見て考えるということをしがちですが、熟練者はまずログを見ます。バグがでたらログを見る習慣を身に着けることが、優秀なエンジニアへの近道と言えるでしょう。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags