JavaScript try...catch

概要: このチュートリアルでは、JavaScript try...catch ステートメントを使用して例外を処理する方法について学習します。

JavaScript try…catch ステートメントの概要

次の例では、存在しない add() 関数を呼び出そうとします。

let result = add(10, 20);
console.log(result);

console.log('Bye');
Code language: JavaScript (javascript)

そして JavaScript エンジンは次のエラーを出力します。

Uncaught TypeError: add is not a functionCode language: JavaScript (javascript)

エラーメッセージは add が関数ではなく、エラーのタイプは TypeError であることを示します。

JavaScript エンジンはエラーが発生するとそのエラーを出力し、スクリプト全体の処理をすぐに終了します。上記の例では、コードの実行は最初の行で停止します。

エラーを処理し、処理を継続したい場合があります。それには、次の構文を使用して try...catch ステートメントを使用します。

try {
  // code may cause error
} catch(error){
  // code to handle error
}Code language: JavaScript (javascript)

この構文では、

最初に、エラーが発生する可能性のあるコードを try ブロック内に配置します。
次に、catch ブロック内でエラーを処理するためのロジックを実装します。

try ブロック内でエラーが発生すると、JavaScript エンジンはすぐに catch ブロック内のコードを実行します。また、JavaScript エンジンはエラーに関する詳細情報を含むエラーオブジェクトを提供します。

基本的に、エラーオブジェクトには少なくとも次の 2 つのプロパティがあります。

name はエラー名を指定します。
message はエラーを詳細に説明します。

try ブロック内でエラーが発生しない場合、JavaScript エンジンは catch ブロックを無視します。

Web ブラウザでは、error オブジェクトにプロパティを追加する場合があることに注意してください。たとえば、Firefox では filename、lineNumber、および stack のプロパティが error オブジェクトに追加されます。

try ブロック内に例外が発生する可能性のあるコードのみを配置するのが良い習慣です。

次のフローチャートは try...catch ステートメントがどのように機能するかを示します。

JavaScript try…catch ステートメントの例

次の例では、try...catch ステートメントを使用してエラーを処理します。

try {
  let result = add(10, 20);
  console.log(result);
} catch (e) {
  console.log({ name: e.name, message: e.message });
}
console.log('Bye');Code language: JavaScript (javascript)

出力

{name: 'TypeError', message: 'add is not a function'}
ByeCode language: CSS (css)

この例では、add() 関数を呼び出し、戻り値を result 変数に代入します。add() 関数は存在しないため、JavaScript エンジンは結果をコンソールに出力するステートメントをスキップします。

console.log(result);Code language: JavaScript (javascript)

そして、エラーの名前とメッセージを出力する catch ブロック内のステートメントをすぐに実行します。

console.log({ name: e.name, message: e.message });Code language: CSS (css)

すでにエラーを処理したので、JavaScript エンジンは最後のステートメントの実行を続けます。

console.log('Bye');Code language: JavaScript (javascript)

catch ブロックを無視する

次の例では、2 つの引数の合計を返す add() 関数を定義します。

const add = (x, y) => x + y;

try {
  let result = add(10, 20);
  console.log(result);
} catch (e) {
  console.log({ name: e.name, message: e.message });
}
console.log('Bye');Code language: JavaScript (javascript)

出力

30
Bye

この例では、add() 関数が存在するため、エラーは発生しません。したがって、JavaScript エンジンは catch ブロックをスキップします。

例外識別子

try ブロック内で例外が発生すると、catch ブロック内の例外変数 (e) に例外オブジェクトが格納されます。

例外変数を使用しない場合は、次のように省略できます。

try {
  //...
} catch {
  //...
}
Code language: JavaScript (javascript)

たとえば、次の例では例外変数を使用せずに try…catch ステートメントを使用します。

const isValidJSON = (str) => {
  try {
    JSON.parse(str);
    return true;
  } catch {
    return false;
  }
};

let valid = isValidJSON(`{"language":"JavaScript"}`);
console.log(valid);Code language: JavaScript (javascript)

動作.

まず、文字列を受け取り、その文字列が有効な JSON の場合は true、そうでない場合は false を返す isValidJSON() 関数を定義します。

JSON を検証するために、isValidJSON() 関数は JSON.parse() メソッドと try...catch ステートメントを使用します。

JSON.parse() メソッドは JSON 文字列を解析してオブジェクトを返します。入力文字列が有効な JSON でない場合、JSON.parse() は例外をスローします。

例外が発生しない場合、関数は try ブロック内で true を返します。それ以外の場合は、catch ブロック内で false を返します。

次に、isValidJSON() 関数を呼び出して、JSON 文字列を渡します。

let valid = isValidJSON(`{"language":"JavaScript"}`);Code language: JavaScript (javascript)

入力文字列が有効な JSON 形式であるため、この関数は true を返します。

最後に、result をコンソールに出力します。

console.log(valid);Code language: JavaScript (javascript)

サマリー

JavaScript の例外を処理するには、try...catch ステートメントを使用します。
例外が発生する可能性のあるコードのみを try ブロックに配置します。

このチュートリアルは役に立ちましたか?