エラーハンドリング（try/catch）の基本と実践
JavaScript では try/catch 構文を使って「エラーが起きてもプログラム全体が止まらないようにする」ことができます。初心者がまず覚えるべきのは「エラーが出そうな処理を try に入れて、失敗したら catch で受け止める」という流れです。
基本の書き方
try {
// エラーが起きるかもしれない処理
const x = JSON.parse("not-json"); // ここでエラー
console.log(x);
} catch (e) {
// エラーが起きたときに実行される
console.error("エラー発生:", e.message);
}
- try ブロック: 普通に処理を書く。エラーが起きると catch に飛ぶ。
- catch ブロック: エラーオブジェクトを受け取り、ログや代替処理を行う。
- finally ブロック: 成否に関わらず必ず実行される（リソース解放など）。
よく使うテンプレート集
1) 成功時と失敗時を分ける
try {
riskyOperation();
console.log("成功");
} catch (e) {
console.error("失敗:", e.message);
}
2) finally で後処理
try {
connectDB();
// DB操作
} catch (e) {
console.error("DBエラー:", e.message);
} finally {
closeDB(); // 成否に関わらず必ず実行
}
3) 複数のエラーを分類
try {
throw new TypeError("型エラー");
} catch (e) {
if (e instanceof TypeError) {
console.error("型エラー:", e.message);
} else {
console.error("その他エラー:", e.message);
}
}
外部ライブラリと組み合わせる例
axios でのエラーハンドリング
import axios from "axios";
async function loadData() {
try {
const r = await axios.get("https://api.example.com/items");
console.log("成功:", r.data);
} catch (e) {
console.error("失敗:", e.message);
if (e.response) {
console.error("status:", e.response.status);
console.error("body:", e.response.data);
}
} finally {
console.log("処理終了");
}
}
fetch でのエラーハンドリング
async function loadUser() {
try {
const r = await fetch("https://api.example.com/user");
if (!r.ok) throw new Error(`HTTP ${r.status}`);
const json = await r.json();
console.log("成功:", json);
} catch (e) {
console.error("失敗:", e.message);
}
}
実務でのポイント
- 外部ライブラリは失敗を返す: axios は reject、fetch は ok=false を返す。必ず try/catch で囲む。
- エラーオブジェクトの中身:
e.messageだけでなく、axiosならe.response、Node.jsならe.codeなど詳細を確認。 - finally でリソース解放: DB接続やファイルハンドルは必ず閉じる。
- ユーザー向けと開発者向けを分ける: ユーザーには簡潔なメッセージ、開発者には詳細ログ。
よくある落とし穴と対策
- 非同期処理を try/catch で囲んでも効かない: Promise の中で throw すると catch に届かない。
→ 対策: async/await と try/catch を組み合わせる。 - エラーを握りつぶす: catch で何もせず無視すると原因不明に。
→ 対策: ログ出力や通知を必ず入れる。 - finally を忘れる: リソースリークの原因。
→ 対策: 必ず finally で解放。
練習問題（手を動かして覚える）
// 1) JSON.parseの失敗をキャッチ
try {
JSON.parse("bad-json");
} catch (e) {
console.log("キャッチ:", e.message);
}
// 2) fetchでHTTPエラーをキャッチ
async function ex2() {
try {
const r = await fetch("/api/404");
if (!r.ok) throw new Error(`HTTP ${r.status}`);
console.log(await r.json());
} catch (e) {
console.log("失敗:", e.message);
}
}
// 3) axiosで詳細エラーを確認
async function ex3() {
try {
await axios.get("/api/404");
} catch (e) {
console.log("status:", e.response?.status);
console.log("body:", e.response?.data);
}
}
直感的な指針
- try に処理、catch に失敗時の対応、finally に後処理。
- 外部ライブラリは必ず try/catch で囲む。
- エラー詳細を確認してログや通知に活用。
- 握りつぶさず、ユーザー向けと開発者向けを分けて扱う。
👉 初心者は「失敗しても止まらないようにする」ことを意識すると、エラーハンドリングの重要性がすぐに理解できます。