JavaScript【 try…catch 】 ～ 例外処理

プログラムを実行する際に、例えば画面から入力された値を使用する場合等は、入力値によって その後の処理が続行できなくなる事態が生じる可能性も皆無ではありません。
このような事態に備えて、try…catch 文で 予め例外処理を用意することができます。
今回は、try…catch 文の使い方について紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. try…catch 文

try…catch 文は、プログラムで処理を行う際に、通常処理を続行できなくなるような事態に備えて、「 通常処理 」の他に「例外処理」も記述する構文です。

次のように記述して使用します。

try ブロック内に「 通常処理 」のコードを記述し、catch ブロック内に「 例外処理 」のコードを記述します。
catch ブロックの引数 e には、エラー情報が入ります。

例外が発生すると、処理のフローは「 例外処理 」に移行します。

インターネット環境の不具合等 システムエラーが生じた場合には 自動的に catch ブロックに飛びますが、そうでない場合で、通常処理を続行できない事態が生じた場合は、例外を発生させて、catch ブロックに移行させ、例外処理をします。

▲目次へ戻る

　

2. throw 文

try…catch 文で、「 通常処理を続行できない事態が生じた場合は、例外を発生させて、catch ブロックに移行させる 」という紹介をしましたが、その例外を発生させる際に使用するのが throw 文です。

throw 文を使用して、ユーザー定義による例外をスローします。
そうすると、それ以降の通常処理は実行されず、catch ブロックへ移行されます。
仮に catch ブロックがない場合は、例外がスローされた時点で、そのプログラムは終了します。

try…catch 文と組み合わせてthrow 文を使用する場合は、次のように記述します。

throw 文には、下記のような 例外の情報を記述します。

// 文字列型の例外
throw "エラー2";

// 数値型の例外
throw 44;

// 真偽型の例外
throw true; 

// オブジェクト型の例外
throw new Error("数値以外が入力されました。");

　
throw 文でスローされた例外の情報は、catch ブロックの引数 e に入ります。
　
　
次のサンプルは、生まれ月を入力するプログラムで、月として不適切な入力がされた場合は、例外処理としてメッセージを表示します。
適切な値や不適切な値を入力して OK ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function disp() {
    // 再入力時のために、メッセージ領域を初期化
    document.getElementById("dat2").innerHTML = "";

    try {
        let mon = document.getElementById("dat").value - 0;
        if (1 <= mon && mon <= 12) {
            document.getElementById("dat2").innerHTML = mon + "月生まれですね！";
        } else {
            throw new Error("1 から 12 までの半角数字を入力して下さい！");
        }
    } catch (e) {
        alert(e.message);
    }
}
</script>

<div style="background-color : #CCC;">
    生まれ月を入力して下さい。
    <div style="display:inline-flex; align-items: center;">
        <input type="text" id="dat" size="4">月　
        <nobr><input type="button" value="OK" onClick="disp()"></nobr>　　
    </div>　
    <div id="dat2"></div>
</div>

　
「 throw new Error(“1 から 12 までの半角数字を入力して下さい！”); 」のように オブジェクトをスローすると、その中のメッセージを「 e.message 」で取得することができます。

▲目次へ戻る

　

3. finally 文

finally 文は、事後処理を行う構文です。
データベースを切断する処理や、開いたファイルを閉じる処理等を記述する場合によく使用します。

try…catch 文と組み合わせてfinally 文を使用する場合は、次のように記述します。

finally 文を記述すると、例外が発生してもしなくても finally 文が実行されます。
　
　
先ほどのサンプルに、終了時刻を表示する処理を追加しました。
数字等を入力して OK ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function disp() {
    document.getElementById("dat2").innerHTML = "";

    try {
        let mon = document.getElementById("dat").value - 0;
        if (1 <= mon && mon <= 12) {
            document.getElementById("dat2").innerHTML = mon + "月生まれですね！" + "<br>" + "<br>";
        } else {
            throw new Error("1 から 12 までの半角数字を入力して下さい！");
        }
    } catch (e) {
        alert(e.message);
    } finally {
        document.getElementById("dat2").innerHTML += "プログラム終了時刻 ： "
                                                    + new Date().getHours() + ":" 
                                                    + new Date().getMinutes() + ":"
                                                    + new Date().getSeconds();
    }
}
</script>

<div style="background-color : #CCC;">
    生まれ月を入力して下さい。
    <div style="display:inline-flex; align-items: center;">
        <input type="text" id="dat" size="4">月　
        <nobr><input type="button" value="OK" onClick="disp()"></nobr>　　
    </div>　
    <div id="dat2"></div>
</div>

▲目次へ戻る