JavaScript：デバッグと例外処理（現場で困らないため）

投稿日：2026-01-13

音声

※ AI音声で読み上げます

const btn = document.getElementById('btn');
const out = document.getElementById('out');
const data = [{id:1,name:'Alice'},{id:2,name:'Bob'}];

btn.addEventListener('click',()=>{
  console.log('ボタン押下');
  console.table(data);
  try{
    const item = risky(data);
    out.textContent = `取得: ${item.name}`;
  }catch(e){
    console.warn('部分的に失敗:', e.message);
    out.textContent = 'エラー（Console参照）';
    console.error(e);
  }finally{
    console.log('処理終了');
  }
});
function risky(list){
  const it = list.find(d=>d.id===3);
  if(!it) throw new Error('データがありません');
  return it;
}

確認は、DevToolsのConsoleでlog/warn/error/tableを見て、画面の出力も確認します。

try/catch/finallyの基本

概要：tryは「失敗するかもしれない処理」、catchは「受け口」、finallyは「必ず実行する後片付け」です。

要点：

try：例外が発生する可能性がある範囲を限定します。
catch (e)：例外オブジェクトでログ・通知・復旧を行います。
finally：ローディング解除やリソース解放など必須処理を行います。

非同期：Promiseやasync/awaitでは適切にcatchを使います（promise.catch / try+await）。

例（短縮）：

try{ JSON.parse(s); }
catch(e){ console.error('parse失敗', e); }
finally{ console.log('終了'); }

「握りつぶさない」エラー表示の方針

空catchやログなしで続けるのは禁止です。障害を隠すと長期化します。

二段構えにするのがポイントです。

ユーザー向けは短く具体的にし、再試行や問い合わせ方法を示します。
開発者向けはスタックや文脈を必ず残し、console.error(e)やログ基盤を使います。

要チェックの点は次のとおりです。

e.messageだけで済ませず、例外全体を残します。
必要なら再スロー（throw e）して上位で処理させます。

DevToolsでブレークポイント

ログで追い切れないときは「止めて見る」です。

Sourcesで行番号をクリックしてブレークポイントを置きます。
Event Listener Breakpointsでイベントごとに停止させます。
コードに一時的に
```
debugger;
```
を入れて停止させます。

停止中にScope/Watch/Call Stackで状態を確認し、再開はF8、ステップ実行はF10/F11を使います。

短い運用ルールとして、最小の場所にブレークし、値とコールスタックをまず確認します。

原因切り分けの手順テンプレ

調査が迷走しないために順序を固定します。

再現条件を明確化します（入力・環境・期待/実際をそろえます）。
影響範囲を最小化します（最小データ・最小画面・最小関数に絞ります）。
ログを要所に追加します（log/warn/error/tableを目的で使い分けます）。
ブレークポイントやdebuggerで停止し、変数や分岐を確認します。
原因箇所を1点だけ修正し、同じ手順で再現確認します。
境界値や類似ケースも確認し、必要ならテストを追加します。

最小コード：このあとに示す短いJavaScriptコードを使います。

実行方法：ブラウザで開くか、CodePenのRunで実行します。Consoleで結果を見ます。

確認方法：console.logの出力や画面表示が想定どおりかで確認します（必要なら簡単な条件チェックもします）。

よくあるミス：Consoleを開いていないため出力が見えない、または変数名のスペル違いでReferenceErrorになることがあります。

使い分けの基準：繰り返しはfor/for...of、変換はmap、絞り込みはfilterのように目的で使い分けます。

<!-- HTML欄（CodePenのHTML） -->
<button id="btn">実行</button>
<input id="input" placeholder="例：田中" />
<pre id="out"></pre>

// JS欄（CodePenのJS）
// 1) 状態（いまのデータ）を1か所にまとめて持つ
//    ここを書き換えると、表示も変わるようにする
const state = { user: { name: "田中" } };

// 2) 表示担当：state → 文字 → 画面
//    step は「今どの段階か」を目印に出すだけ（切り分け用）
function render(step) {
  // Consoleで「どこまで動いたか」と「中身」を見る
  console.log("[render]", step, JSON.stringify(state));

  // 画面にも同じ情報を出す（Consoleが見れない時の保険）
  document.getElementById("out").textContent =
    `step=${step}\nname=${state.user.name}`;
}

// 3) 操作担当：ボタンが押されたら、入力を読んで state を更新して render
document.getElementById("btn").addEventListener("click", () => {
  console.log("[click] start"); // 入口ログ：クリックが動いたか

  try {
    // 入力欄から文字を取る（前後の空白はtrimで削る）
    const input = document.getElementById("input").value.trim();
    console.log("[click] input=", input); // 入力が取れてるか

    // 空なら更新しない（空更新でバグりやすいのでガード）
    if (!input) {
      console.warn("[click] empty input (更新しない)");
      render("empty"); // 空だったことが分かる表示
      return;
    }

    // 更新点：連続する空白を1個にしてから保存（整形）
    // 例）"田中   太郎" → "田中 太郎"
    state.user.name = input.replace(/\s+/g, " ");
    console.log("[click] updated name=", state.user.name); // 更新できたか

    // 更新したら再描画（state→画面）
    render("ok");
  } catch (e) {
    // 握りつぶさない：画面には短く、Consoleには詳細（スタック付き）
    document.getElementById("out").textContent = "エラー（Console参照）";
    console.error("[click] error", e);
  } finally {
    // 必ず通る：最後にログ（後片付けや終了確認に使う）
    console.log("[click] end");
  }
});

// 4) 初期表示（ページを開いた瞬間の表示）
render("init");

注意（ここだけ）

catch (e) {} のように握りつぶすと原因が消えます。最低でも console.error(e) を残します。
ログは出しすぎると本番でノイズになります。必要なら「開発中だけ出す」フラグを作って切り替えます。
エラーは「起きた場所」より「起きた原因」を追います。直前の入力値・状態・分岐をログで確認すると早いです。

要約

console.log、console.warn、console.error、console.tableを使い分けてログの形式を揃えると、調査が速くなります。
try/catch/finallyは例外処理の基本であり、後片付けはfinallyに集約すると読みやすくなります。
エラーは握りつぶさず、ユーザー向けには短い文面を出しつつ、開発者向けには詳細ログとしてconsole.error(e)を残します。
DevToolsのブレークポイントやdebuggerを使うと、値とコールスタックを直接確認できます。
切り分けは「再現固定→最小化→ログ→停止して確認→1点修正→再確認」の順に進めると安定します。