Try…catch 【JavaScript】

Try…catch 【JavaScript】

コードを書いていてエラーを吐くかもしれない処理を入れ込む場合は、Try…catchを使います。

 

たとえば、

console.log("Step 1");
エラーを吐きそうな処理
console.log("Step 2");

を実行した場合を考えてみましょう。

もしエラーが発生すると、console.log(“Step 2”)は実行されません。

 

エラーが発生してもconsole.log(“Step 2”)が実行されるようにするためには、Try…catchを使います。

そうですね、エラーが発生しそうな処理として、nonExistentFunction()を実行しようとしたとします。存在しない関数を途中で実行すると、”そんな関数は定義されてないよ”というエラーが出ます。このエラーが出たとしてもconsole.log(“Step 2”)が実行されるようにするには、

console.log("Step 1");
try {
    nonExistentFunction();
} catch (error) {
    console.error(error); // Uncaught ReferenceError: nonExistentFunction is not defined
}
console.log("Step 2");

このように書きます。

 

そうすると、実行結果としてコンソールには

"Step 1"
Uncaught ReferenceError: nonExistentFunction is not defined
"Step 2"

と表示されます。

Step2とコンソールにログされていますね。

 

ちなみに、console.errorはconsole.logと似ていて、エラーの内容をコンソールに表示します。

 

今回はシンプルな例ですが、たとえばユーザーの所在地からその場所の天気予報を教えてくれるアプリを作るとしたら、

ユーザーの位置情報を得て、天気予報サービス(API)から天気データを取得し、ユーザーに天気を表示しますね。

ここでは、いくつかの処理が失敗する可能性があります。

ユーザーが位置情報の共有を許可していなかったり、APIが落ちていたりする場合、エラーが出てしまいます。

 

このようにエラーが出そうな場合はTry…catchを使うことで、エラーが出ても処理を止めずに、エラーから復帰することができます。

JavaScriptカテゴリの最新記事