JavaScriptのtry catchとは？使い方を簡単に解説

JavaScriptでプログラミングをしていると、エラーが発生して思うようにコードが動かないことがありますよね。

特に初心者にとっては、予期しないエラーは理解が難しく、修正に時間がかかることも多いです。そこで「try catch」という便利な仕組みを使うことで、エラーを上手に管理できるようになります。

この記事では、JavaScriptの「try catch」について、基本的な使い方から応用例まで詳しく解説します。

この記事を読むことで、初心者でもエラー処理の仕組みがよく分かり、プログラムが安定して動くようになります。また、応用的な使い方も学べるので、スキルをさらに向上させたい方にも役立つ内容です。

本記事の監修者：Zetto

 現役ITエンジニア
 Java Gold保有
 TypeScript(Vue.js)
 Java(SpringBoot)
 Programming Dream編集長

JavaScriptのtry catchを理解しよう

try catchとは何か？

JavaScriptのプログラムでは、実行中にエラーが発生することがあります。これを適切に処理することを「例外処理」と呼びます。例外処理を行うことで、プログラムが予期せぬ動作をしたり、強制終了するのを防ぐことができます。
JavaScriptには、プログラムが途中でエラーを起こして止まってしまうことを防ぐための「例外処理」という仕組みがあります。その代表的な方法が「try catch」です。この章では、まずこの「try catch」についての基本的な考え方を理解していきましょう。

try catchの役割とは

「try catch」は、JavaScriptでエラーが発生した際に、そのエラーを検知してプログラムが強制的に止まるのを防ぎ、適切に処理を行うための仕組みです。プログラムを実行している中で、どうしてもエラーが避けられない場合があります。例えば、ユーザーが不正な値を入力したり、ネットワーク通信に失敗したりすることがありますよね。そのような場合にプログラムが途中で止まってしまうと、ユーザーにとって使いづらいものになってしまいます。

「try catch」を使うことで、エラーが発生してもプログラムが最後まで実行されるようにし、ユーザーにとっても安心して使える環境を作ることができます。言い換えると、プログラムが途中で壊れてしまうのを防ぎ、必要に応じてエラーメッセージを表示したり、別の手順を踏んだりすることができるのです。

try catchの基本的な構造と仕組み

tryブロックとcatchブロックの役割

「try catch」は2つのブロックで構成されています。それぞれの役割について見ていきましょう。
「try catch」は2つのブロックで構成されています。まず「try」ブロックには、実行したい処理を記述します。そして「catch」ブロックには、エラーが発生した際の対応方法を書きます。この構造により、プログラムが問題なく動作すれば「try」部分が実行され、エラーが発生した場合は「catch」部分が実行される仕組みです。

具体的には、以下のような構文になります。

try {
  // エラーが発生する可能性のあるコード
} catch (error) {
  // エラーが発生したときの処理
}

「try」の中に、エラーが発生する可能性のあるコードを書き、「catch」の中には、もしエラーが発生したときにどのように対応するかを書きます。これにより、想定外のエラーによるプログラム停止を防ぐことができます。

try catchを使うと何ができるのか？

try catchが必要なシチュエーション

「try catch」を使うことで、プログラムがどのような状況でも安定して動作するようになります。どのようなシーンで必要になるのかを見ていきましょう。

エラーとは？JavaScriptでよくあるエラーの例

文法エラーについて

JavaScriptにはいくつかのエラーの種類がありますが、まずは文法エラーについて詳しく見てみましょう。
JavaScriptにおけるエラーは、プログラムが正しく動作しない原因となる問題です。以下に、JavaScriptでよく見られるエラーの種類について紹介します。

1. 文法エラー：JavaScriptの文法に誤りがあると発生します。例えば、「if文」に対応する中括弧が足りない場合などです。
2. 実行時エラー：コードが実行されている途中で発生するエラーです。例えば、未定義の変数にアクセスしようとした場合がこれにあたります。
3. 論理エラー：コードの文法自体に誤りはないものの、意図した結果が得られない場合です。これはプログラムのロジック自体に間違いがあることが原因です。

「try catch」を使うと、これらのエラーのうち、特に「実行時エラー」に対して有効に対応することができます。コードが実行中にエラーが発生した場合、プログラムが途中で止まるのを防ぎ、ユーザーにとっても安定した動作を提供できます。

try catchでエラーをどう対処するのか

実行時エラーの例

実行時エラーはコードの実行中に発生するエラーです。「try catch」を使ってどのように対処するか、具体的な例を見ていきましょう。
「try catch」の最大の利点は、エラーが発生したとしても、そのままコードを続行できることです。例えば、ユーザーが入力フォームに不正なデータを入力した場合、「catch」ブロックで適切にエラーメッセージを表示し、ユーザーに再入力を促すことができます。これにより、ユーザーが困惑せず、スムーズに操作を続けられるのです。

try catchの基本構文と使い方を解説

まずは基本的な構文を理解することが大切です。

try catchの構文を簡単に説明

tryブロック内の処理

「try」ブロックには、エラーが発生するかもしれないコードを書きます。具体的な例を使って説明します。
「try catch」の構文は非常にシンプルでありながら強力です。「try」ブロックにエラーが発生する可能性のあるコードを書き、「catch」ブロックにエラーが起きたときに実行する処理を書きます。

以下の例は、「try catch」を使った基本的な構文です。

try {
  let result = 10 / userInput; // ユーザー入力を使った計算
} catch (error) {
  console.log("エラーが発生しました: " + error.message);
}

このコードでは、ユーザーからの入力値を使って計算を行いますが、もし「userInput」が0や不正な値だった場合、エラーが発生します。その際、「catch」ブロックが実行され、エラーメッセージが表示されます。

具体的なコード例でtry catchを理解する

エラーチェックと例外発生

ユーザー入力のチェックを行い、エラーが発生した際にどのように対応するかを見てみましょう。
具体的な例を挙げて、「try catch」の使い方をさらに深く理解しましょう。以下のコードでは、ユーザーに数字を入力してもらい、その数字を使って計算を行います。

try {
  let userInput = prompt("数字を入力してください:");
  let number = parseInt(userInput);

  if (isNaN(number)) {
    throw new Error("無効な数字が入力されました");
  }

  let result = 100 / number;
  console.log("計算結果は: " + result);
} catch (error) {
  console.log("エラー: " + error.message);
}

この例では、ユーザーからの入力を受け取り、それが正しい数字であるかをチェックしています。もし不正な入力があった場合、「throw」を使ってエラーを意図的に発生させ、「catch」ブロックでそのエラーを適切に処理しています。

初心者向け！try catchのよくある使い方例

初心者向けに、「try catch」を使ったよくある例を紹介します。たとえば、APIを使ってデータを取得する際、通信エラーが発生することがあります。そのような場面でも「try catch」を使うことで、エラーが発生してもプログラムが正常に動作するようにできます。

以下の例は、APIからデータを取得する際のコードです。

try {
  let response = fetch("https://example.com/data");
  let data = response.json();
  console.log(data);
} catch (error) {
  console.log("データの取得に失敗しました: " + error.message);
}

このコードでは、外部のAPIからデータを取得しようとしますが、ネットワークの問題などで通信が失敗した場合、「catch」ブロックでエラーメッセージを表示します。これにより、ユーザーに状況を知らせることができます。

try catchの実践的な活用シーン

ユーザー操作を安定させるための例

ユーザーが不正な入力をしても、プログラムが止まらないようにするための処理を見てみましょう。

ユーザー入力のエラーを処理する

数字入力のチェック

ユーザーから入力された値が正しいかどうかをチェックする例を見ていきましょう。
ユーザーからの入力は、必ずしも期待通りの形式であるとは限りません。たとえば、年齢を入力する欄に「文字」を入力してしまうことがあります。この場合、「try catch」を使って、ユーザーに再入力を促すメッセージを表示することができます。

try {
  let ageInput = prompt("年齢を入力してください:");
  let age = parseInt(ageInput);

  if (isNaN(age)) {
    throw new Error("無効な年齢が入力されました");
  }

  console.log("入力された年齢は: " + age);
} catch (error) {
  console.log("エラー: " + error.message);
}

APIリクエスト時のエラー処理の例

APIを使った外部サービスとの通信でも、エラーが発生することがあります。例えば、サーバーが応答しない場合やネットワークが不安定な場合です。「try catch」を使うと、エラー発生時にユーザーに対して「通信が失敗しました」と知らせることができます。

try {
  let response = await fetch("https://api.example.com/data");
  if (!response.ok) {
    throw new Error("データの取得に失敗しました");
  }
  let data = await response.json();
  console.log(data);
} catch (error) {
  console.log("エラー: " + error.message);
}

finallyの使い方：try catchとセットで覚えよう

finallyとは何か？try catchとどう違うのか

「finally」ブロックは、エラーの有無にかかわらず必ず実行される部分です。「try catch」だけではなく、「try catch finally」の構成で、最後にどうしても行いたい処理を記述します。例えば、ファイルを開いたら最後には必ず閉じるなど、リソースの解放が必要な場合に役立ちます。

try、catch、finallyの三つ組みでできること

「finally」を使うことで、エラーがあろうがなかろうが、最後に実行しておくべきことを記述できます。以下の例では、データベース接続を開き、どんな状況でも最終的に接続を閉じる処理を行います。

try {
  // データベース接続を開く
  console.log("データベースに接続しました");

  // エラーが発生する可能性のある処理
  throw new Error("何か問題が発生しました");
} catch (error) {
  console.log("エラーが発生しました: " + error.message);
} finally {
  // データベース接続を閉じる
  console.log("データベース接続を閉じました");
}

try catchを使う上での注意点

try catchを使うべき場合と使わない方が良い場合

「try catch」はとても便利ですが、すべてのエラーに対して使うべきというわけではありません。例えば、予測可能なエラーに対しては、事前にチェックして回避する方が効率的です。無闇に「try catch」を使うと、コードが複雑になり、逆にエラーの原因が見つけにくくなることもあります。

エラーを無理に隠さないようにしよう

「try catch」でエラーを処理することは重要ですが、エラーの詳細を完全に隠してしまうと、問題の解決が難しくなることがあります。適切なログを出力することで、あとで問題の原因を調べやすくなります。

try catchを使ったエラーログの記録方法

エラーメッセージをコンソールに出力する方法

エラーが発生したときには、「console.log」や「console.error」を使って、エラーメッセージを記録しておくことが重要です。これにより、プログラムのどこで問題が発生したのかが分かりやすくなります。

try {
  let value = riskyFunction(); // エラーが発生するかもしれない関数
} catch (error) {
  console.error("エラーが発生しました: " + error.message);
}

エラーログを使って問題を効率的に解決する

エラーログを記録することは、問題解決の手がかりを得る上で非常に役立ちます。開発中だけでなく、実際の運用中でもエラーが発生したときに詳細な情報をログに記録することで、次に同じエラーが起こらないように防ぐことができます。

よくあるtry catchの疑問とトラブルシューティング

try catchが機能しない時の原因と対処法

時には「try catch」が思ったように動作しないこともあります。例えば、「catch」ブロックがエラーをキャッチしない場合、そもそも「try」ブロック内に文法エラーがあることが原因かもしれません。また、非同期処理の場合は「try catch」ではなく「.catch()」メソッドを使う方が適切な場合もあります。

エラーが発生し続ける場合のチェックポイント

エラーが続けて発生する場合、「try」ブロック内で何が問題なのかを段階的に確認することが必要です。小さな部分ごとにログを出力することで、どこでエラーが起きているかを特定しやすくなります。

例外処理を上手に使いこなしてコードを安定させる

例外処理がなぜ重要か？安定したコードを書く理由

「try catch」を使った例外処理を正しく行うことで、ユーザーに対してエラーが少なく安定したサービスを提供することができます。例外処理は、プログラムの信頼性を高めるために不可欠です。

try catchで書かれたコードのリファクタリング例

「try catch」を使ってエラー処理を行ったコードを、さらに分かりやすく改良する方法もあります。エラー処理を共通の関数にまとめたり、エラーメッセージを見やすく整理したりすることで、コード全体の品質が向上します。

まとめ：JavaScriptのtry catchを使いこなそう

try catchの重要なポイントをおさらい

「try catch」は、JavaScriptでエラーが発生してもプログラム全体が止まらないようにするための便利な手段です。初心者にとっても、エラー処理を学ぶことでより安定したコードを書けるようになります。

try catchを使ってエラーに強いJavaScriptコードを書くためのヒント

エラーを避けられない場合は「try catch」で対処し、事前に予測できるエラーについては事前にチェックすることが理想です。正しく例外処理を行うことで、ユーザーにも安心して使ってもらえるプログラムを作ることができます。

あわせて読みたい

JavaScriptでnullを判定する簡単な方法 JavaScriptでnullを判定するにはどうすればいいの？ こんなお悩みにお答えします。 この記事では、JavaScriptでnullを判定する簡単な方法を丁寧に解説し、初心者でも理…