jQuery入門jQueryのデバッグはどうする?コンソールの出力を活用してみよう!マサト2019/7/232019/7/23jQueryのデバッグってどうやるんだろうコンソールログをどのように活用すればいいのかConsoleオブジェクトを有効活用できるようになりたいjQueryでプログラミングができるようになると、さまざまなエラーにも遭遇するでしょう。これらのエラーは何がダメなのか...、どこのコードが原因になっているのか?バグを未然に防ぐにはどうすれば良いのでしょうか。そこで役立つのが手軽にデバッグを実現するConsoleオブジェクトなのですが、初めてのうちはどこから手を付けて良いのか悩むケースも少なくないでしょう。そこで、この記事では初心者でも今日からjQueryのコンソールを活用したデバッグ手法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。一人でも多くの方がjQueryの不安を解消できれば幸いです。まとめconsoleオブジェクトについてこの章では、デバッグに必須となるConsoleオブジェクトについて詳しく見ていきましょう。基本的な概要と提供されているメソッドについて学んでいきます。jQueryのデバッグデバッグは、プログラムに潜む誤りをさまざまな方法を使って発見&修正することを意味しています。みなさんが普段から使っているブラウザには、開発者向けにさまざまなデバッグツールが提供されています。そのなかでも、コンソール出力機能はjQueryのデバッグにとても役立ちます。このコンソール出力というのは、jQueryのプログラムからConsoleオブジェクトが提供する各種メソッドを利用することでさまざまな情報を出力することができるのです。これらの情報を元にしてプログラムの誤りを発見していくことができるわけです。consoleオブジェクトのメソッドConsoleオブジェクトを学習していく前に、どのようなメソッドが提供されているのかいくつか見ておきましょう。オブジェクトが持つプロパティの一覧をリストで出力するこのようにいくつかのメソッドがあるのですが、特にconsole.log()メソッドはデバッグでよく使うことで知られています。どのように活用していけばいいのか、次の章から詳しく見ていきましょう。console.logの使い方この章では、jQueryのデバッグでよく使うconsole.log()メソッドについて見ていきましょう。変数の取り扱いやパラメータの付与について学んでいきます。変数の中身を出力してみようデバッグの基本は、とにかく現在行われている処理を視覚化することにあります。一般的には変数の中身が意図したとおりに格納されているかを監視することです。そこで、console.log()を使って変数の中身をコンソールに出力するわけです。I】を押すことで、開発者ツールが起動します。開発者ツールのConsoleタブを開いた画面その中にある【Console】タブに切り替えれば、コンソールに出力された値を確認することができます。サンプル例として次のコードを実行してみましょう。'りんご';console.log(item);すると、コンソール画面に【りんご】という値が出力されたことを確認できます。変数の中身をチェックすることができたわけです。これを応用すれば、HTML要素を取得した結果を出力することも簡単です。$('h1').text();console.log(h1);この例では、h1要素を取得してtext()メソッドを使いh1要素のテキストを変数に格納しています。コンソール画面にはh1要素のテキストが出力されているはずです。このように、console.log()をプログラムの確認したい箇所に挿入することで、現在の状態を常に把握していくことがデバッグの基本になります。変数の中身を確認するうえで、オブジェクトの取り扱いには少しコツが必要です。次のようなオブジェクトがあるとします。"fruit"};変数objの中身はオブジェクトデータなので、普通にconsole.log(obj)と記述すれば中身を確認できます。文字列と一緒に組み合わせた場合には上手くいきません。Object]この例では、【obj=】という文字列と組み合わせて出力しようとしましたが、結果は中身が表示されていませんね。このような場合には、第2引数に変数objを指定し【%o】という特殊文字を利用すると上手く表示されるようになります。}このように第2引数へ指定したオブジェクトを出力したい箇所に【%o】を挿入すればいいわけです。オブジェクトの各プロパティや値を個別に出力したい場合には、$.each()メソッドを利用して繰り返し処理を実装するのが簡単です。fruit$.each()は第1引数に中身を確認したいオブジェクトや配列などを指定し、第2引数に実行する関数を指定します。この関数は、第1引数にオブジェクトのプロパティが格納されており、第2引数にはその値が得られるので上手く組み合わして活用できます。メソッドの活用方法この章では、Consoleオブジェクトで提供されているメソッドのなかで便利なものについて見ていきましょう。カウントアップと時間計測について学んでいきます。カウントアップの使い方Consoleオブジェクトのメソッドには、順番通りにカウントアップして表示してくれるメソッドcount()があります。これは繰り返し処理などで、意図したとおり順番に処理が実行されているかを確認する時などに便利です。次のようなリスト要素があるとします。項目1項目2項目3項目4項目5項目6項目7このリスト要素のテキストをすべて取得する場合にcount()を使ってみましょう。7項目7count()は引数にラベル名を指定することができます。これにより複数のcount()を使っている場合に識別ができるわけです。この例では、ラベル名をelementとして実行しています。順番にカウントアップされているのが確認でき、しっかりとすべてのリスト要素が取得できていることが分かります。実行時間の計測方法デバッグ作業では、誤りを発見する以外にもパフォーマンスを向上できるポイントが無いかをチェックすることもあります。timeEnd()メソッドを利用することで簡単に計測ができるようになっています。・console.timeEnd(ラベル名);このようにtime()からtimeEnd()までの範囲において、実行時間を計測してコンソールに出力してくれるわけです。引数にラベルを指定することが可能で、これにより複数箇所の計測も実現しています。0.5000000819563866msこの例では、空のfor文を10000回繰り返しているわけですが、コンソール画面には計測時間が出力されているのが分かりますね。このように実行時間を計測することで、より効率の良いプログラミングを模索してパフォーマンスを高めることができるというわけです。まとめ今回は、jQueryにおけるデバッグにおいてコンソール画面に出力する方法などについて学びました。最後に、もう一度ポイントをおさらいしておきましょう!jQueryのデバッグには開発者ツールのコンソール画面を使う変数の中身を確認するにはconsole.log()を使うカウントアップや時間計測など便利なメソッドも多数ある上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。