JavaScript Tips | ログ・デバッグ・エラー処理：DEBUGログを制御する

JavaScript JavaScript
スポンサーリンク
スポンサーリンク

DEBUGログは「開発中の挙動を可視化し、必要なときだけ出すための制御技術」

DEBUGログは、業務システムの開発・テスト段階で最も役に立つログです。 しかし、本番環境で DEBUG を大量に出してしまうと、 ログが膨れ上がり、パフォーマンス低下や監視の妨げになります。

そのため、DEBUGログは “出すべき時だけ出す” という制御が非常に重要です。

ここでは、初心者でも理解しやすいように、 DEBUGログの役割 → 制御方法 → 実装 → 業務テンプレート という流れでステップバイステップで解説します。

DEBUGログの役割は「内部状態の可視化」

DEBUGログは次のような場面で使われます。

  • 関数の入力値を確認したい
  • API のレスポンスを確認したい
  • 条件分岐がどちらに進んだか知りたい
  • バグの原因を探りたい
  • 設定値が正しく読み込まれているか確認したい

つまり DEBUGログは、 「開発者が内部の動きを理解するためのログ」 です。

ステップ1：DEBUGログを出すかどうかを制御するフラグを作る

DEBUGログを制御する最も基本的な方法は、 フラグ（true/false）で出力を切り替えることです。

const DEBUG_MODE = true; // 本番では false にする
JavaScript

ステップ2：DEBUGログ関数を作る（最小構成）

function debugLog(message) {
  if (!DEBUG_MODE) return;
  console.debug(`[DEBUG] ${message}`);
}
JavaScript

使用例

debugLog("APIレスポンスを解析します");
debugLog("ユーザーID=123 を処理中");
JavaScript

ステップ3：タイムスタンプを付けて読みやすくする

DEBUGログにも時刻があると、 「どのタイミングで何が起きたか」が分かりやすくなります。

function getTimestamp() {
  const d = new Date();
  const pad2 = (n) => String(n).padStart(2, "0");
  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())} `
       + `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
}

function debugLog(message) {
  if (!DEBUG_MODE) return;
  console.debug(`[DEBUG] [${getTimestamp()}] ${message}`);
}
JavaScript

ステップ4：オブジェクトを安全にログ出力できるようにする

DEBUGログではオブジェクトを出すことが多いです。

debugLog({ userId: 123, status: "OK" });
JavaScript

そのため、安全に JSON 化する関数を用意します。

function safeStringify(value) {
  try {
    return typeof value === "string" ? value : JSON.stringify(value);
  } catch {
    return "[Unserializable Object]";
  }
}
JavaScript

DEBUGログに組み込むと次のようになります。

function debugLog(message) {
  if (!DEBUG_MODE) return;
  console.debug(`[DEBUG] [${getTimestamp()}] ${safeStringify(message)}`);
}
JavaScript

ステップ5：コンテキスト（文脈）を付けて読みやすくする

業務では「どの処理で DEBUG が出たか」を知りたい場面が多いです。

function createDebugLogger(context) {
  return function(message) {
    if (!DEBUG_MODE) return;
    console.debug(`[DEBUG] [${getTimestamp()}] [${context}] ${safeStringify(message)}`);
  };
}
JavaScript

使用例

const apiDebug = createDebugLogger("UserAPI");
apiDebug("レスポンス解析を開始");
apiDebug({ rawResponse: "{...}" });
JavaScript

ステップ6：環境変数で DEBUG を制御する（実務で最も使われる方法）

本番環境では DEBUG を出したくないため、 環境変数で制御する方法が一般的です。

例：Node.js

const DEBUG_MODE = process.env.DEBUG === "true";
JavaScript

例：ブラウザ（ビルド時に置換）

const DEBUG_MODE = import.meta.env.VITE_DEBUG === "true";
JavaScript

DEBUGログの業務テンプレート（完成版）

export const Logger = {
  DEBUG_MODE: true, // 本番では false にする

  pad2(n) {
    return String(n).padStart(2, "0");
  },

  timestamp() {
    const d = new Date();
    return `${d.getFullYear()}-${this.pad2(d.getMonth() + 1)}-${this.pad2(d.getDate())} `
         + `${this.pad2(d.getHours())}:${this.pad2(d.getMinutes())}:${this.pad2(d.getSeconds())}`;
  },

  stringify(value) {
    try {
      return typeof value === "string" ? value : JSON.stringify(value);
    } catch {
      return "[Unserializable Object]";
    }
  },

  debug(msg, context = "") {
    if (!this.DEBUG_MODE) return;
    const ctx = context ? `[${context}] ` : "";
    console.debug(`[DEBUG] [${this.timestamp()}] ${ctx}${this.stringify(msg)}`);
  },
};
JavaScript

DEBUGログを使った実務テンプレート

API のレスポンスを確認する

Logger.debug("APIレスポンスを受信しました", "UserAPI");
Logger.debug({ response: apiResponse }, "UserAPI");
JavaScript

条件分岐の動きを確認する

if (user.isPremium) {
  Logger.debug("プレミアムユーザーとして処理します", "UserLogic");
} else {
  Logger.debug("通常ユーザーとして処理します", "UserLogic");
}
JavaScript

バッチ処理の内部状態を確認する

Logger.debug("売上集計バッチの中間結果", "SalesBatch");
Logger.debug({ total: 12000, count: 45 }, "SalesBatch");
JavaScript

DEBUGログを深掘り：なぜ「制御」が重要なのか

1. 本番環境で DEBUG を出すとログが膨れ上がる

大量の DEBUG は監視の妨げになります。

2. パフォーマンス低下の原因になる

ログ出力はコストが高いため、 大量の DEBUG は処理速度を落とします。

3. セキュリティリスクになる

内部情報を DEBUG に出してしまうと、 本番環境で情報漏洩につながる可能性があります。

4. 必要なときだけ出すことで開発効率が上がる

DEBUG を制御できると、 「必要なときだけ内部状態を見られる」ようになります。

まとめ：DEBUGログは「必要なときだけ内部状態を可視化するための制御技術」

DEBUGログを正しく扱うことで、次のメリットが得られます。

  • 開発効率が大幅に向上する
  • バグの原因を素早く特定できる
  • 本番環境のログが汚れない
  • セキュリティリスクを減らせる
  • チームでログ形式が統一される

DEBUGログは、開発者のための強力なツールです。 しかし、強力だからこそ 制御が必須 です。

共通 Logger と組み合わせて DEBUGログを整備しておくことで、 どの場面でも安定したログ管理ができるようになります。

スポンサーリンク
タイトルとURLをコピーしました