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

JavaScriptの例外処理の仕組みを解説！try...catch...finallyの基本と使い方

JavaScriptでは、try...catch...finally構文を使って例外（エラー）を処理します。比較的新しいバージョンのJavaScriptから例外処理の仕組みが導入され、try...catch...finallyブロックに加えてthrow演算子も実装されています。これらを組み合わせることで、プログラムの実行中に発生したエラーを適切に捕捉し、制御することが可能になります。

なお、プログラマが意図的に発生させた例外やランタイムエラーは捕捉できますが、JavaScriptの構文エラー（シンタックスエラー）は捕捉できない点に注意しましょう。構文エラーはコードの解析段階で検出されるためです。

try...catch...finallyの基本構文

try...catch...finallyブロックの基本的な構文は以下のとおりです。

<script>
   <!--
      try {
         // 実行したいコード
         [break;]
      }
      catch ( e ) {
         // 例外が発生した場合に実行するコード
         [break;]
      }
      [ finally {
         // 例外の発生有無にかかわらず
         // 必ず実行されるコード
      }]
   //-->
</script>

各ブロックの役割

  • tryブロック： 実行したい通常の処理を記述します。ここで例外が発生すると、残りの処理を中断してcatchブロックへ移行します。
  • catchブロック： tryブロック内で例外が発生した場合にのみ実行されます。発生した例外オブジェクトは引数（例：e）として受け取ることができ、エラー内容の確認やログ出力などに活用できます。
  • finallyブロック： 例外が発生してもしなくても必ず実行されるブロックです（省略可能）。ファイルやネットワークリソースの解放など、後処理を確実に行いたい場合に便利です。

サンプルコード

次のコードを実行すると、JavaScriptで例外がどのように処理されるかを実際に確認できます。未定義の変数aを参照することで、意図的にエラーを発生させています。

<html>
   <head>
      <script>
         <!--
            function myFunc()
            {
               var x = 20;
               try {
                  alert("変数aの値は : " + a );
               }
               catch ( e ) {
                  alert("エラー: " + e.message );
               }
            }
         //-->
      </script>
   </head>

   <body>
      <p>下のボタンをクリックして結果を確認してください：</p>
      <form>
         <input type = "button" value = "クリック" onclick = "myFunc();" />
      </form>
   </body>
</html>

この例では、変数aは宣言されていないため、tryブロック内で参照エラー（ReferenceError）が発生し、catchブロックに処理が移ります。その結果、エラーメッセージを表示するアラートが表示されます。

補足： 古いブラウザでは例外オブジェクトのe.descriptionプロパティが使われることがありましたが、現在の主要ブラウザではe.messageを使用するのが一般的です。また、より詳細なデバッグを行いたい場合はe.name（エラーの種類）やe.stack（スタックトレース）も活用するとよいでしょう。

  1. JavaScriptの'z'['toUpperCase']()はどのように、そしてなぜ機能するのか？

    JavaScriptのz[toUpperCase]()はどのように機能するのか JavaScriptのtoUpperCase()メソッドは、文字列を大文字に変換するためのメソッドです。通常はドット記法を使って次のように書きます。 z.toUpperCase(); // Z を返す しかし、実はブラケット記法（角括弧記法）を使っても同じ結果が得られます。 z[toUpperCase]; // メソッドそのものを参照 さらに、末尾に () を付けて呼び出せば、実際に大文字への変換が実行されます。 z[toUpperCase](); // Z を返す これは、次のコードと同じ意味になります。 ale

  2. JavaScriptで構造体（Struct）を操作する方法をわかりやすく解説

    JavaScriptで構造体（Struct）を扱うには？ JavaScriptには、C言語のような組み込みの構造体（Struct）型は用意されていません。しかし、関数とオブジェクトを組み合わせることで、構造体と同じような働きを簡単に実現できます。 以下のサンプルコードを実行して、その方法を確認してみましょう。 サンプルコード <!DOCTYPE html> <html> <body> <script> function displayStruct(str) { var str = s