JavaScript入門 #19 - エラー処理とtry/catch

このシリーズについて

「JavaScript入門」第19回です。今回は、エラーの読み方と try/catch による処理を学びます。

エラー処理とは

エラー処理は、失敗する可能性がある処理に対して、原因を確認し、必要なら別の処理へ切り替えるための書き方です。

エラーは消すものではなく、まず読むものです。メッセージ、種類、行番号を確認すると、修正箇所が見えます。

Step 1: よくあるエラーを読む

構文ミスは SyntaxError になります。

// console.log("閉じ忘れ);

存在しない変数を読むと ReferenceError になります。

// console.log(userName);

null のプロパティを読むと TypeError になります。

const user = null;
// console.log(user.name);

コメントを外して実行し、エラー表示を確認してみてください。

Step 2: try/catchを使う

失敗する可能性がある処理を try に書き、失敗時の処理を catch に書きます。

try {
  const user = JSON.parse('{"name":"Taro"}');
  console.log(user.name);
} catch (error) {
  console.log("JSONの読み込みに失敗しました");
  console.log(error.message);
}

正しいJSONなので、catch は実行されません。

Step 3: 壊れたJSONで確認する

JSONの形を壊して、catch が動くことを確認します。

try {
  const user = JSON.parse('{"name":"Taro",}');
  console.log(user.name);
} catch (error) {
  console.log("JSONの読み込みに失敗しました");
  console.log(error.message);
}

JSON.parse は、外部データや保存データを扱う時に失敗する可能性があります。

Step 4: 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);
}

Step 5: 使いすぎに注意する

try/catch は便利ですが、すべてを囲めばよいわけではありません。入力チェックで防げるものは、先に条件分岐で確認します。

function getUserName(user) {
  if (user === null) {
    return "ゲスト";
  }

  return user.name;
}

よくあるエラー

次のステップ

JavaScript入門 #20 - async/awaitとfetch で、APIからデータを取得する非同期処理を学びます。

まとめ

エラー処理では、まずエラーメッセージと行番号を読みます。try/catch は、JSON解析や通信など失敗する可能性がある処理で使います。予測できる入力ミスは、条件分岐で先に防ぐ方が読みやすくなります。

参考リソース

• MDN: try…catch
• MDN: Error

×

PR

×

PR