【連載】CPIエバンジェリストのお悩み相談室③
JavaScriptのデバッグに欠かせないConsole APIについて
その基礎セミナーで参加している生徒に「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画面を見ながら開発をしていきます。
それでは、実際にJavaScriptからConsole画面にメッセージを表示させましょう。下記がHTML5のベーシックなテンプレートに<script>タグを加えたソースコードです。
<html lang="ja">
<head>
<title>JavaScriptのデバッグ</title>
</head>
<body>
<h1>JavaScriptのデバッグ</h1>
<script>
</script>
</body>
</html>
まずはConsole画面にメッセージを表示します。
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()
●console画面へのメッセージの出力
console画面に単純なメッセージを出力するためのメソッドです。
console.error('エラー表示');
console.warn('警告表示');
console.log('ログ表示');
console.debug(‘デバッグ表示’)
</script>
文字列はもちろん、数値、真偽値、変数を指定することもできます。
var hoge = 'テスト';
console.error( hoge );
</script>
このメソッドは、プログラミング中に正しく値が代入されているか、また正しいループを通っているかを確認できます。例えば、下記ではsuji1と、suji2変数にそれぞれ100と200を代入し、if文で同じ数値かどうかをチェックしています。
var suji1 = 100;
var suji2 = 200;
if(suji1 === suji2){
console.log("suji1とsuji2は同じ値です");
// 何かの処理...
}else{
console.log("suji1とsuji2は違う値です");
// 何かの処理...
}
console.log("if文が終わりました。");
</script>
[筆者プロフィール]
阿部 正幸(あべ まさゆき) | 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