【JavaScript】エラーでプログラムを止めない！「try...catch」の使い方を初心者向けにわかりやすく解説

日付:

【JavaScript】エラーでプログラムを止めない！「try...catch」の使い方を初心者向けにわかりやすく解説

JavaScriptを勉強していて、コードの途中でエラーが出てしまい、「そこでプログラム全体の動きが止まってしまった…」という経験はありませんか？

Webサイトやアプリを作るとき、エラーのせいで画面がフリーズしたり、ボタンが一切反応しなくなったりするのは避けたいですよね。

そんな時に大活躍するのがtry...catch（トライ・キャッチ）という構文です。これを使うと、エラーが発生してもプログラムを安全に動かし続けることができます。

今回は、このtry...catchの仕組みと使い方を、直感的な図解付きでわかりやすく解説します！

1. try...catchとは？（基本的なイメージ）

一言でいうと、try...catch は「エラーが起きそうな場所に、あらかじめセーフティネット（安全網）を張っておく仕組み」です。

通常のプログラムは、上から順番に実行され、途中で1箇所でもエラーがあるとそこで強制終了してしまいます。しかし、try...catch を使うと次のように処理を分けることができます。

  • try ブロック: 「ひとまず、このコードを実行してみて！」と試す場所。

  • catch ブロック: 「もしエラーが起きたら、ここで捕まえて別の対策（エラー画面を出すなど）をして！」と指示しておく場所。

エラーが起きなければ catch の中は完全に無視されるため、お守りのように仕込んでおくことができます。

2. try...catchの基本の書き方

実際のコードを見てみましょう。

存在しない関数（定義されていない関数）を呼び出すと通常はクラッシュしますが、try...catch を使うとスマートに処理できます。

JavaScript

try {
    console.log("① 処理を開始します。");
   
    // ❌ 存在しない関数を呼び出す（ここでエラー発生！）
    getProfileData();
   
    console.log("② ここは実行されません。");
} catch (error) {
    // ⚠️ エラーが発生した時だけ、このブロックにジャンプします
    console.log("③ エラーをキャッチしました！");
   
    // 特殊な変数「error」の中に、詳しい理由が入っています
    console.log("エラーの理由:", error.message);
}

console.log("④ プログラムは無事に最後まで動き続けました。");

💡 実行結果

Plaintext

① 処理を開始します。
③ エラーをキャッチしました！
エラーの理由: getProfileData is not defined
④ プログラムは無事に最後まで動き続けました。


getProfileData() でエラーが起きた瞬間に、それ以降の行（②）をスキップして catch の中（③）へワープしています。

そのおかげで、プログラムが強制終了せず、最後の行（④）まで無事にたどり着けているのがポイントです！

3. 引数の「error」ってなに？

catch(error) の中にある error（e とだけ書かれることもあります）は、エラーの情報を詰め込んだオブジェクトです。

主に次の2つのプロパティ（プログラミングのデータ）をよく使います。

  • error.name: エラーの種類（例: ReferenceError, TypeError など）

  • error.message: 人間が読めるエラーの具体的な内容（例: x is not defined）

これらを使って、「もし〇〇というエラーなら、ユーザーに優しい日本語のメッセージを表示する」といったカスタマイズが可能です。

4. どんな時に使うの？（具体的なユースケース）

日常のコーディングで、try...catch は以下のような場面でよく使われます。

① 外部（API）からデータを読み込むとき

天気予報のデータやSNSの投稿データをインターネット経由で取得するとき、相手のサーバーが落ちていたり、通信が途切れたりすることがあります。

これを try...catch で囲んでおけば、通信に失敗しても「データの取得に失敗しました。時間を置いてお試しください」と画面に優しく表示できます。

② ユーザーが入力したデータを処理するとき（自作エディタなど）

ユーザーが自由に入力できるフォームや、コードを実行するエディタアプリなどでは、どんな不正なデータやバグのあるコードが送られてくるか予測できません。アプリ自体をクラッシュさせないための必須の防衛策になります。

③ JSONのパース（変換）をするとき

文字列をJavaScriptのオブジェクトに変換する JSON.parse() は、文字列の形式が少しでも崩れていると一発でエラーを起こします。ここも try...catch の定番スポットです。

まとめ：エラーを恐れないコードを書こう！

プログラミングにおいて、エラーは決して悪いものではありません。大切なのは「エラーが起きたときに、アプリを落とさずどう対応するか」です。

  • try にはエラーが起きるかもしれない処理を書く

  • catch にはエラーが起きたときのリカバリー処理を書く

この強力なセーフティネットを使いこなして、ユーザーに優しい、壊れにくい安定したアプリを作っていきましょう！



コメント

コメントを投稿