.NET開発者のためのブログメディア
JavaScriptのconsole.logとは？console.logの使い方を基本から解説します！
- SE
- JavaScriptのconsole.logについて詳しく教えてください。
- PM
- 分かりました。JavaScriptのconsole.logについて使い方を基本から解説しましょう。
目次
console.logとは？
console.logはJavaScriptのコマンドです。その名前の通りにコンソールにログを出力する機能があります。デバッグをする上で必須の機能と言えるでしょう。使い方はscriptタグ内に以下のように表示したい文字列をパラメータに記述します。
|
1
2
|
console.log('デバッグ情報');
|
しかし、これをブラウザで表示しても、ログはどこにも見当たりません。どうすればログを見ることができるのでしょうか。
ブラウザでログを見る方法
console.logの出力をブラウザで見る方法をGoogle Chromeを例にとって説明します。まずconsole.logが記述されたJavaScriptが実行されている状態で、画面を右クリックします。するとメニューに「検証(I)」と言う項目があるので、それをクリックします。
DevToolsが起動しますが、上にならんでいるメニューのうちの「Console」をクリックしてください。これでログを見ることができます。今回のサンプルでは「デバッグ情報」と表示されています。
consoleで変数の値を表示する
実際にconsole.logを使う場合、変数の値を表示することが多いでしょう。以下のようにすれば変数の値を見られます。
|
1
2
3
|
var value = 100;
console.log('valueの値は'+value);
|
以下のような文字列置換の書式を利用することもできます。
|
1
2
3
|
var value = 100;
var str = 'あいうえお';
console.log('数値は%d、文字列は%s',value,str);
|
実行すると「数値は100、文字列はあいうえお」と表示されます。
配列やオブジェクトを表示する
console.logは配列も簡単に表示することができます。
|
1
2
3
|
var ary = ['りんご','みかん','いちご'];
console.log(ary);
|
実行すると「[“りんご”, “みかん”, “いちご”]」と表示されます。ループなどを使う必要が無いので簡単です。また以下のようにオブジェクトも表示できます。
|
1
2
3
|
var obj = {name: "りんご", type: "果物", color:"赤"};
console.log(obj);
|
結果は「{name: “りんご”, type: “果物”, color: “赤”}」となります。
文字の装飾が可能
console.log:の出力の文字を装飾して、色を変えたりすることができます。以下をご覧ください。
|
1
2
|
console.log("これは、%c赤い背景に白文字のイタリック体です。", "color: white; font-style: italic; background-color: red");
|
表示すると%c以降の背景色・文字の色・書体が変化します。CSSの書式が使えるので他にも様々な装飾ができます。重要なログ出力を目立たせるのに便利でしょう。
警告やエラー表示ができる
上のようにCSSで文字を赤くしたりするのではなく、警告やエラーと言うことを明確にしたい場合は以下のようにしましょう。
|
1
2
3
|
console.warn('警告です。');
console.error('エラーです。');
|
これにより警告やエラーが通常のconsole.logより目立つようになります。CSSで色を変えるより意図が明確になります。
ログを階層構造にする
ログ出力を階層構造にすることも可能です。
|
1
2
3
4
5
6
7
8
9
|
console.group('第一階層');
console.log('第一階層のログ1');
console.group('第二階層');
console.log('第二階層のログ');
console.groupEnd();
console.log('第一階層のログ2');
console.groupEnd();
console.log('終了');
|
実行するとログが入れ子のような階層になります。ログをグループ分けしたい時に役に立つでしょう。
カウンターでカウント計測ができる
consoleオブジェクトにはカウンター機能もあります。以下を実行してみてください。
|
1
2
3
4
|
console.count('カウンター ');
console.count('カウンター ');
console.count('カウンター ');
|
実行すると、
カウンター : 1
カウンター : 2
カウンター : 3
のように表示されます。カウント用の変数を用意する必要がないので助かります。なおconsole.countReset(‘カウンター ‘)でカウンターをリセットできます。
タイマーで処理時間を計測できる
consoleオブジェクトはタイマー機能で処理時間を計測することができます。
|
1
2
3
4
5
6
7
|
var sum = 0;
console.time('Timer');
for (var i = 0; i < 10000; i++) {
sum += i;
}
console.timeEnd('Timer');
|
このサンプルを実行すると「test.html:13 Timer: 5.23291015625 ms」とコンソールに表示されます。console.timerとconsole.timeEndの間の処理の時間を計ることができるということです。なお両方のメソッドで指定する文字列は同じにしてください。
HTMLタグをそのまま表示してみると？
以下のようにHTMLタグをgetElementByIdで取得して、それをそのままconsole.logで出力してみます。
|
1
2
3
4
5
6
7
|
<div id="test">テスト</div>
<script>
var test = document.getElementById('test');
console.log(test);
</script>
|
結果は「<div id=”test”>テスト</div>」とタグがそのまま表示されました。
console.dirでDOMツリー情報を表示できる
上のサンプルのconsole.logを以下のように変えてみましょう。
|
1
2
|
console.dir(test);
|
すると、
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オブジェクトにはスタックトレースを見る機能があります。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function func_a() {
function func_b() {
function func_c() {
console.trace();
}
func_c();
}
func_b();
}
func_a();
|
このサンプルを実行すると、以下のように表示されます。
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に限らず、バグの発見に重要なことはログを見ることです。品質の高いプログラミングには、ログを適切に表示することが欠かせないのです。
初心者はバグが表示されるとまずソースを見て考えるということをしがちですが、熟練者はまずログを見ます。バグがでたらログを見る習慣を身に着けることが、優秀なエンジニアへの近道と言えるでしょう。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)