console (Built-in)
JavaScript/Node.js標準搭載のロギング機能。console.log、console.error、console.warn等の基本的なメソッドを提供。設定不要で即座に利用可能で、開発・デバッグ用途で広く使用されている。プロダクション環境では機能が限定的。
ライブラリ
console (Built-in)
概要
consoleは、JavaScript/Node.js標準搭載のロギング機能で、開発・デバッグ用途において最も基本的で重要なツールです。console.log、console.error、console.warn等の基本的なメソッドを提供し、設定不要で即座に利用可能。ブラウザとNode.js環境の両方で動作し、開発段階でのクイックデバッグや情報出力に最適化されています。プロダクション環境では機能が限定的なため、本格的なアプリケーションでは専用ロギングライブラリとの併用が推奨されます。
詳細
console APIは、V8エンジンの組み込み機能として実装されており、JavaScript開発者にとって最も身近なロギング手段です。2025年現在でも開発・プロトタイピング段階での利用は不変であり、シンプルなスクリプトやクイックデバッグでは依然として最初の選択肢。ブラウザの開発者ツールとの統合により、フォーマット指定子（%s、%d、%o等）やCSS styling（%c）をサポート。Node.js環境では診断チャネル（diagnostics_channel）との統合により、パフォーマンス監視やデバッグ情報の収集が可能。複数のログレベル（log、debug、info、warn、error）とタイミング機能（time/timeEnd）、グループ化（group/groupEnd）、プロファイリング（profile/profileEnd）など多様な機能を提供しています。
主な特徴
- 設定不要の即座利用: importやセットアップ無しで即座に利用可能
- 多様なログメソッド: log、debug、info、warn、error、trace等の豊富なメソッド
- フォーマット機能: printf風のフォーマット指定子とCSS styling対応
- パフォーマンス測定: time/timeEndによる実行時間測定
- 構造化表示: table、dir、groupによる整理された出力
- ブラウザ・Node.js両対応: クロスプラットフォームでの一貫した動作
メリット・デメリット
メリット
- JavaScriptエコシステムでの圧倒的な普及率と学習コストの低さ
- 設定不要で即座に利用可能な手軽さと開発効率の向上
- ブラウザ開発者ツールとの優れた統合性とデバッグ体験
- Node.js環境での診断チャネル統合によるパフォーマンス監視
- フォーマット指定子とCSS stylingによる柔軟な出力制御
- 軽量で他のライブラリへの影響が最小限
デメリット
- プロダクション環境での機能制限とログ管理の困難さ
- ログレベル制御やフィルタリング機能の不足
- ファイル出力や外部サービス連携機能の欠如
- 大量ログ出力時のパフォーマンス影響
- 構造化ログや分析ツール連携の限界
- 本格的なアプリケーションでは機能不足
参考ページ
書き方の例
基本的なログ出力
// 基本的なログ出力
console.log('Hello, World!');
console.log('ユーザー情報:', user);
console.log('計算結果:', result);
// 複数の値を同時出力
console.log('名前:', name, '年齢:', age, '都市:', city);
// テンプレートリテラルとの組み合わせ
console.log(`ユーザー ${name} の年齢は ${age} 歳です`);
// オブジェクトと配列の出力
const user = { name: '田中太郎', age: 30, role: 'developer' };
const numbers = [1, 2, 3, 4, 5];
console.log('ユーザーオブジェクト:', user);
console.log('数値配列:', numbers);
// JSON形式での出力
console.log('JSON形式:', JSON.stringify(user, null, 2));
ログレベル別の出力
// 各種ログレベルの使用
console.debug('デバッグ情報: 変数の値を確認');
console.info('情報: アプリケーションが正常に開始されました');
console.warn('警告: 非推奨のAPIが使用されています');
console.error('エラー: データベース接続に失敗しました');
// エラーオブジェクトとスタックトレース
try {
throw new Error('サンプルエラー');
} catch (error) {
console.error('例外発生:', error);
console.trace('スタックトレース:');
}
// assert文による条件チェック
const value = 10;
console.assert(value > 5, 'valueは5より大きくなければなりません');
console.assert(value < 5, 'この条件は偽なので、メッセージが表示されます');
// カウンター機能
console.count('関数呼び出し');
console.count('関数呼び出し');
console.count('エラー発生');
console.countReset('関数呼び出し');
フォーマット指定子とスタイリング
// printf風のフォーマット指定子
const name = '田中太郎';
const age = 30;
const score = 85.6789;
console.log('文字列: %s', name);
console.log('整数: %d', age);
console.log('浮動小数点: %f', score);
console.log('小数点制御: %.2f', score);
console.log('オブジェクト: %o', { name, age });
// CSS stylingを使った装飾（ブラウザ環境）
console.log('%c重要なメッセージ', 'color: red; font-weight: bold; font-size: 16px;');
console.log('%c成功%c 操作が完了しました',
'color: green; font-weight: bold;',
'color: black; font-weight: normal;'
);
// 複数のスタイルを組み合わせ
console.log(
'%cAPP%c %cSTARTED%c アプリケーションが起動しました',
'background: blue; color: white; padding: 2px 5px; border-radius: 3px;',
'',
'background: green; color: white; padding: 2px 5px; border-radius: 3px;',
''
);
// 箇条書きスタイル
console.log('%c• ステップ1: 初期化完了', 'color: #666;');
console.log('%c• ステップ2: データ読み込み完了', 'color: #666;');
console.log('%c• ステップ3: 処理開始', 'color: #666;');
構造化表示とグループ化
// テーブル形式での表示
const users = [
{ id: 1, name: '田中太郎', age: 30, department: '開発部' },
{ id: 2, name: '佐藤花子', age: 28, department: 'デザイン部' },
{ id: 3, name: '鈴木次郎', age: 35, department: '営業部' }
];
console.table(users);
console.table(users, ['name', 'age']); // 特定のカラムのみ表示
// オブジェクトの詳細表示
const complexObject = {
user: { name: '田中太郎', settings: { theme: 'dark', lang: 'ja' } },
metadata: { created: new Date(), version: '1.0.0' }
};
console.dir(complexObject, { depth: null }); // 全階層表示
console.dir(complexObject, { colors: true }); // カラー表示（Node.js）
// グループ化による階層表示
console.group('ユーザー処理');
console.log('ユーザー情報取得開始');
console.log('データベース接続中...');
console.group('認証処理');
console.log('パスワード検証中...');
console.log('トークン生成中...');
console.groupEnd();
console.log('ユーザー情報取得完了');
console.groupEnd();
// 折りたたみグループ
console.groupCollapsed('詳細ログ');
console.log('詳細情報1');
console.log('詳細情報2');
console.log('詳細情報3');
console.groupEnd();
パフォーマンス測定とプロファイリング
// 実行時間測定
console.time('データ処理時間');
// 時間のかかる処理のシミュレーション
for (let i = 0; i < 1000000; i++) {
Math.random();
}
console.timeEnd('データ処理時間'); // "データ処理時間: 45.123ms"
// 中間時間の記録
console.time('全体処理');
console.log('処理開始');
setTimeout(() => {
console.timeLog('全体処理', '中間地点'); // 中間時間を表示
}, 1000);
setTimeout(() => {
console.timeEnd('全体処理'); // 全体時間を表示
}, 2000);
// 複数のタイマーを同時実行
console.time('API呼び出し1');
console.time('API呼び出し2');
// API呼び出しのシミュレーション
setTimeout(() => console.timeEnd('API呼び出し1'), 500);
setTimeout(() => console.timeEnd('API呼び出し2'), 800);
// CPU プロファイリング（ブラウザ環境）
console.profile('重要な処理');
// 測定したい処理
for (let i = 0; i < 100000; i++) {
document.createElement('div');
}
console.profileEnd('重要な処理');
デバッグとトラブルシューティング
// 条件付きログ出力
const DEBUG = true;
function debugLog(...args) {
if (DEBUG) {
console.log('[DEBUG]', ...args);
}
}
debugLog('デバッグ情報:', { status: 'ok', data: [1, 2, 3] });
// 関数トレース
function functionA() {
console.trace('functionA が呼ばれました');
functionB();
}
function functionB() {
console.trace('functionB が呼ばれました');
functionC();
}
function functionC() {
console.trace('functionC が呼ばれました');
}
functionA(); // 呼び出しスタックを表示
// エラーハンドリングとログ
async function fetchData(url) {
try {
console.log(`API呼び出し開始: ${url}`);
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP Error: ${response.status}`);
}
const data = await response.json();
console.log('API呼び出し成功:', data);
return data;
} catch (error) {
console.error('API呼び出しエラー:', error);
console.error('エラースタック:', error.stack);
throw error;
}
}
// 変数状態の監視
function monitorVariable(obj, prop) {
let value = obj[prop];
Object.defineProperty(obj, prop, {
get() {
console.log(`${prop} が読み取られました:`, value);
return value;
},
set(newValue) {
console.log(`${prop} が変更されました:`, value, '->', newValue);
value = newValue;
}
});
}
const state = { count: 0 };
monitorVariable(state, 'count');
state.count = 5; // ログが出力される
console.log(state.count); // ログが出力される
Node.js環境での拡張利用
// カスタムコンソールの作成
const fs = require('fs');
const { Console } = require('console');
// ファイル出力用のコンソール
const logFile = fs.createWriteStream('./app.log', { flags: 'a' });
const errorFile = fs.createWriteStream('./error.log', { flags: 'a' });
const fileConsole = new Console({
stdout: logFile,
stderr: errorFile
});
// 標準コンソールとファイルコンソールの使い分け
console.log('標準出力に表示');
fileConsole.log('ファイルに記録:', new Date().toISOString());
// 診断チャネルとの連携（Node.js）
const diagnostics_channel = require('diagnostics_channel');
const channel = diagnostics_channel.channel('console');
channel.subscribe((message, name) => {
console.log(`Console event: ${name}`, message);
});
// フォーマットオプション付きのdir
const complexData = {
users: [
{ id: 1, name: '田中', nested: { a: 1, b: { c: 2 } } }
]
};
console.dir(complexData, {
showHidden: false,
depth: null,
colors: true,
maxArrayLength: 10,
maxStringLength: 100,
breakLength: 80,
compact: false
});
// プロセス終了時のログ
process.on('exit', () => {
console.log('アプリケーション終了');
});
process.on('uncaughtException', (error) => {
console.error('未捕捉例外:', error);
process.exit(1);
});