昨今では老若男女を問わず幅広い層で使われているJavaScriptですが、まだまだ苦手意識が強い方も多いのではないでしょうか。当記事の筆者であります阿部は、大阪市が運営する起業支援施設「iMedio」で、JavaScriptなどのプログラミング基礎セミナーを定期的に4年間ほど行っています。

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

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

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

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

それでは、今回のタイトルにもあるJavaScriptのデバッグに必ず必要なConsole API メソッドをご紹介します。Console APIを知ることでJavaScriptの開発をよりスムーズに進めることができます。

●コンソール画面

---

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

Chromeの場合：

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


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


Firefoxの場合：

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

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

●console.XXXX( ) について 

---

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

＜script＞から＜/script＞に JavaScriptのコードを記述します。
まずはConsole画面にメッセージを表示します。

実行結果：

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

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

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

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

---

console画面に単純なメッセージを出力するためのメソッドです。

実行結果：

文字列はもちろん、数値、真偽値、変数を指定することもできます。

実行結果：


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

上記例は単純ですが、複雑なif文やループ文の組み合わせになると、意図しない処理が実行される可能性があります。このようにconsole.logを利用し、どの処理が実行されたかを確認するのもとても重要です。

---