#11 JavaScriptで学ぶエラーハンドリングの基本

7月 30, 2026

JavaScriptのエラーハンドリングは、多くの言語と共通するtry・catchという書き方が基本です。この記事では、JavaScriptにおけるエラーハンドリングの基本と、非同期処理での扱い方を解説します。

try・catchの基本

try {
    const data = JSON.parse(text);
} catch (error) {
    console.log("正しい形式ではありません");
}

tryの中でエラーが起きると、catchの中身が実行されます。errorという変数には、起きたエラーの情報が入ります。

finallyという必ず実行される部分

try {
    // 何らかの処理
} finally {
    console.log("処理が終わりました");
}

独自のエラーを投げる

自分でエラー状態を作り出したい場合はthrowを使います。

function setAge(age) {
    if (age < 0) {
        throw new Error("年齢は0以上である必要があります");
    }
}

try {
    setAge(-5);
} catch (error) {
    console.log(error.message);
}

非同期処理とエラーハンドリング

JavaScriptには、時間のかかる処理を扱う「非同期処理」という仕組みがあり、async・awaitを使った処理でも同じtry・catchでエラーを扱えます。

async function fetchData() {
    try {
        const response = await fetch(url);
    } catch (error) {
        console.log("通信に失敗しました");
    }
}

.then()を使った古い書き方では、.catch()をチェーンの最後に付けてエラーを扱います。

fetch(url)
    .then(response => response.json())
    .catch(error => console.log("通信に失敗しました"));

独自のエラークラスを作る

Errorを継承して、独自のエラークラスを定義することもできます。

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

try {
    throw new ValidationError("入力値が不正です");
} catch (error) {
    if (error instanceof ValidationError) {
        console.log("検証エラー:", error.message);
    }
}

JavaScriptならではの注意点

非同期処理のエラーは、通常のtry・catchでは捕まえられない場合があります。特に.then()を使った古い書き方と、async・awaitを使った新しい書き方では、エラーの扱い方が異なるため、どちらの書き方をしているか意識することが大切です。

まとめ

JavaScriptのエラーハンドリングはtry・catch・finallyが基本です。throwによる独自エラーの発生や、非同期処理特有のエラーの扱いにも注意しましょう。

本ページはプロモーションを含みます。

参考書籍(PR)

JavaScriptをもっと学びたい方には「改訂新版JavaScript本格入門」がおすすめです。

コードを書かずに自動化したい方へ

「学んだけど自分の作業に組み込む時間がない」という方向けに、ダブルクリックで動く Windows専用の自動化ツールをオーダーメイドで作成しています。気になる方はこちらをご覧ください。

このブログを検索

Toyoのプログラミング学習ブログ