3.2 Console API詳解

基本的なログ出力

console.log()

最も基本的なログ出力。任意の数の引数を受け取る。

console.log('Hello');
console.log('Value:', 42);
console.log('User:', {name: 'Alice', age: 25});
console.log('Array:', [1, 2, 3]);

console.info()

情報メッセージ。logとほぼ同じだが、青いアイコンで表示される。

console.info('Application started');

console.warn()

警告メッセージ。黄色背景で表示される。

console.warn('Deprecated function used');

console.error()

エラーメッセージ。赤色背景で表示され、スタックトレースも含まれる。

console.error('Failed to fetch data');

console.debug()

デバッグメッセージ。デフォルトでは非表示（Verbose levelを有効にすると表示）。

console.debug('Internal state:', state);

書式指定子

C言語のprintf風の書式指定子を使用できる。

console.log('User: %s, Age: %d', 'Alice', 25);
// → User: Alice, Age: 25

console.log('PI: %.2f', Math.PI);
// → PI: 3.14

// CSSスタイルを適用
console.log('%cStyled text', 'color: blue; font-size: 20px');
console.log('%cSuccess%c and %cError', 
    'color: green', '', 'color: red');

console.table()

配列やオブジェクトをテーブル形式で表示。データの比較や一覧表示に便利。

// オブジェクトの配列
const users = [
    {name: 'Alice', age: 25, city: 'Tokyo'},
    {name: 'Bob', age: 30, city: 'Osaka'},
    {name: 'Carol', age: 28, city: 'Kyoto'}
];
console.table(users);

// 特定のカラムのみ表示
console.table(users, ['name', 'age']);

// オブジェクト
const settings = {
    theme: 'dark',
    language: 'ja',
    fontSize: 14
};
console.table(settings);

グループ化

console.group() / console.groupEnd()

関連するログをグループ化。ネストも可能。

console.group('User Details');
console.log('Name: Alice');
console.log('Age: 25');
console.group('Address');
console.log('City: Tokyo');
console.log('Country: Japan');
console.groupEnd();
console.groupEnd();

console.groupCollapsed()

デフォルトで折りたたまれた状態のグループを作成。

console.groupCollapsed('Debug Info');
console.log('Detailed debug information...');
console.log('...');
console.groupEnd();

時間計測

console.time() / console.timeEnd()

処理の実行時間を計測。

console.time('fetch');
await fetch('/api/data');
console.timeEnd('fetch');
// → fetch: 123.456ms

console.timeLog()

タイマーを終了せずに途中経過を出力。

console.time('process');

// Step 1
doStep1();
console.timeLog('process', 'Step 1 done');

// Step 2
doStep2();
console.timeLog('process', 'Step 2 done');

// Complete
console.timeEnd('process');

console.timeStamp()

Performanceパネルのタイムラインにマーカーを追加。

console.timeStamp('User clicked button');

カウンター

console.count()

呼び出し回数をカウント。

function processItem(item) {
    console.count('processItem called');
    // ...
}

processItem(a); // → processItem called: 1
processItem(b); // → processItem called: 2
processItem(c); // → processItem called: 3

console.countReset()

カウンターをリセット。

console.count('clicks');    // → clicks: 1
console.count('clicks');    // → clicks: 2
console.countReset('clicks');
console.count('clicks');    // → clicks: 1

アサーション

console.assert()

条件がfalseの場合のみエラーを出力。

const value = 10;
console.assert(value > 0, 'Value should be positive');
// → 出力なし（条件がtrue）

console.assert(value > 100, 'Value should be greater than 100');
// → Assertion failed: Value should be greater than 100

スタックトレース

console.trace()

現在位置までのスタックトレースを出力。

function first() {
    second();
}

function second() {
    third();
}

function third() {
    console.trace('How did we get here?');
}

first();
// → How did we get here?
//     third @ script.js:10
//     second @ script.js:6
//     first @ script.js:2
//     (anonymous) @ script.js:13

オブジェクト表示

console.dir()

オブジェクトのプロパティをツリー形式で表示。

// DOM要素の場合、logとdirで表示が異なる
const element = document.body;
console.log(element);  // → HTMLとして表示
console.dir(element);  // → オブジェクトとして表示

console.dirxml()

XMLまたはHTML要素として表示。

console.dirxml(document.body);

クリア

console.clear()

Consoleの内容をクリア。

console.clear();

実践的なパターン

条件付きログ

const DEBUG = true;

function debugLog(...args) {
    if (DEBUG) {
        console.log('[DEBUG]', ...args);
    }
}

debugLog('Current state:', state);

関数のエントリー/イグジットログ

function processData(data) {
    console.group('processData');
    console.log('Input:', data);
    console.time('processData');
    
    // 処理...
    const result = transform(data);
    
    console.timeEnd('processData');
    console.log('Output:', result);
    console.groupEnd();
    
    return result;
}

APIリクエストのログ

async function fetchData(url) {
    console.groupCollapsed(`Fetch: ${url}`);
    console.time('request');
    
    try {
        const response = await fetch(url);
        console.log('Status:', response.status);
        const data = await response.json();
        console.log('Data:', data);
        return data;
    } catch (error) {
        console.error('Error:', error);
        throw error;
    } finally {
        console.timeEnd('request');
        console.groupEnd();
    }
}

パフォーマンス計測のラッパー

function measurePerformance(name, fn) {
    console.time(name);
    const result = fn();
    console.timeEnd(name);
    return result;
}

measurePerformance('heavy calculation', () => {
    return heavyCalculation();
});

ベストプラクティス

本番環境でのログ削除

本番環境ではconsole文を削除するか、条件付きで無効化する。

• ビルドツールのプラグインで自動削除（Terserなど）
• 環境変数で制御
• カスタムロガーで本番時は何もしない

適切なログレベルの使用

• log: 一般的な情報
• info: 重要な情報
• warn: 非推奨の使用、潜在的な問題
• error: エラー、例外
• debug: 詳細なデバッグ情報

構造化されたログ

オブジェクトを渡すと、Consoleで展開して詳細を確認できる。

// 悪い例
console.log('User: ' + user.name + ', Age: ' + user.age);

// 良い例
console.log('User:', user);