導入：なぜconsole.infoを使うべきなのか？
フロントエンド開発において、デバッグ時にとりあえず「console.log」を使っていませんか？もちろんlogも便利ですが、ログが増えるほど情報の海に埋もれ、重要なメッセージを見逃しがちになります。そこで活用したいのが「console.info」です。これは単なる情報の出力ではなく、ログに「情報である」というセマンティックな意味を持たせるためのAPIです。適切に使い分けることで、ブラウザのコンソールログを整理し、開発効率を向上させることができます。
基礎知識：console.infoとは何か？
console.infoは、ブラウザのデベロッパーツールにおいて「情報（Information）」レベルのログを出力するためのメソッドです。多くのブラウザでは、console.logとは異なり、ログの先頭に「i」マークのようなアイコンが表示されるため、視覚的に他のログと区別しやすくなります。開発環境において、APIのレスポンスや状態遷移など、「エラーではないが記録しておきたい流れ」を可視化するのに最適です。
実装・解決策：ログの役割を明確にする
console.infoを効果的に使うコツは、出力する内容を「追跡したい処理のライフサイクル」に合わせることです。例えば、ユーザーのアクション、関数が呼び出されたタイミング、または非同期処理の開始・終了などをinfoで記録します。また、ブラウザのデベロッパーツールにある「ログレベルフィルタ」機能を使えば、infoだけを表示したり、逆にログが多すぎる時にinfoを非表示にしてデバッグをスムーズにすることも可能です。
サンプルプログラム
以下のコードは、APIからデータを取得する際の流れをinfoで適切に分類した例です。
// 非同期でデータを取得する関数
async function fetchData(url) {
// 処理の開始をinfoで記録
console.info('データ取得を開始しました:', url);
try {
const response = await fetch(url);
const data = await response.json();
// 成功した結果をinfoで出力（エラーではないためlogではなくinfoを使用）
console.info('データ取得に成功しました。取得件数:', data.length);
return data;
} catch (error) {
// エラー時はconsole.errorを使用し、infoと明確に区別する
console.error('通信エラーが発生しました:', error);
}
}
// 実行例
fetchData('https://jsonplaceholder.typicode.com/posts');
応用・注意点：現場での運用ルール
現場で使う際に最も注意すべきは「本番環境への混入」です。infoに限らず、console系のメソッドを本番環境に残すことはセキュリティやパフォーマンスの観点から推奨されません。
1. ビルドツールでの自動削除: WebpackやViteなどのビルド設定で、本番環境ビルド時にconsole出力を自動的に削除するプラグイン（terserなど）を導入しましょう。
2. ラッパー関数の作成: 開発中のみ有効なログ出力関数を自作しておくのも有効です。環境変数（process.env.NODE_ENV）をチェックし、開発モードの時だけconsole.infoを実行する仕組みを作れば、本番環境への影響を確実に防げます。
適切に分類されたログは、チーム開発において「どこで何が起きているか」を共有するための強力なドキュメントになります。今日からlogをinfoに置き換えるところから始めてみてください。