JavaScriptのエラーハンドリング完全ガイド：try, catch, throw, finally

エラーは、プログラミングにおける避けては通れない事象の一つです。しかし、JavaScriptにはこれらのエラーを適切に処理するためのツールが備わっています。

この記事では、JavaScriptのエラーハンドリングの核心であるtry, catch, throw, finallyの使い方を詳しく解説します。

tryとcatch
throw
finally
まとめ

tryとcatch

tryとcatchは、エラーが発生する可能性があるコードブロックを安全に実行するために使用されます。

tryブロック内でエラーが発生した場合、処理は直ちにcatchブロックに移ります。

try {
  // エラーが発生する可能性があるコード
  console.log(unknownVariable); 
} catch (error) {
  console.log('An error occurred:', error.message);
}

JSON文字列のパース

APIから取得したデータやローカルストレージのデータなど、外部からのJSON文字列をパースする際にはエラーが発生する可能性があります。try と catch を使って、エラーハンドリングを行うことができます。

var jsonString = '{ "name": "Haku", "age": 27 }';

try {
    var data = JSON.parse(jsonString);
    console.log(data);
} catch (error) {
    console.error("JSONのパースに失敗しました。", error);
}

外部APIのコール

非同期処理やPromiseを使用する場合、.catch メソッドを使ってエラーハンドリングを行うこともできますが、try と catch を使って同様のエラーハンドリングを行うことも可能です。

async function fetchData() {
    try {
        let response = await fetch("https://api.example.com/data");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("APIの取得に失敗しました。", error);
    }
}

ユーザー入力の検証

ユーザーからの入力は予測不可能なので、入力の検証時にエラーハンドリングを行うことが推奨されます。

function processInput(input) {
    try {
        if (input.length < 5) {
            throw new Error("入力は5文字以上である必要があります。");
        }
        // ... 他の処理
    } catch (error) {
        console.error("入力の検証に失敗しました。", error);
    }
}

以下に、HTMLとJavaScriptを使って、tryとcatchを使用してユーザー入力を検証するシンプルな例を示します。

5文字以上のテキストを入力してください。（適当でいい）

JavaScriptの部分は以下の通りです。

function validateInput() {
    var input = document.getElementById('userInput').value;
    var resultElement = document.getElementById('result');

    try {
        if (input.length < 5) {
            throw new Error("入力は5文字以上である必要があります。");
        }
        resultElement.textContent = "入力は正しく検証されました。";
        resultElement.style.color = "green";
    } catch (error) {
        resultElement.textContent = error.message;
        resultElement.style.color = "red";
    }
}

throw

throwを使用して、独自のエラーを生成することができます。これにより、コード内で特定の条件下でエラーをトリガーすることができます。

let value = 5;
if (value > 10) {
  throw new Error('Value is too large!');
}

以下はthrowを使用してエラーを発生させる簡単な例を示します。

年齢を入力してください

function checkAge() {
    var age = parseInt(document.getElementById('userAge').value, 10);
    var messageElement = document.getElementById('message');

    try {
        if (isNaN(age)) {
            throw new Error("有効な数字を入力してください。");
        }
        if (age < 0) {
            throw new Error("年齢はマイナスにはできません。");
        }
        if (age < 20) {
            throw new Error("20歳未満の方はこのサイトの使用が許可されていません。");
        }
        messageElement.textContent = "ようこそ!";
        messageElement.style.color = "green";
    } catch (error) {
        messageElement.textContent = error.message;
        messageElement.style.color = "red";
    }
}

この例では、テキストボックスに年齢を入力し、"確認"ボタンをクリックすることで年齢の検証が行われます。

数字以外の入力
0未満の数字の入力
20歳未満の数字の入力

上記のいずれかの場合、throwを使ってエラーを発生させ、エラーメッセージが赤色で表示されます。適切な年齢が入力された場合は、歓迎のメッセージが緑色で表示されます。

finally

finallyブロックは、エラーの有無に関係なく、tryまたはcatchブロックの後に必ず実行されるコードを含めるために使用されます。

try {
  // 何らかのコード
} catch (error) {
  console.log('An error occurred:', error.message);
} finally {
  console.log('This will run no matter what.');
}

まとめ

エラーハンドリングは、プロフェッショナルなJavaScript開発の要となります。try, catch, throw, finallyを適切に使用することで、より堅牢で安定したアプリケーションやウェブサイトを構築することができます。この記事を参考に、エラーハンドリングのスキルを磨き、ユーザーに安心して利用してもらえるコードを書きましょう。

JavaScript エラーハンドリング