こんにちは、kazuです。
JavaScriptでのconsole.logって知っていますか？
これはデバッグ時に大変役に立つものなので、
ぜひ覚えていて損はない知識ですので、記事にしました。
デバックとは?
デバッグとは、プログラミングを行う中で、エラーを見つけるためだったり
どこまで処理が走っているかを可視化だったり変数にはなんの値が入っているのかだったりとかを確認できる処理をデバッグと言います。
デバッグを行わずにプログラミングを進めていくと、
本当に正しい値が入っているか不明でエラーにつながる可能性もあります。
デバッグで確認しながらプログラムを書くのは必須になります。
デバッグを行う事自体を手間に感じるかもしれませんが、エラーの早期発見・早期修正が可能となり、結果的にはプログラム完成が早くなります。
ですので、覚えておいて損はないスキルです。
console.logの使用例
次は実際にconsole.logに触れていきます。（今回の環境はgoogle chromeです。）
まず、検証を開きます（mac二本指で長押し、windows右クリックに検証がある又はf12）
開くとコードの書かれた画面が表示されますので、
下の図の赤枠のConsoleに合わせてください。
そして検証のConsoleに合わせたらした図のように書いてみてください。
少しここで説明させていただきます。
console.log()というのが決まった形になります。
そして’hello’というのがアウトプットするものになります。
シングルクォート(‘)で囲むと文字列という意味ですので文字列としては表示はされません。
実行すると、下のようになります。
１行目 console.log(‘hello’) ー実行されたプログラム
２行目 hello ープログラムの実行結果
３行目 undefined ー実行されたプログラムのリターンですが、今回は説明しません。
またブラウザによっては順番が異なる可能性があるので順番が違っても問題はありません。
中身を変えるとどうなるの？
ここからはconsole.logの（）の中身を変えるとどう実行されるのかについて書いていきます。
１．console.logで計算！？
console.log(2+5) （数字の時はシングルクォートは必要ありません）
を実行すると「7」と表示されます。
２．console.logは日本語可能なの？
結論可能です！ですが、試してみましょう以下のconsoleを書きます。
console.log(‘テスト’)
そして上記ログを実行すると「テスト」と表示されます。
３．文字列にシングルクォートを忘れるとどうなる？
先ほどからシングルクォートの話がちょいちょい出てきますが、
忘れるとどうなるのか検証していきます。
console.log(テスト）
を実行すると「Uncaught ReferenceError: テスト is not defined
at <anonymous>:1:13」という赤字で表示されます。
これがエラーです。
ですので文字列のシングルクォートのつけ忘れは気をつけてください。
３．数値にシングルクォートをつけるとどうなる？
せっかくですのでもう一つだけ
１でconsole.logで計算することができるいうことは話しました。
ではそれにシングルクォートをつけてしますとどうなるのでしょうか？
console.log(‘2+5’)
を実行すると「2+5」と表示されます。
これはなぜかというと、
シングルクォートをつけることにより文字列と判断されたためです。
最後に
いかがでしたでしょうか？
デバック..奥が深いですよね
今回は基礎の基礎です
本当のデバッグは（）内に変数を入れるなど
もっと知っていなければならないことがあります。
それはまた別の記事で書いていこうと思います。
最後までご覧いただきありがとうございました。
ぜひ、参考にしていただけると嬉しいです。