基本的な使用方法

以下のプログラムは、console.log() の基本的な使用方法を示しています。

// 単一の値を出力
console.log('こんにちは、世界！');

// 複数の値を出力（スペースで区切られる）
console.log('名前:', '山田太郎', '年齢:', 30);

// 変数の値を出力
const x = 42;
const name = '佐藤花子';
console.log('x =', x, 'name =', name);

このプログラムでは、文字列や数値を単独または組み合わせて出力しています。複数の値は自動的にスペースで区切られます。

オブジェクトとデータ構造の出力

以下のプログラムは、オブジェクトや配列などの複雑なデータ構造を出力する例を示しています。

// オブジェクトを出力
const person = {
  name: '鈴木一郎',
  age: 35,
  address: {
    city: '大阪',
    zipCode: '530-0001'
  },
  hobbies: ['サッカー', '料理', '写真']
};
console.log(person);

// 配列を出力
const numbers = [1, 2, 3, 4, 5];
console.log(numbers);

// DOM要素を出力（ブラウザ環境）
const element = document.getElementById('app');
console.log(element);

このプログラムでは、オブジェクト、配列、DOM要素などの複雑なデータ構造を出力しています。多くのブラウザでは、これらは展開可能なツリービューとして表示されます。

書式指定文字列の使用

以下のプログラムは、書式指定文字列を使用した例を示しています。

// %s - 文字列
// %d または %i - 整数
// %f - 浮動小数点数
// %o - オブジェクト
// %c - CSSスタイル

console.log('こんにちは、%s さん！あなたは %d 歳です。', '田中', 25);

// 数値のフォーマット
console.log('円周率は約 %f です。', Math.PI);
console.log('円周率は約 %.2f です。', Math.PI); // 小数点以下2桁

// オブジェクトの表示
const user = { name: '佐藤', age: 40 };
console.log('ユーザー情報: %o', user);

// スタイル付きテキスト（ブラウザ環境）
console.log(
  '%cこれは大きな赤いテキストです',
  'color: red; font-size: 20px; font-weight: bold;'
);

このプログラムでは、書式指定文字列を使用して値をフォーマットしています。%s、%d、%f などのプレースホルダーを使用して、後続の引数の値を埋め込んでいます。また、%c を使用してCSSスタイルを適用しています（ブラウザ環境でのみサポート）。

デバッグにおける使用

以下のプログラムは、デバッグにおける console.log() の一般的な使用パターンを示しています。

function calculateTotal(items) {
  console.log('calculateTotal関数が呼び出されました', { items });
  
  let total = 0;
  for (const item of items) {
    console.log('処理中のアイテム:', item);
    total += item.price * item.quantity;
  }
  
  console.log('計算結果:', total);
  return total;
}

const shoppingCart = [
  { name: 'りんご', price: 100, quantity: 3 },
  { name: 'バナナ', price: 80, quantity: 5 },
  { name: 'オレンジ', price: 120, quantity: 2 }
];

const total = calculateTotal(shoppingCart);
console.log('合計金額:', total);

このプログラムでは、関数の実行過程を追跡するために console.log() を使用しています。関数の呼び出し、入力データ、中間状態、そして最終結果が記録されます。

注意点

• パフォーマンスへの影響: console.log() の頻繁な使用や大きなオブジェクトのロギングは、特に本番環境でのパフォーマンスに影響を与える可能性があります。
• 環境による違い: console.log() の出力形式や機能は実行環境（ブラウザ、Node.js など）によって異なる場合があります。
• 非同期の振る舞い: 一部のブラウザでは、コンソールへの出力が非同期に行われることがあり、タイミングに関する問題が発生する可能性があります。
• 循環参照: 循環参照を含むオブジェクトを出力すると、一部の環境では無限再帰を防ぐために特殊な表示がされます。
• 本番環境: 本番環境では、デバッグ用の console.log() 呼び出しを削除または無効化することが推奨されます。