https://idea-hack.com/courses/lets-learn-how-to-use-consloe-x-which-is-useful-for-debugging-java-scipt/lessons/use-try-catch-error-syntax-for-efficient-debugging-in-javascript/
https://idea-hack.com/courses/lets-learn-how-to-use-consloe-x-which-is-useful-for-debugging-java-scipt/lessons/use-try-catch-error-syntax-for-efficient-debugging-in-javascript/

JavaScriptで効率良いデバックのためにtry{} catch(error){}構文を使ってエラー時の処理を実行する方法

JavaScriptで効率良いデバックのためにtry{} catch(error){}構文を使ってエラー時の処理を実行する方法

JavaScriptのエラーはその状況を踏まえて、ブラウザ側が出力してくれるものと考えていませんか?

実は、try{} catch(error){}構文を活用して、特定の条件の時に私たち開発者側でエラーを出力させたり、別の処理を実装しておくことが可能です。

これは、私たちが想定している方法とは異なる処理結果が発生してしまった時などに役立ちます。

エラー発生後の処理

通常、JavaScript内でエラーが発生した時は後続の処理は実行されませんが、try{}catch(error){}構文を利用してエラー時の処理を分岐しておけば、後続の処理は実行されます。

もし、エラー時の処理を実装しておきたいけれど、その時に後続の処理を止めておきたい場合はnew Error()インスタンスを使った方法を選択する必要があります。

構文

構文意味
try {【処理コード】} catch(error) {【エラー時の内容】}【処理コード】時にエラーがない時は【処理コード】を実行。
【処理コード】にエラーがある時は【エラー時の内容】実行。
try {【処理コード】} catch(error) {【エラー時の内容】} finally{【エラーの有無に関わらず実行】}【処理コード】時にエラーがない時は【処理コード】を実行。
【処理コード】にエラーがある時は【エラー時の内容】実行。
その後、【エラーの有無に関わらず実行】
try {} catch{}構文の仕様

サンプルコード

サンプルコードとして、構文にfinally{}を付与した物と付与していない物を分けて紹介します。

これには意図があります。

実はサンプルコードをご覧いただければお分かりかと思いますが、別にfinally{}の有無に関係なく、「エラーの有無に関係なく実行される処理」は実装可能です。

KAZU
KAZU

私はfinally{}を使うことはないです。(誰かメリットあるって人いたら教えて欲しい)

try {【処理コード】} catch(error) {【エラー時の内容】} finally{【エラーの有無に関わらず実行】}

下記は一度「定数に代入することはできないのに定数に代入している」ためエラーが出力されるコードです。

また、エラーの有無に関係なく、console.log()を使って現在の定数が出力されていることを確認しています。

KAZU
KAZU

finally{}なくても実装できたでしょ?

開発者ツールで実行して確認ください。

JavaScript
const a = 1;

try {
  a = 2; // aへの再代入。エラー
} catch (error) {
  console.error(`エラーが発生しました: ${error.message}`);
}

// 中断されることなく実行される
console.log(`定数aの値は${a}です`);
try{} catch{}構文の使用例
try{} catch{}構文の使用例

try {【処理コード】} catch(error) {【エラー時の内容】} finally{【エラーの有無に関わらず実行】}

下記は一度「定数に代入することはできないのに定数に代入している」ためエラーが出力されるコードです。

また、エラーの有無に関係なく、finally{}構文を定義して、構文の中にconsole.log()を使って現在の定数が出力されていることを確認しています。

JavaScript
const a = 1;

try {
  a = 2; // aへの再代入。エラー
} catch (error) {
  console.error(`エラーが発生しました: ${error.message}`);
} finally {
  // 中断されることなく実行される
  console.log(`定数aの値は${a}です`);
}
try{} catch{} finally{}構文の使用例
try{} catch{} finally{}構文の使用例
インストラクター