読み込み中...

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

JavaScript console.log徹底解説 JS
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読むと、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;");

●注意点と対処法

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

●カスタマイズ方法

console.logの表示はカスタマイズが可能です。

例えば、文字サイズや色、背景色を変更したり、グループ化して表示したりすることができます。

詳細は、開発者ツールのドキュメントを参照してください。

まとめ

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

console.logはデバッグの際に非常に便利な機能ですので、ぜひ活用してプログラムの動作確認やエラー解析を行ってください。