JavaScriptのデバッグに欠かせないConsole APIについて(前編) | デザインってオモシロイ -MdN Design Interactive-

JavaScriptのデバッグに欠かせないConsole APIについて(前編)

2020.1.22 WED

【連載】CPIエバンジェリストのお悩み相談室③
JavaScriptのデバッグに欠かせないConsole APIについて


©StockUnlimited

©StockUnlimited

2017年6月13日
TEXT:阿部 正幸(KDDIウェブコミュニケーションズ)
昨今では老若男女を問わず幅広い層で使われているJavaScriptですが、まだまだ苦手意識が強い方も多いのではないでしょうか。当記事の筆者であります阿部は、大阪市が運営する起業支援施設「iMedio」で、JavaScriptなどのプログラミング基礎セミナーを定期的に4年間ほど行っています。

その基礎セミナーで参加している生徒に「JavaScriptで分からないことがあったら何でも聞いて」と伝えたことがありました。その際、いったいどんな質問がくるのか、答えられない内容だったらどうしようかと、内心ドキドキして待っていましたが、生徒から寄せられた質問は、どれもシンプルで単純なものばかりでした。

その時、私はJavaScriptに苦手意識のある人の共通点に気がつきました。

それは「初心者はデバッグができていない!!」

JavaScriptやその他のプログラミングは、デバッグをしながら開発を進めるのが基本です。if文やループ文、関数などを教える前にデバッグ方法を教えるべきでした。デバッグとは、コードが正しく動作しているかの確認や、エラーが起きたときに、何が原因でエラーが起きているかを確認するための手法です。

それでは、今回のタイトルにもあるJavaScriptのデバッグに必ず必要なConsole API メソッドをご紹介します。Console APIを知ることでJavaScriptの開発をよりスムーズに進めることができます。
引用:
このドキュメントは、下記サイトを参考に一部引用しています。
url. https://console.spec.whatwg.org/
url. https://developer.mozilla.org/ja/docs/Web/API/console
●コンソール画面

まず、Console APIは「Chrome」のデベロッパーツールか、「Firefox」の開発ツールの「コンソール」画面にログ等の出力を行うことから始めましょう。コンソール画面の表示方法は下記の通りとなります。

Chromeの場合:

初めにブラウザ上で右クリック「検証」をクリックします。


続いて、デベロッパーツール画面が表示されるので「Console」をクリックします。


Firefoxの場合:


ブラウザ上で右クリック「要素の詳細を表示」、「コンソール」とアクセスします。

Console画面には、JavaScriptから出力しているメッセージもあれば、エラーも表示されています。JavaScriptの開発は、このConsole画面を見ながら開発をしていきます。
●console.XXXX( ) について 

それでは、実際にJavaScriptからConsole画面にメッセージを表示させましょう。下記がHTML5のベーシックなテンプレートに<script>タグを加えたソースコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>JavaScriptのデバッグ</title>
</head>
<body>
  <h1>JavaScriptのデバッグ</h1>
  <script>

  </script>
</body>
</html>
<script>から</script>に JavaScriptのコードを記述します。
まずはConsole画面にメッセージを表示します。
<script>
  console.log(“コンソール画面に文字を表示”);
</script>
実行結果:

上記図のようにメッセージが表示されました。

このコンソール画面にメッセージを出力するための「 console.log(“コンソール画面に文字を表示”); 」メソッド は、知っている方も多いのではないでしょうか。実はこのconsole API メソッドは、よく使われているconsole.log()の他にも、全部で20種類あります(結構ありますね)。

------------引用:-------------

Mozilla Develpoer Network(MDN)cosoleメソッド

https://developer.mozilla.org/ja/docs/Web/API/console

 

assert()

clear()

count()

debug()

dir

dirxml()

error()

group()

groupCollapsed()

groupEnd()

info()

log

profile()

profileEnd()

table()

time

timeEnd

timeStamp()

trace()

warn()

では実際にJavaScriptの開発時によく使うconsole APIメソッドを見ていきましょう。

●console画面へのメッセージの出力

console画面に単純なメッセージを出力するためのメソッドです。
<script>
 console.error('エラー表示');
 console.warn('警告表示');
 console.log('ログ表示');
 console.debug(‘デバッグ表示’)
</script>
実行結果:

文字列はもちろん、数値、真偽値、変数を指定することもできます。
<script>
 var hoge = 'テスト';
 console.error( hoge );
</script>
実行結果:


このメソッドは、プログラミング中に正しく値が代入されているか、また正しいループを通っているかを確認できます。例えば、下記ではsuji1と、suji2変数にそれぞれ100と200を代入し、if文で同じ数値かどうかをチェックしています。
<script>
 var suji1 = 100;
 var suji2 = 200;

 if(suji1 === suji2){
       console.log("suji1とsuji2は同じ値です");
       // 何かの処理...
 }else{
       console.log("suji1とsuji2は違う値です");
       // 何かの処理...
 }
 console.log("if文が終わりました。");
</script>
上記例は単純ですが、複雑なif文やループ文の組み合わせになると、意図しない処理が実行される可能性があります。このようにconsole.logを利用し、どの処理が実行されたかを確認するのもとても重要です。
>>> 次ページへ

>>>「CPIエバンジェリストのお悩み相談室」の目次はこちら


[筆者プロフィール]
阿部 正幸(あべ まさゆき) | KDDIウェブコミュニケーションズ/エバンジェリスト
システム開発会社で大規模なシステム開発を経験後、Web制作会社でプログラマー兼ディレクターとして従事。その後、KDDIウェブコミュニケーションズに入社、レンタルサーバーCPIのプロダクトマネージャーに就任。ACE01、SmartReleaseをリリース後、現職の「エバンジェリスト」としてWeb制作に関する様々なイベントに登壇。Drupal(g.d.o Japan)日本コミュニティー、HTML5 funなどに所属し、OSSを世に広げる活動やWeb制作に関する情報を発信している。

●PHPカンファレンス2016@東京で使用したスライド
「未来のwebに欠かせないREST APIをApache Solr + Drupalで実装しよう」
 URL:http://www.slideshare.net/MasayukiAbe1/webrest-apiapache-solr-drupal8php2016-68358246

●CPIフタッフブログ
「RESTful webサービスを構築しよう」
 URL:http://shared-blog.kddi-web.com/webinfo/205

twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

アクセスランキング

1.6-1.12

MdN BOOKS|デザインの本

Pick upコンテンツ

現在