【プロゲート復習】Javascriptでログを出力してバグを発見しよう

プログラミング
難易度:★☆☆☆☆

この記事では、Javascriptで以下の内容に触れていきます。

  • ログ出力の方法
  • ログ出力がなぜ必要か?
  • ログにレベルをつける

対象読者は、次のような方を対象としています。

Javascriptでデバックを行いたい

プロゲートの復習をしたい

前回は、変数について学びました。今回は、ログ出力に触れていきましょう

ログ出力は、開発の効率を高めてくれる素晴らしい機能です。難しくはないので、しっかりマスターしよう!

前回のおさらい

前回は変数について学びました。変数の値を入れたり、値を更新したりしました。

var number = 10;
alert(number);
number = number + 25;
alert(number);

1行目”number”という変数に10を入れて、3行目で変数の値に25を足して35に更新していますね

変数の基本は何となく分かったよ!今日は何するの??

今日の内容は、ログ出力についてです。

コンソールにログを出力して、バグを見つけよう

ログ出力は、ブラウザのコンソール画面へ任意のメッセージを表示することです。実際にやってみましょう。

まずはsample.jsに以下のコードを打ち込んでください。

console.log("イージー人生")
console.log("知識をつけてラクになる");

今回は、GoogleChromeというブラウザのChrome Developer Toolsを利用してログを見ていきます。

Windowsの場合は「F12」を押してください。Macの場合は、「Opt + Cmd + I」を押してください。

すると次のようなChrome Developer Tools画面が表示されます。

下の方に、『イージー人生』と『知識をつけてラクになる』というログが出力されているのが分かります。

それは分かったけど、それが何の役に立つの??

ログ出力は以下の2点で役立ちます。

  • エラー(バグ)の発見
  • プログラムの途中経過を見る

まず1点目、プログラムのエラーの発見に役立ちます。デバッグと呼ばれる行為ですね。

例えば、下のようなコードがあったとしましょう。

var number = 10;
console.log(number);
number = number + 5;
console.log(numbet);


このコードは4行目の変数名numberがnumbetになってしまっています。

そういった時に、エラーを表示してくれるのです!

プログラムでバグは友達ですからね。見つけ方も徐々に学んでいきましょう!

ログのメリット2点目はプログラムの途中経過を見れる。ことです

以下のソースを打ってみましょう

var number = 10;
console.log(number);
number = number + 5;
console.log(number);
number = number - 3;
console.log(number);
number = number * 4;
alert(number);


ログがない場合は、最終結果の48しか画面に出ません。

ユーザー目線はこれでいいのですが、開発者はそうはいきません。

  • 途中の計算は間違っていないか?
  • 途中に変な値に変わっていないか?

など、過程にも気配りをしないといけません。

そこで、ログを見て、途中経過もしっかりみましょう

もっと分かりやすくするなら、

var number = 10;
console.log("元の値は" + number);
number = number + 5;
console.log("5を足すと" + number);
number = number - 3;
console.log("3を引くと" + number);
number = number * 4;
alert(number);


こんな感じですね。

ログ出力にレベルをつけよう

『ログ』と一言にいっても重要なログとそうでないログがあります。

絶対に見つけたいバグなら、重要度は高いです。しかし先ほどのような計算の途中結果はあまり重要ではありません。

そこで、一目でログの優先度に違いをつける方法を教えます。

以下のコードをうってください。

console.error('エラー表示');
console.warn('警告表示');
console.log('ログ表示');

上にいくほどやばそうな匂いがしますね笑

致命的なエラーは赤表示、エラーが起きそうなグレーゾーンは黄色表示、

計算の途中結果などは、ノーマル表示と言う感じでいいでしょう。

ログを出力して、開発を効率的に進めよう

以上、ログ出力について解説してきました。

ログを全く出さない場合、

  • バグが起きた時に、原因の特定に苦しむ
  • プログラムの途中の経過が全く分からない

という悲劇がおきます。プログラマーなら途中の処理も把握しておかなければなりません。

最初のうちは積極的にログを出して、自分のプログラムの結果をコンソールで振り返りましょう。

ログを制すものはプログラムを制す!

コメント