6.3 consoleオブジェクト

(1/1)
チームでプログラミングをしているイラスト
JavaScriptの console オブジェクトを使うと、ブラウザのデバッグコンソールへ出力することができ、プログラムのデバッグをサポートする。
ここでは、「5.6 継承とオーバーライド」で作った1ヵ月カレンダーにデバッグ機能を追加してみる。

目次

サンプル・プログラムを実行する

サンプル・プログラム

圧縮ファイルの内容
monthlyCalendar4.html1ヵ月カレンダー(ログ出力)
Date2.jsDate2クラス
monthlyCalendar4.html 更新履歴
バージョン 更新日 内容
1.3.0 2023/08/14 制御構造の見直し
1.2.0 2023/08/14 変数名,メソッド名の見直し
1.0 2021/08/21 初版
Date2.js 更新履歴
バージョン 更新日 内容
1.1.0 2023/08/13 メソッド名の見直し
1.0 2021/08/16

console.logメソッド

 129:     //年月を取得
 130:     let year  = parseInt(document.getElementById('year').value,  10);
 131:     let month = parseInt(document.getElementById('month').value, 10);
 132:     //ログ出力
 133:     console.log('year = %d', year);
 134:     console.log('month = %d', month);
 135: 

  74:     //カレンダー配列を準備する.
  75:     let calendarArray = newArray2d(MAX_ROW, MAX_COL, 0);
  76:     //ログ出力
  77:     console.log('calendarArray = %o', calendarArray);

printMonthlyCalendar 関数において、HTMLから取得した年・月の値をコンソールにログ出力する。console.log メソッドは、ブラウザのデバッグコンソールにログ出力する。
console.logメソッド
たとえば Chrome であれば、[F12]キーをクリックすることでデバッグコンソールが開く。上図のように、consoleタブにログが表示される。
logメソッド の引数には、前回紹介した sprintf関数ほどではないが、書式指定子や変数を指定することができる。書式指定子の%sは文字列表示、%d, %iは数値、%fは小数、%oはオブジェクトへのリンクを意味する。

配列 calendarArray の実体はオブジェクトであるから、このように2次元配列の要素をログ出力することもできる。

console.errorメソッド

 136:     //Date2オブジェクト
 137:     dt2 = new Date2(year.toString() + '-' + month.toString() + '-01 00:00:00');
 138:     if (isNaN(dt2)) {
 139:         //ログ出力
 140:         console.error(dt2);
 141:         //エラーを表示
 142:         document.getElementById('error').innerHTML = 'エラー:正しい年月を入力してください.';
 143:         return;
 144:     }

エラー出力に便利なのが console.error メソッドだ。
console.errorメソッド
このように赤字でエラー箇所、内容を表示する。

consoleオブジェクトには、これ以外にも、処理時間を計測するたなどに使うメソッド time、スタックトレースを出力するメソッド trace など、デバッグのための機能が充実している。

コラム:デバッグとデバッガ

虫取りのイラスト
consoleオブジェクトを使わなくても、ブラウザのデバッグコンソールには、JavaScriptのエラーやワーニング情報が出力されている。つまりJavaScriptの場合、実行とデバッグが同時にできるという意味で、ブラウザが統合開発環境になっていると言ってもいい。

JavaScript以外にも、HTMLの構造やサーバとの送受信情報など、デバッグコンソールには様々な情報が表示される。

スマホの場合は、PCやMacと接続しないとデバッグコンソールを見ることができない。
世の中には、さまざまなIDE(統合開発環境)が流通しており、高機能なデバッガが付属しているが、それらは有料だったりインストールするのに手間がかかったりする。趣味や自己学習としてプログラムを書いている分には、エディタとブラウザがあれば十分だと思う。
デバッグコンソールに表示されるエラー行番号とエラーメッセージを呼んで、エディタに切り替えて該当箇所を直し、ブラウザをリロードする‥‥プログラミングは筋トレのようなもので、この地道な作業の繰り返しが学習効果を高めてくれる
エラーメッセージの英語の意味が分からなければ、DeepL翻訳で自動翻訳してもらえばいいし、それでもエラーの原因が分からなければ、ChatGPTに質問してみよう。
(この項おわり)
header