【JavaScript】Consoleについてまとめてみた!

こんにちは、kazuです。
あなたはプログラミングをするとき、デバッグをしますよね?
今回JavaScriptのデバッグconsoleについてまとめてみました。
ぜひ参考にしてください!!

consoleとは

consoleとはlogを出力するオブジェクトの一つです。
使い方としては変数の中身を確認したり、プログラムの流れを確認するため文字列を出力など使い方は様々です。
実際に一度console.logについて解説している記事がありますのでよければ確認してみてください!

consoleの書き方

実際にコード上でどのように記載すればいいか確認してみましょう!
※以下はconsole.logで記載して行きますが、consoleオブジェクト全てに当てはまります

文字列を出力

// 文字列出力
console.log("consoleを出力しています!");

// ブラウザ出力
consoleを出力しています!

変数を出力

// 変数出力
// 数値出力
var intValue = 1;
console.log(intValue);

// 文字列出力
var stringValue = "文字列の変数を出力している"
console.log(stringValue);

// ブラウザ出力
1
文字列の変数を出力している

文字列と変数を出力

文字列と変数の出力の書き方は2種類あるので紹介します。

// 変数と文字列出力
// 1つ目
var name = "Yamada";
console.log("私は" + name + "です。");
// 2つ目
var name2 = "Tanaka"
console.log(`私は${name2}です`);

// ブラウザ出力
私はYamadaです
私はTanakaです

その他使用方法

// 計算する
console.log(2+2);

// ブラウザ出力
4

console.log

通常レベルのログになります。
開発中に呼び出したいログを出力します。
特に詳しい説明は必要ないですね。

// 書き方
console.log(msg);

注意事項

全てのログが出力されますので、
セキュリティ上良くないです。実際にデプロイ際に消し忘れに注意してください!

console.info

※記載中

console.warn

※記載中

console.error

※記載中

console.debug

※記載中