【STEP.34】
consoleオブジェクトについて徹底解説!

コンソールオブジェクトとは

現在よく利用されているほとんどのブラウザーには、クライアントサイド開発で利用できる開発者ツールが備わっています。

consoleConsole)オブジェクトは、この開発者ツールのコンソールに対してログなどを出力するための機能を提供します。

コンソールにログを出力する【log/info/warn/error】

consoleオブジェクトの次に掲げる表のメソッドを利用します。

【ログ出力のための主なメソッド】
メソッド概要
log(str)一般的なログ
info(str)一般情報
warn(str)警告
error(str)エラー

まずは、一般的なログを出力するためのlogメソッドだけでも十分ですが、ログの種類が増えてきた場合には、ログ内容に応じてinfowarnerrorメソッドを使い分けることをおすすめします。

ログにアイコン/カラーが適用されるので視認しやすくなりますし、たとえばエラーログだけを確認する際にもフィルターが可能になります。

console.log('ログ');
console.info('情報');
console.warn('警告');
console.error('エラー');

コンソールログに出力

いずれのメソッドも、引数は複数列記できます。

その場合、ログは指定された値を順に出力します。

loginfowarnerrorメソッドには、以下のような構文もあります。(以下はlogメソッドの構文を示していますが、他のメソッドも同様です。)

logメソッド

console.log(format, args...)
format    書式文字列
args...   書式文字列に埋め込む値

引数formatには、以下のような書式指定子を埋め込むことができます。

【引数formatで利用できる書式指定子】
書式指定子概要
%s文字列を出力
%d、%i整数値を出力(%.2dで2桁の整数を表す)
%f浮動小数点数を出力(%.2fで小数点以下2桁の小数点数を表す)
%o、%OJavaScriptオブジェクトを出力(コンソール上では詳細を出力可能)

%d/%i、%fでは「%.nd」のようにすることで、出力すべき数値の桁数も指定できます。(Firefoxのみ)

では、具体的なコードを見てみましょう。

console.log('初めまして、私は%sです。%d歳です。','横浜流星','23');
// 結果:初めまして、私は横浜流星です。23歳です。
console.log('今日の気温は、%.2f度です。',22.5);
// 結果:今日の気温は、22.50度です。(Firefoxの場合)

ログをクリアする【clear】

コンソールに出力されたログをクリアするには、clearメソッドを利用します。

console.clear();

コンソールにオブジェクトを出力する

Chrome/Firefoxなどのブラウザーでは、logメソッドはオブジェクトへの参照を記録します。

そのため、コンソール上ではオブジェクトを展開した時点での値が表示されます。

let obj = { name: '横浜流星', age: 23 }
console.log(obj);
obj.name = '北村匠海';

オブジェクトの現在地が表示される(出力時の値ではない!)

そこで、もしもオブジェクトを出力した時点での値を正しく知りたいならば、「console.log(obj);」を以下のように書き換えて、JSONオブジェクトでオブジェクトをエンコードデコードしたものを出力するようにしてください。

これでオブジェクトの内容が固定されるので、logメソッドを呼び出した時点でのオブジェクトの内容を得られます。

let obj = { name: '横浜流星', age: 23 }
console.log(JSON.parse(JSON.stringify(obj)));
obj.name = '北村匠海';

オブジェクトの現在地が表示された

要素オブジェクトをログ出力する【log/dir】

log、またはdirメソッドを利用します。

ただし、利用するメソッドによって、出力の形式が変化します。

<div id="utask">
  <a href="https://yutamanshop.com/"></a>
</div>
let utask = document.getElementById('utask');
console.log(utask);
console.dir(utask);

log/dirメソッドで要素を出力した結果

logメソッドでは要素オブジェクトをHTML形式のツリーとして表示するのに対して、dirメソッドはオブジェクトツリーとして表示します。(ただし、Firefox/Internet Explorerのlogメソッドは、対象の要素そのものを表示するだけで、子要素までは表示しません。)

コードの実行時間を計測する【time/timeEnd】

timetimeEndメソッドで、計測したいコードをくくります。

time/timeEndメソッド

console.time(name)
console.timeEnd(name)
name    タイマーの名前

引数nameは、計測の開始/終了を識別するための文字列なので、timetimeEndメソッドで対応していなければなりません。

複数のタイマーを同時に実行させてもかまいません。

console.time('checkTime');
window.alert('チェックしてください。');
console.timeEnd('checkTime');

time/timeEnd間の実行時間を出力

ある条件が偽の場合にだけログを出力する【assert】

assertメソッドを利用します。

assertメソッド

console.assert(exp, message)
exp      条件式
message  ログ文字列

たとえば関数/メソッドに対して、不適切な引数が渡された場合に、これを警告するような用途で利用します。

引数expfalse(偽)の場合に、引数messageを出力する、というわけです。

function triangle (base, height) {
  console.assert(typeof base === 'number' && base > 0, '引数baseは正数でなければいけません。');
  console.assert(typeof height === 'number' && height > 0, '引数heightは正数でなければいけません。');
  return base * height / 2;
}
console.log(triangle(3,-5));

不正な引数が渡された場合にはエラーログを出力

この例であれば、引数baseheightそれぞれについて、正の数値であることをチェックしています。

実行スタックトレースを出力する【trace】

traceメソッドを利用します。

スタックトレースとは、その時点までのメソッド/関数がどのような順序で呼び出されたのかを表す情報のことです。

実際のアプリでは「関数hogeが関数fooを、関数fooが関数piyoを・・・」と、関数/メソッドが関連して動作しているのが一般的です。

このような状況では、スタックトレースを確認することで、互いの呼び出し関係を把握しやすくなります。

function test1() {
  test2();
}
	
function test2() {
  test3();
}

function test3() {
  console.trace();
}
test1();

実行された関数を呼び出し順にさかのぼって出力

特定のコードが何回実行されたかをカウントする【count】

countメソッドを利用することで、その行を呼び出した回数をカウントできます。

countメソッド

console.count([label])
label    ラベル文字列

引数labelが等しいものについて、呼び出し回数をカウントします。

for (let i = 0; i < 2; i++) {
  for (let j = 0; j < 3; j++) {
    console.log('Repeat'); 
  }
}
console.count('Repeat');

Repeatラベルの呼び出しをカウント

ログをグループ化する【group/groupEnd】

groupgroupEndメソッドで、グループ化したいコードをくくります。

group/groupEndメソッド

console.group(label)
console.groupEnd()
label    ラベル文字列

グループ同士を入れ子にしてもかまいません。

たとえば以下は、2次元配列をループしながら、順に出力していく例です。

console.group('親');
for (let i = 0; i < 3; i++) {
  console.group('子' + i);
  for (let j = 0; j < 3; j++ ) {
    console.log(i, j);
  }
  console.groupEnd();
}
console.groupEnd();

入れ子になったグループを生成

なお、groupとよく似たメソッドに、groupCollapsedメソッドもあります。

こちらは、同じくログをグルーピングしますが、初期状態でグループを閉じた状態で表示します。


コメントを残す

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