JavaScriptのtry...catch文とは？エラーハンドリングの基本をわかりやすく解説

JavaScriptのtry...catchブロックは、エラーを処理するための仕組みです。「try」ブロックにはテストしたいコードを記述し、「catch」ブロックには、tryブロック内のコードが正常に実行できなかった場合に動作するコードを記述します。

開発者がプログラムをテストする際、エラーが発生したときに特定の方法で対処するコードを書くのはごく一般的です。プログラムをクラッシュさせて長いエラーログを表示させるよりも、たとえば「後でもう一度お試しください」といったユーザーフレンドリーなメッセージを表示する方が、はるかに丁寧な対応と言えるでしょう。

そこで役立つのがtry...catchブロックです。try...catchブロックを使えば、コード上の問題が発生してもプログラム全体がクラッシュすることなく、エラーを適切に処理できます。この記事では、try...catchブロックの使い方と、その有用性について詳しく解説します。

エラーハンドリングのおさらい

どんな優秀な開発者でも、コードにミスをすることはあります。プログラムが壊れる原因は無数にあるからです。

JavaScriptでエラーが発生すると、通常プログラムは停止し、コンソールにエラー内容が出力されます。これは開発者にとって何が問題なのかを把握できる便利な挙動ですが、エラーに遭遇したユーザーにとっては、意味の分からない英文の羅列にしか見えないはずです。

だからこそ、コードにエラーハンドリングの仕組みを組み込むことが重要になります。エラーハンドラーを用意しておけば、エラー発生時にプログラムがどう応答するかを自由にカスタマイズできます。つまり、エラー発生時にユーザーへどんなメッセージを見せるか、あるいは開発者自身にどう通知するかを自分で決められるのです。

JavaScriptのtry...catch文の基本

JavaScriptのtry...catch文は、指定したコードブロック内のエラーを検出します。tryブロック内のコードでエラーが発生すると、catchブロックの中身が実行されます。さらに「finally」ブロックを使えば、エラーの有無にかかわらず実行したいコードを記述することも可能です。

try...catch構文の基本的な形は以下の通りです。

try {
  // ここにテストしたいコードを書く
  console.log("コードは正常に動いています！");
} catch (e) {
  console.log("コードに問題があります！");
}

このブロックは2つの文で構成されています。

• try {}
• catch (e) {}

try文で囲まれたコードが、プログラムが実際に実行を試みる部分です。この例では、コンソールに「コードは正常に動いています！」と出力しようとしています。一方、catch文で囲まれたコードは、try文内でエラーが返された場合にのみ実行されます。

catch文の(e)には、try文のコードが失敗した原因となったエラーオブジェクトが格納されます。このeの値を出力すれば、コードを止めたエラーの根本原因を確認することができます。

try...catchの実践例

try...catchブロックの動きを理解するために、具体的な例を見てみましょう。以下のコードでは、変数名のスペルを間違えています。

let ourVariable = "Test";
console.log(ourVarible); // スペルミス！

このコードを実行すると、次のような結果になります。

ReferenceError: ourVarible is not defined

これは、変数が見つからないときにJavaScriptがデフォルトで返すエラーです。しかし、もしこのエラーをそのままユーザーに見せてしまったらどうでしょうか？　多くのユーザーは戸惑ってしまうはずです。

次に、同じコードをtry...catchブロックで囲んでみましょう。

let ourVariable = "Test";
try {
  console.log(ourVarible);
} catch (e) {
  console.log("問題が発生しました！");
}

実行結果：

問題が発生しました！

内部では先ほどと同じReferenceErrorが発生しています。しかし、プログラムは長く複雑なデフォルトのエラーメッセージをそのまま表示する代わりに、catchブロックで指定した独自のメッセージを返します。エラー自体は記録しつつ、ユーザーにはカスタムメッセージを見せる、というわけです。

catchブロックでは、発生したエラーが引数「e」に保持されます。必要であれば、このエラー情報にいつでもアクセスできます。eの値を出力する例がこちらです。

let ourVariable = "Test";
try {
  console.log(ourVarible);
} catch (e) {
  console.log("問題が発生しました！ エラーメッセージ:", e);
}

実行結果：

問題が発生しました！ エラーメッセージ: ReferenceError: ourVarible is not defined

これで、独自のメッセージを表示しつつ、プログラムが投げた実際のエラーメッセージも確認できるようになりました。

なお、catch句は省略可能です。エラーが発生しても特に何もしなくてよい場合は、コードをtryブロックで囲むだけで十分です。

finally句で確実に処理を実行する

try...catchに追加できるもうひとつの句が「finally」です。finallyはcatchと同様に省略可能な句で、エラーの有無にかかわらず必ず実行したいコードを記述できます。try...catch...finallyを組み合わせた例を見てみましょう。

let ourVariable = "Test";
try {
  console.log(ourVarible);
} catch (e) {
  console.log("問題が発生しました！ エラーメッセージ:", e);
} finally {
  console.log("コードの実行が完了しました！");
}

実行結果：

問題が発生しました！ エラーメッセージ: ReferenceError: ourVarible is not defined
コードの実行が完了しました！

このコードではエラーが発生するため、まずcatch句の中身が実行され、エラーメッセージが出力されます。エラー処理が完了した後、finallyブロックのコードが実行され、「コードの実行が完了しました！」と表示されます。finally句は、エラーが起きても起きなくても必ず通る処理、たとえばリソースの解放や終了時のクリーンアップなどに最適です。

まとめ

JavaScriptのtry...catch文を使えば、コードを安全にテストできます。try文が正常に実行できなかった場合にはcatch文の中身が実行され、finally文はtryまたはcatchのどちらかが実行された直後に必ず実行されます。

ユーザーが目にするサイトを開発しているなら、カスタムエラーを用意しておくと非常に便利です。独自のエラーメッセージを表示するようにしておけば、問題が発生したときにもユーザーが混乱することはありません。

さらにJavaScriptの学習を進めたい方は、ぜひ「JavaScriptの学び方ガイド」も参考にしてください。効率的にJavaScriptを習得するための実践的なヒントを多数紹介しています。