実行時エラーの処理 | エラーの発生タイミング | JavaScript 超完全入門 基本から発展までのすべて

2024.09.21
スポンサーリンク
スポンサーリンク
amazon
スマイルSALE
--:--:--
～
ad. 価格範囲を指定して商品を探せます

実行時エラーとは？

JavaScriptの実行時エラーとは、コードが実行されている途中で発生するエラーのことです。

文法ミスのように実行前に見つかるエラーとは異なり、実行時エラーは、実際にその処理が行われたときに発生します。たとえば、存在しない変数を参照したり、文字列に対して配列用のメソッドを使ったりすると、実行時エラーが発生します。

実行時エラーは、ユーザーの操作内容、通信結果、入力データなどによって発生することもあります。そのため、エラーが起こる可能性を想定し、適切に処理することが大切です。

実行時エラーの一般的な種類

JavaScriptでよく発生する実行時エラーの種類と、その原因、例を以下にまとめます。

エラーの種類 発生原因 例 対策
ReferenceError 存在しない変数や関数を参照したときに発生する。 
console.log(undefinedVar);
変数や関数が宣言されているか確認する。
TypeError 不適切なデータ型に対して操作を行ったときに発生する。 
const str = "hello";

str.push("!");
操作対象のデータ型が適切か確認する。
RangeError 許可されていない範囲の値を使用したときに発生する。 
const arr = new Array(-1);
使用する値が適切な範囲内か確認する。
URIError 不正なURI処理を行ったときに発生する。 
decodeURIComponent("%");
URI文字列が正しい形式か確認する。
SyntaxError JavaScriptの文法として正しくないコードがあると発生する。 
JSON.parse("{ name: Alice }");
文法やJSON形式が正しいか確認する。

SyntaxErrorは、通常はコードの読み込み時に発生することが多いですが、JSON.parse()やeval()のように、実行中に文字列を解析する場面でも発生することがあります。

プログラムの解説

以下は、実行時エラーが発生する例と、その処理方法を示すプログラムです。

try {
    console.log(undefinedVar);
} catch (error) {
    console.error("エラーが発生しました:", error.message);
}

このコードでは、try...catch構文を使って、実行時に発生するReferenceErrorを捕捉しています。

  1. tryブロックの中で、存在しない変数undefinedVarを参照する。
  2. ReferenceErrorが発生する。
  3. catchブロックが実行される。
  4. error.messageによって、エラー内容を表示する。

このように、エラーが発生する可能性がある処理をtry...catchで囲むことで、プログラム全体が止まってしまうのを防げます。

エラー処理の基本

実行時エラーを適切に処理するためには、以下の方法が有効です。

  • try...catch構文を使用する: エラーが発生する可能性のある処理をtry...catchで囲み、エラー発生時の処理を用意します。
  • データ型を確認する: 操作対象のデータが期待通りの型であるか確認することで、TypeErrorを防ぎやすくなります。
  • 変数を適切に宣言・初期化する: 未定義の変数や関数を参照しないようにします。
  • 範囲チェックを行う: 配列の長さや数値の範囲など、許可される値かどうかを事前に確認します。
  • 外部データを信用しすぎない: APIレスポンスやユーザー入力は、想定外の形式になる可能性があるため、検証してから利用します。

TypeErrorを防ぐ例

TypeErrorは、JavaScriptで非常によく発生する実行時エラーの一つです。

たとえば、配列だと思っていた値が実際には配列ではなかった場合、配列用のメソッドを使うとエラーになります。

エラーが発生する例

const users = null;

users.forEach((user) => {
    console.log(user.name);
});

usersがnullのため、forEach()を呼び出すことができず、TypeErrorが発生します。

事前に確認する例

const users = null;

if (Array.isArray(users)) {
    users.forEach((user) => {
        console.log(user.name);
    });
} else {
    console.log("ユーザー一覧は配列ではありません");
}

Array.isArray()で配列かどうかを確認してから処理することで、実行時エラーを防ぎやすくなります。

非同期処理での実行時エラー

JavaScriptでは、API通信などの非同期処理でも実行時エラーが発生します。

async/awaitを使う場合は、try...catchでエラーを処理するのが一般的です。

async function fetchUser() {
    try {
        const response = await fetch("https://example.com/user");

        if (!response.ok) {
            throw new Error("データの取得に失敗しました");
        }

        const user = await response.json();

        console.log(user);
    } catch (error) {
        console.error("通信エラー:", error.message);
    }
}

fetchUser();

通信処理では、ネットワークエラーやサーバーエラー、JSONの解析エラーなどが起こる可能性があります。そのため、成功する前提だけで書かず、失敗した場合の処理も用意しておくことが重要です。

エラーを見つけるための確認方法

実行時エラーが発生した場合は、ブラウザの開発者ツールを使って原因を調べます。

  • Consoleタブでエラーメッセージを確認する。
  • エラーが発生したファイル名と行番号を確認する。
  • Sourcesタブでブレークポイントを設定し、変数の値を確認する。
  • コールスタックを確認し、どの関数から呼び出されたか調べる。

エラーメッセージには、原因を特定するためのヒントが含まれています。まずはエラー名と発生行を確認することが大切です。

まとめ

  • 実行時エラーとは、JavaScriptコードが実行されている途中で発生するエラーです。
  • ReferenceErrorは、存在しない変数や関数を参照したときに発生します。
  • TypeErrorは、不適切な型に対して操作を行ったときに発生します。
  • RangeErrorは、許可されていない範囲の値を使ったときに発生します。
  • try...catchを使うと、実行時エラーを捕捉して処理できます。
  • API通信などの非同期処理でも、エラー処理を用意しておくことが重要です。
  • エラーが発生した場合は、開発者ツールでエラー名・行番号・変数の値を確認しましょう。

スポンサーリンク