【JavaScript】コンソールログは実際の開発現場ではこう使う。

皆さんこんにちは！
プログラミング初心者さんがつまずきやすいポイントを丁寧に解説、解消していく「初心者つまずき解消ブログ」です。

今回は、コンソールログの実際の使い方を紹介していきます。

JavaScriptを学び始めると、最初の方で出てくるのがこの「コンソールログ（console.log()）」ですよね。例えば、

console.log(“hoge”);と書けばデベロッパーツールのコンソールに「hoge」と出力されます。
console.log(elem);と書けばelem変数の中の値がコンソールに出力されます。

というような説明が書かれていると思います。

ここで、「出力されるのはわかったけど、コンソールログって実際どんなときに使うの？」という疑問が生まれる人が多いです。

実際の開発現場でコンソールログは「出力」ではなく「デバック」に使われます。 デバックとはプログラムのバグやエラーの原因を見つけ、修正する作業のことです。

つまりコンソールログは、「コードの中の、どこの部分が原因でプログラムがうまく動かないのか。」を探るために使われるということです。

実際の開発現場では何百〜何万行という数のコードの中からバグやエラーの原因となるものを見つけなければなりません。

そこで活躍するのがコンソールログです。

大雑把な例にはなってしまいますが例えば、 100行ほどのコードの中からエラーの原因を探る場合。

まず50行目あたりでコンソールログを書きます。
もしそのコンソールログが出力されていないようであれば50行目以前にエラーの原因がある。 コンソールログが出力されていれば、50行目以降にエラーの原因がある。と推測することができます。

このように、「〇〇行目まではちゃんと処理が流れているのか」や「〇〇行目時点でこの変数には意図した値が入っているのか」などを調べることができます。

初めのうちは、書くコードの行数も少ないのでデバックといってもあまりしっくりこないですよね。
学習を進めていくうちに、書くコードの行数も増え、処理が複雑になったり、ひと目で処理を追えなくなってきたら、コンソールログのありがたみに気づくことでしょう。