jQueryのデバッグはどうする？コンソールの出力を活用してみよう！

jQueryでプログラミングができるようになると、さまざまなエラーにも遭遇するでしょう。

これらのエラーは何がダメなのか…、どこのコードが原因になっているのか？バグを未然に防ぐにはどうすれば良いのでしょうか。

そこで役立つのが手軽にデバッグを実現するConsoleオブジェクトなのですが、初めてのうちはどこから手を付けて良いのか悩むケースも少なくないでしょう。

そこで、この記事では初心者でも今日からjQueryのコンソールを活用したデバッグ手法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がjQueryの不安を解消できれば幸いです。

consoleオブジェクトについて

この章では、デバッグに必須となるConsoleオブジェクトについて詳しく見ていきましょう。主に、基本的な概要と提供されているメソッドについて学んでいきます。

jQueryのデバッグ

デバッグは、プログラムに潜む誤りをさまざまな方法を使って発見＆修正することを意味しています。

みなさんが普段から使っているブラウザには、開発者向けにさまざまなデバッグツールが提供されています。そのなかでも、コンソール出力機能はjQueryのデバッグにとても役立ちます。

このコンソール出力というのは、jQueryのプログラムからConsoleオブジェクトが提供する各種メソッドを利用することでさまざまな情報を出力することができるのです。これらの情報を元にしてプログラムの誤りを発見していくことができるわけです。

consoleオブジェクトのメソッド

Consoleオブジェクトを学習していく前に、どのようなメソッドが提供されているのかいくつか見ておきましょう。

よく使う主要なメソッドは以下の通りです！

メソッド名	内容
console.log()	任意の値を出力する
console.clear()	コンソール画面をクリアにする
console.error()	エラー情報として出力する（他に、info() / warn()もあり）
console.group()	インデントを付けて出力することで階層構造を持たせる（groupEnd()で終了
console.time()	time()〜timeEnd()までの間にある処理を計測する
console.trace()	呼び出し元などを記録した実行過程を出力する
console.count()	実行する度にカウントアップして回数を出力する
console.table()	配列やオブジェクトなどの構造をテーブル表にして出力する
console.dir()	オブジェクトが持つプロパティの一覧をリストで出力する

このようにいくつかのメソッドがあるのですが、特にconsole.log()メソッドはデバッグでよく使うことで知られています。

どのように活用していけばいいのか、次の章から詳しく見ていきましょう。

console.logの使い方

この章では、jQueryのデバッグでよく使うconsole.log()メソッドについて見ていきましょう。主に、変数の取り扱いやパラメータの付与について学んでいきます。

変数の中身を出力してみよう

デバッグの基本は、とにかく現在行われている処理を視覚化することにあります。

一般的には変数の中身が意図したとおりに格納されているかを監視することです。そこで、console.log()を使って変数の中身をコンソールに出力するわけです。

コンソールですが、例えばChromeブラウザであれば【Ctrl + Shift + I】を押すことで、開発者ツールが起動します。

その中にある【Console】タブに切り替えれば、コンソールに出力された値を確認することができます。

サンプル例として次のコードを実行してみましょう。

const item = 'りんご';

console.log(item);

すると、コンソール画面に【りんご】という値が出力されたことを確認できます。つまり、変数の中身をチェックすることができたわけです。

これを応用すれば、HTML要素を取得した結果を出力することも簡単です。

const h1 = $('h1').text();

console.log(h1);

この例では、h1要素を取得してtext()メソッドを使いh1要素のテキストを変数に格納しています。コンソール画面にはh1要素のテキストが出力されているはずです。

このように、console.log()をプログラムの確認したい箇所に挿入することで、現在の状態を常に把握していくことがデバッグの基本になります。

オブジェクトの出力方法

変数の中身を確認するうえで、オブジェクトの取り扱いには少しコツが必要です。

例えば、次のようなオブジェクトがあるとします。

const obj = {name: "apple", color:"red", type: "fruit"};

変数objの中身はオブジェクトデータなので、普通にconsole.log(obj)と記述すれば中身を確認できます。

ただし、文字列と一緒に組み合わせた場合には上手くいきません。

console.log('obj=' + obj);

実行結果

obj=[object Object]

この例では、【obj=】という文字列と組み合わせて出力しようとしましたが、結果は中身が表示されていませんね。

このような場合には、第2引数に変数objを指定し【%o】という特殊文字を利用すると上手く表示されるようになります。

console.log('obj=%o', obj);

実行結果

obj={ name: "apple", color: "red", type: "fruit" }

このように第2引数へ指定したオブジェクトを出力したい箇所に【%o】を挿入すればいいわけです。

また、オブジェクトの各プロパティや値を個別に出力したい場合には、$.each()メソッドを利用して繰り返し処理を実装するのが簡単です。

$.each(obj, function(index, value) {

    console.log(index + '= ' + value);

})

実行結果

name= apple
color= red
type= fruit

$.each()は第1引数に中身を確認したいオブジェクトや配列などを指定し、第2引数に実行する関数を指定します。

この関数は、第1引数にオブジェクトのプロパティが格納されており、第2引数にはその値が得られるので上手く組み合わして活用できます。

メソッドの活用方法

この章では、Consoleオブジェクトで提供されているメソッドのなかで便利なものについて見ていきましょう。主に、カウントアップと時間計測について学んでいきます。

カウントアップの使い方

Consoleオブジェクトのメソッドには、順番通りにカウントアップして表示してくれるメソッドcount()があります。

これは繰り返し処理などで、意図したとおり順番に処理が実行されているかを確認する時などに便利です。

例えば、次のようなリスト要素があるとします。

  
項目１
  
項目２
  
項目３
  
項目４
  
項目５
  
項目６
  
項目７

このリスト要素のテキストをすべて取得する場合にcount()を使ってみましょう。

$.each($('li'), function(index, value) {

    console.count('element');

    console.log($(this).text());

});

実行結果

element: 1
項目１
element: 2
項目２
element: 3
項目３
element: 4
項目４
element: 5
項目５
element: 6
項目６
element: 7
項目７

count()は引数にラベル名を指定することができます。これにより複数のcount()を使っている場合に識別ができるわけです。

この例では、ラベル名をelementとして実行しています。順番にカウントアップされているのが確認でき、しっかりとすべてのリスト要素が取得できていることが分かります。

実行時間の計測方法

デバッグ作業では、誤りを発見する以外にもパフォーマンスを向上できるポイントが無いかをチェックすることもあります。

パフォーマンスチェックでは、主に処理の高速化が挙げられますがtime() ~ timeEnd()メソッドを利用することで簡単に計測ができるようになっています。

次の例を見てください！

console.time(ラベル名);
・
・
・
console.timeEnd(ラベル名);

このようにtime()からtimeEnd()までの範囲において、実行時間を計測してコンソールに出力してくれるわけです。引数にラベルを指定することが可能で、これにより複数箇所の計測も実現しています。

例えば、for文の繰り返し処理に掛かる時間を計測してみましょう！

console.time('countTime');

for(let i=0; i<10000; i++) { }

console.timeEnd('countTime');

実行結果

countTime: 0.5000000819563866ms

この例では、空のfor文を10000回繰り返しているわけですが、コンソール画面には計測時間が出力されているのが分かりますね。

このように実行時間を計測することで、より効率の良いプログラミングを模索してパフォーマンスを高めることができるというわけです。

まとめ

今回は、jQueryにおけるデバッグにおいてコンソール画面に出力する方法などについて学びました。

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！