JavaScriptのエラー処理入門【try・catch解説】

JavaScript エラー処理とは？try・catchの基本

プログラムを書いていると、予期しないエラーが発生することがあります。エラーが発生するとプログラムが止まってしまいますが、try・catch を使うとエラーをキャッチして処理を続けられます。

JavaScript エラー処理を覚えると、より堅牢（けんろう）なプログラムが書けます。たとえば、ユーザーが予期しない値を入力したときや、ネットワーク接続が切れたときでも、プログラムがクラッシュせずに適切なメッセージを表示できます。

エラー処理は「プロのコード」と「初心者のコード」を分ける重要なスキルです。この記事で基本をしっかり身につけましょう。Web APIからデータを取得するfetch()や、ユーザー入力のバリデーションなど、実際のアプリ開発では必ず使います。

try・catchの基本的な書き方

try {
  // エラーが発生するかもしれない処理
  const result = someFunction();
  console.log(result);
} catch (error) {
  // エラーが発生したときの処理
  console.log('エラーが発生しました：' + error.message);
}

• try：エラーが発生するかもしれない処理を書く
• catch：エラーが発生したときに実行される処理を書く
• error：エラーの情報が入ったオブジェクト

📖 詳しくはfetch入門で解説しています。

finallyブロック：必ず実行される処理

finally ブロックは、エラーが発生してもしなくても必ず実行されます。ファイルを閉じる処理や、ローディング表示を消す処理など、「成功でも失敗でも必ずやりたい処理」に使います。

function loadData() {
  const loading = document.getElementById('loading');
  loading.style.display = 'block'; // ローディング表示

  try {
    console.log('データを取得中...');
    // 何らかの処理
  } catch (error) {
    console.log('エラー：' + error.message);
  } finally {
    loading.style.display = 'none'; // 必ずローディングを消す
    console.log('処理が終わりました');
  }
}

finallyは省略可能ですが、リソースの解放やUI状態のリセットが必要な場面では積極的に使いましょう。

👉 JavaScript問題ドリルも参考にしてください。

throwで意図的にエラーを発生させる

throw を使うと、自分でエラーを発生させられます。入力値のチェックなどに使います。

function divide(a, b) {
  if (b === 0) {
    throw new Error('0で割ることはできません');
  }
  return a / b;
}

try {
  console.log(divide(10, 0));
} catch (error) {
  console.log(error.message); // 0で割ることはできません
}

🔥 イベント処理入門で実践してみましょう。

よくあるエラーの種類

実践例：ユーザー入力のバリデーション

フォームの入力値をチェックするときにtry・catchとthrowを組み合わせて使います。

function validateAge(input) {
  const age = Number(input);
  if (isNaN(age)) {
    throw new Error('数値を入力してください');
  }
  if (age < 0 || age > 150) {
    throw new Error('0〜150の範囲で入力してください');
  }
  return age;
}

try {
  const age = validateAge('abc');
  console.log('年齢：' + age);
} catch (error) {
  console.log('入力エラー：' + error.message);
  // → 入力エラー：数値を入力してください
}

このパターンは、ユーザーの入力を受け取るあらゆる場面で使えます。

よくある間違い

• catchブロックで何もしない：catch (e) {} のように空にすると、エラーが握りつぶされて原因がわからなくなります。最低限 console.error(e) を書きましょう。
• SyntaxErrorはcatchできない：コードの文法エラー（SyntaxError）はtry・catchでキャッチできません。実行前にエディタが検出してくれるので、赤い波線を見逃さないようにしましょう。
• tryブロックが大きすぎる：tryの中に大量のコードを書くと、どこでエラーが発生したかわかりにくくなります。エラーが起きそうな最小限の処理だけをtryで囲みましょう。

エラーを読むコツ

エラーメッセージは怖く見えますが、実は「何が問題か」を教えてくれる親切なメッセージです。読み方のコツを覚えましょう。

• エラーの種類（最初の単語）：ReferenceError、TypeError などで問題の種類がわかる
• メッセージ：「is not defined」「is not a function」など具体的な原因
• ファイル名と行番号：エラーが発生した場所。ここを見に行けば原因がわかる

// エラー例：
// ReferenceError: userName is not defined
//     at script.js:5:1
//
// 読み方：
// - ReferenceError → 存在しない変数を使った
// - userName is not defined → userNameという変数がない
// - script.js:5:1 → script.jsの5行目1文字目

エラーメッセージをそのままGoogle検索すると、解決策が見つかることが多いです。Stack Overflowやブログ記事で同じエラーに遭遇した人の解決方法が見つかります。

開発者ツール（F12キー）のConsoleタブにエラーが表示されます。赤い文字で表示されるので見つけやすいです。エラーの行番号をクリックすると、該当するコードの場所にジャンプできます。

📖 スコープの基本で変数の参照範囲を理解しましょう。

🔗 JavaScript入門で基礎を確認できます。

💡 エラーメッセージは英語ですが、パターンを覚えれば怖くありません。よく見るメッセージ：「is not defined」（変数が未定義）、「is not a function」（関数でないものを呼び出した）、「Cannot read properties of null」（nullのプロパティにアクセスした）。これらを覚えておくだけで、デバッグが格段に速くなります。