【JavaScript】開発効率を劇的に上げるconsole.logによる値の確認方法

2026年1月22日

概要

プログラムが意図した通りに動いているかを確認する最も確実な方法は、実行中の変数の値を「見る」ことです。本記事では、ブラウザのデベロッパーツール（コンソール）に出力を行うconsole.log()メソッドを使用し、計算結果や変数の状態をリアルタイムに追跡するデバッグ手法を解説します。

仕様（入出力）

入力: JavaScriptコード内でのconsole.log()の呼び出し
出力: ブラウザのコンソールタブへのテキスト、数値、オブジェクト情報の表示

基本の使い方

console.log()は、引数に渡した値をブラウザのコンソール領域に出力します。カンマ区切りで複数の値を渡すことで、ラベルと値をセットで表示したり、複数の変数を一度に確認したりすることができます。

コード全文（HTML / JavaScript）

HTML (index.html)

ブラウザのコンソールを確認するように促すための簡易的な画面です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Console Debugging Demo</title>
    <script src="debug-demo.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>コンソールを確認してください</h1>
        <p>Windows: F12 または Ctrl+Shift+I</p>
        <p>Mac: Cmd+Option+I</p>
        <p>「Console」タブに計算結果が出力されています。</p>
    </div>
</body>
</html>

JavaScript (debug-demo.js)

商品の価格計算をシミュレーションし、その過程と結果をログに出力します。

/**
 * ショッピングカートの計算処理デモ
 */
const calculateCart = () => {
    // 商品価格と税率の定義
    const itemPrice = 1500;
    const taxRate = 0.1;
    
    // 単体の値を確認
    console.log('--- 計算開始 ---');
    console.log(itemPrice); // 数値をそのまま出力

    // 計算処理
    const taxAmount = itemPrice * taxRate;
    const totalPrice = itemPrice + taxAmount;

    // 複数の値を同時に出力（ラベル付けして分かりやすく表示）
    console.log('消費税額:', taxAmount);
    console.log('支払合計:', totalPrice);

    // 文字列テンプレートを使用した出力
    console.log(`定価 ${itemPrice} 円の商品の税込み価格は ${totalPrice} 円です。`);
};

// 実行
calculateCart();

カスタムポイント

識別子の付与: 単に console.log(totalPrice) と書くと、ログが増えた時に「何の数値か」が分からなくなります。必ず console.log('合計:', totalPrice) のように、文字列でラベルを付ける習慣をつけると可読性が向上します。
オブジェクトの出力: 変数がオブジェクトの場合は、console.log({ user }) のように波括弧で囲んで出力すると、変数名と中身がセットで表示され便利です。

注意点

本番環境への残存: 開発中に書いたconsole.logをそのまま本番環境（公開用コード）に残すと、処理速度の低下や、内部ロジックの漏洩につながるリスクがあります。リリース前には必ず削除または無効化してください。
機密情報の出力: パスワード、APIキー、個人情報などをログに出力することは絶対にしてはいけません。コンソールはユーザー誰でも閲覧可能です。
オブジェクトの参照: オブジェクトや配列をログに出力した後、コードの続きでその中身を変更すると、ブラウザによってはログの表示内容も連動して変わって見える場合があります（参照渡しのため）。現在の瞬間的な値を記録したい場合は JSON.parse(JSON.stringify(obj)) などで複製する必要があります。

応用

エラーや警告として出力する

情報の重要度に応じてメソッドを使い分けると、コンソール上で色分けされて見やすくなります。

// 警告（黄色いアイコンで表示）
console.warn('在庫が残りわずかです');

// エラー（赤いアイコンで表示し、スタックトレースを含める）
console.error('通信に失敗しました');

// 表形式での表示（配列やオブジェクトを見やすく整形）
const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
];
console.table(users);