JavaScriptのconsole.logを徹底解説！使い方・注意点・応用例10選

はじめに
●console.logとは
●console.logの使い方
●console.logの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読むと、JavaScriptのconsole.logを使いこなすことができるようになります。

JavaScript初心者の方でも分かりやすく解説していますので、ぜひ参考にしてみてください。

本記事では、console.logの基本的な使い方から応用例、注意点、カスタマイズ方法までを網羅しています。

●console.logとは

console.logは、JavaScriptで開発者向けにデバッグ情報を表示するための機能です。

ブラウザの開発者ツールのコンソールにログを出力し、プログラムの動作確認やエラー解析を行います。

また、状況に応じて、カスタムスタイルや色分けを行うことも可能です。

●console.logの使い方

console.logは簡単に使えるため、プログラムの動作確認に役立ちます。

ここでは基本的な使い方のサンプルコードを3つ紹介します。

○サンプルコード1：変数の表示

このコードでは、変数を使って文字列を表示する例を紹介しています。

この例では、変数nameに代入された値をconsole.logで表示しています。

const name = "山田太郎";
console.log(name); // 山田太郎が表示される

○サンプルコード2：オブジェクトの表示

このコードでは、オブジェクトを使って複数のデータを一度に表示する例を紹介しています。

この例では、オブジェクトuserの情報をconsole.logで表示しています。

const user = {
  name: "山田太郎",
  age: 25,
  gender: "男性"
};

console.log(user); // {name: "山田太郎", age: 25, gender: "男性"}が表示される

○サンプルコード3：関数の実行結果を表示

このコードでは、関数を使って処理結果を表示する例を紹介しています。

この例では、関数addの実行結果をconsole.logで表示しています。

function add(a, b) {
  return a + b;
}

const result = add(5, 3);
console.log(result); // 8が表示される

●console.logの応用例

console.logはデバッグの際に非常に便利な機能です。

ここでは応用的な使い方のサンプルコードを7つ紹介します。

○サンプルコード4：デバッグ時の情報表示

このコードでは、console.logを使ってデバッグ情報を表示する例を紹介しています。

この例では、console.logに文字列と変数を組み合わせてデバッグ情報を表示しています。

const name = "山田太郎";
const age = 25;

console.log("名前:", name, "年齢:", age); // 名前: 山田太郎 年齢: 25 が表示される

○サンプルコード5：繰り返し処理の途中経過を確認

このコードでは、繰り返し処理の途中経過をconsole.logで表示する例を紹介しています。

この例では、for文を使って1から10までの数値を順番に表示しています。

for (let i = 1; i <= 10; i++) {
  console.log("現在の値:", i); // 現在の値: 1, 2, 3, ... 10 が順番に表示される
}

○サンプルコード6：エラー時の情報収集

このコードでは、エラーが発生した際にconsole.logを使ってエラー情報を表示する例を紹介しています。

この例では、try…catch構文を使ってエラーを捕捉し、エラー情報を表示しています。

try {
  const result = someFunction(); // 未定義の関数を呼び出す
} catch (error) {
  console.log("エラー発生:", error); // エラー発生: ReferenceError: someFunction is not defined が表示される
}

○サンプルコード7：パフォーマンス計測

このコードでは、console.logとconsole.timeを使って処理のパフォーマンスを計測する例を紹介しています。

この例では、配列の要素を逆順に並べ替える処理の所要時間を計測しています。

const array = [1, 2, 3, 4, 5];

console.time("配列の逆順処理");
array.reverse();
console.timeEnd("配列の逆順処理"); // 配列の逆順処理: 〇〇ms が表示される

○サンプルコード8：条件分岐の確認

このコードでは、条件分岐の結果をconsole.logで表示する例を紹介しています。

この例では、変数numの値に応じて、”偶数”または”奇数”を表示しています。

const num = 5;

if (num % 2 === 0) {
  console.log("偶数"); // numが偶数の場合に表示される
} else {
  console.log("奇数"); // numが奇数の場合に表示される
}

○サンプルコード9：関数の実行順序を把握

このコードでは、複数の関数の実行順序をconsole.logで表示する例を紹介しています。

この例では、関数func1, func2, func3の実行順序を表示しています。

function func1() {
  console.log("func1実行");
}

function func2() {
  console.log("func2実行");
}

function func3() {
  console.log("func3実行");
}

func1();
func2();
func3();

○サンプルコード10：カスタムスタイルでの表示

このコードでは、console.logを使ってカスタムスタイルのテキストを表示する例を紹介しています。

この例では、文字サイズや色を指定したスタイルでテキストを表示しています。

console.log("%cカスタムスタイルの表示", "font-size:20px;color:red;");

●注意点と対処法

console.logを多用しすぎると、コンソールが見づらくなることがあります。
適切なログレベル（console.info、console.warn、console.errorなど）を使い分けましょう。
プロダクション環境では、不要なconsole.logは削除するか、コメントアウトしておくことが望ましいです。