公開日： 2018/10/04
最終更新日：2018/10/04

【JavaScript】Consoleオブジェクトでいろいろなログを出す

プログラムを組むうえではログ出力機能は欠かせない。
JavaScriptでのログ出力について解説していく。

1 ログの種類
2 フォーマットしてログ出力する
3 ログをグループ化する
4 特定のコードが何回呼び出されたかカウントする
5 スタックトレースを出力する
6 実行時間を計測する

ログの種類

JavaScriptでは、ログの種類として大きく以下の4種がある。
・ログ(log)
・情報(info)
・警告(warn)
・エラー(error)

console.log('log');
console.info('info');
console.warn('warn');
console.error('error');

console.log('log');

console.info('info');

console.warn('warn');

console.error('error');

重要度や役割に応じて出しわけることでログを見やすく出力することができる。

フォーマットしてログ出力する

以下のように書式指定を引数として渡すことで、フォーマットした文字列をログとして出すことができる。

console.log('私の名前は%sです。', '田中太郎');  //私の名前は田中太郎です。
console.log('%d歳です。', 35);  //35歳です。
console.log('%i歳です。', 35);  //35歳です。
console.log('私の名前は%sです。身長は%.2fcmです。', '田中太郎', 170.5); //私の名前は田中太郎です。身長は170.5cmです。

console.log('私の名前は%sです。', '田中太郎'); //私の名前は田中太郎です。

console.log('%d歳です。', 35); //35歳です。

console.log('%i歳です。', 35); //35歳です。

console.log('私の名前は%sです。身長は%.2fcmです。', '田中太郎', 170.5); //私の名前は田中太郎です。身長は170.5cmです。

※表示はブラウザによって多少異なるので注意。

ログをグループ化する

group、groupEndメソッドを使うことで、以下のようにログをグループ化することができる。

console.group('親グループ');
for(var i = 0; i < 5; i++) {
    console.group('子グループ' + i);
    for(var j = 0; j < 3; j++) {
        console.log(i, j);
    }
    console.groupEnd();
}

console.group('親グループ');

for(var i = 0; i < 5; i++) {

console.group('子グループ' + i);

for(var j = 0; j < 3; j++) {

console.log(i, j);

}

console.groupEnd();

}

以下のように「console.groupCollapsed」と書くと、折りたたまれた状態で表示される。

初期状態

展開後

console.groupCollapsed('親グループ');
for(var i = 0; i < 5; i++) {
    console.group('子グループ' + i);
    for(var j = 0; j < 3; j++) {
        console.log(i, j);
    }
    console.groupEnd();
}

console.groupCollapsed('親グループ');

for(var i = 0; i < 5; i++) {

console.group('子グループ' + i);

for(var j = 0; j < 3; j++) {

console.log(i, j);

}

console.groupEnd();

}

特定のコードが何回呼び出されたかカウントする

countメソッドを使用することで、特定の個所が何回呼び出されたかを計測することができる。

for(var i = 0; i < 3; i++) {
    console.count('Count');
}
console.count('Count');

for(var i = 0; i < 3; i++) {

console.count('Count');

}

console.count('Count');

ループ内で3回呼び出され、ループ外で1回、合計4回呼び出されていることがわかる。

ラベルを変えれば、カウントを分けることができる。

for(var i = 0; i < 3; i++) {
    console.count('Outer');
    for(var j = 0; j < 3; j++) {
        console.count('Inner');
    }
}

for(var i = 0; i < 3; i++) {

console.count('Outer');

for(var j = 0; j < 3; j++) {

console.count('Inner');

}

スタックトレースを出力する

traceを使用することでスタックトレース(関数の呼び出し階層)を出力することができる。

function method1() {
    method2();
}
function method2() {
    method3();
}
function method3() {
    console.trace();
}
method1();

function method1() {

method2();

}

function method2() {

method3();

}

function method3() {

console.trace();

}

method1();

実行時間を計測する

timer、timerEndメソッドを使用することで処理にかかった時間を計測することができる。
また、タイマーは一度に複数起動させることが可能。

console.time('Outer');
for(var i = 0; i < 3; i++) {    
    console.time('Inner' + (i+1));
    console.timeEnd('Inner' + (i+1));
}
console.timeEnd('Outer');