JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのtry文とcatch文の使い方をサンプルコードで解説

try文とcatch文とは

try文を使うと、コードブロックを実行しながらエラーの有無をテストできます。実行中にエラーが発生した場合、そのエラーはcatch文によって捕捉（キャッチ）され、プログラムが強制終了することなく適切に処理を行うことができます。

この仕組みは「例外処理」と呼ばれ、予期しないエラーが発生してもユーザーに分かりやすいメッセージを表示したり、代替処理に切り替えたりする際に非常に役立ちます。

JavaScriptにおけるtry文とcatch文のサンプルコード

以下は、宣言前に変数へアクセスした際に発生するエラーを、try〜catch文で捕捉して画面に表示する例です。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Try and catch in JavaScript</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、定義前の変数にアクセスします
</h3>
<script>
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        try {
            resEle.innerHTML = a;
        }
        catch (err) {
            resEle.innerHTML = "Error = " + err;
        }
        let a = 44;
    });
</script>
</body>
</html>

コードの解説

  • ボタンがクリックされると、tryブロック内で変数aの値を参照しようとします。
  • letで宣言された変数は、宣言文が実行されるまでの間「一時的なデッドゾーン（TDZ）」に入るため、この時点でアクセスするとReferenceErrorが発生します。
  • 発生したエラーはcatch (err)で受け取り、エラー内容を画面に表示しています。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptのtry文とcatch文の使い方をサンプルコードで解説

続いて、「CLICK HERE」ボタンをクリックすると、catch文によって捕捉されたエラーメッセージが緑色の文字で表示されます。

JavaScriptのtry文とcatch文の使い方をサンプルコードで解説

まとめ

try文とcatch文を組み合わせることで、実行時エラーが発生してもプログラム全体を停止させることなく、エラー内容に応じた処理を実装できます。外部APIの呼び出しやJSONの解析など、失敗する可能性のある処理には積極的に活用しましょう。

  1. JavaScriptのcall()とapply()で関数を呼び出す方法をわかりやすく解説

    JavaScriptには、関数の呼び方を柔軟に制御できるメソッドとして call() と apply() が用意されています。どちらも「this」の値を指定しながら関数を実行できる点は共通していますが、引数の渡し方が異なります。 call() と apply() の違い call(): 引数を個別の値（カンマ区切り）として渡します。 apply(): 引数を配列（または配列風オブジェクト）として一括で渡します。 それでは、実際に両方のメソッドを使って関数を呼び出すサンプルコードを見てみましょう。 サンプルコード <!DOCTYPE html> <html lang=ja>

  2. JavaScriptとCSSで作る！タイプライター風の文字入力・削除エフェクトの実装方法

    CSSアニメーションとJavaScriptを組み合わせることで、まるでタイプライターで打っているかのような「文字の入力」と「削除」を繰り返すエフェクトを実装できます。Webサイトのヒーローセクションやキャッチコピーの演出など、訪問者の目を引く演出として幅広く活用できる人気のテクニックです。以下のサンプルコードでは、複数のテキストを順番にタイプ表示し、すべて表示し終えると今度は1文字ずつ削除していく動きを再現しています。実装例<!DOCTYPE html> <html> <style> div {    display: flex; &nb