JS
try-catch
中級読み方：トライキャッチ｜英語：try...catch
エラーが起きても処理を止めずに対処する構文で、tryの中でエラーが起きるとcatchに移るよ。
やさしい説明
try-catchは、エラーが起きてもプログラムを止めずに対処する仕組みです。
try の中でエラーが起きると、プログラムが止まる代わりに catch ブロックに移動します。そこでエラーメッセージを表示したり、代替処理を実行したりできます。
finally ブロックを追加すると、成功でも失敗でも「必ず実行する処理」を書けます。ローディング状態の解除などに便利です。
具体例・使い方
// JSONのパースでエラーをキャッチ
try {
const data = JSON.parse(text);
console.log(data);
} catch (err) {
console.error("JSONが不正です:", err.message);
} finally {
console.log("処理完了"); // 成功でも失敗でも必ず実行
}
// async/awaitと組み合わせる（最もよく使うパターン）
async function fetchData() {
try {
const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return await res.json();
} catch (err) {
console.error("通信エラー:", err);
return null;
}
}errorオブジェクトのプロパティ
try {
null.property; // TypeError
} catch (err) {
console.log(err.name); // "TypeError"
console.log(err.message); // "Cannot read properties of null"
console.log(err.stack); // スタックトレース（どこで起きたか）
}
// 自分でエラーを投げる
function divide(a, b) {
if (b === 0) throw new Error("0で割ることはできません");
return a / b;
}err.name でエラーの種類（TypeError・ReferenceError・SyntaxErrorなど）、err.message でエラーの内容を確認できます。デバッグ時に活用しましょう。
いつ使う？
- API通信（ネットワークエラーの可能性があるとき）
- JSON.parse（不正なJSON文字列が来る可能性があるとき）
- ユーザー入力の処理（予期しない値が入る可能性があるとき）
- 外部ライブラリが例外を投げる可能性があるとき
間違いやすいポイント
❌ catch の中で何もしない（エラーを握りつぶす）
空の catch はエラーが起きても気づけません。最低でも console.error(err) でログを出しましょう。本番環境では Sentry などのエラー監視ツールへの通知を入れるのがベストプラクティスです。
// ❌ エラーを無視するとバグの原因がわからない
try { /* ... */ } catch (e) {}
// ✅ 最低限ログを出す
try { /* ... */ } catch (e) { console.error(e); }
// ✅ ユーザーにも通知する
try { /* ... */ } catch (e) {
console.error(e);
showErrorMessage("エラーが発生しました。再試行してください。");
}よくある疑問
Q: finallyとは？
A: try-catch-finally のfinallyは、成功でも失敗でも必ず実行されるブロックです。ローディング表示の解除などに使います。
Q: catchの引数eとは？
A: エラーオブジェクトです。e.message でエラーメッセージ、e.stack でスタックトレースが取得できます。
Q: 全ての処理をtry-catchで囲むべき？
A: いいえ。失敗する可能性がある処理（外部通信、JSON解析、ユーザー入力の処理等）だけ囲みましょう。
関連用語
- async/await — 非同期処理のエラーハンドリングに try-catch を使う
- Promise — Promise の catch() メソッドも同様のエラーハンドリング
📖 関連レッスン
レッスンを見る →