【JavaScript】エラーハンドリングの実施方法 (try – catch)

JavaScript

はじめに

JavaScriptで開発していると、「データが取得できない」「サーバーが応答しない」などエラーに遭遇することは避けられません。
そこで重要なのが エラーハンドリング です。正しくエラーをハンドリングすれば、アプリの信頼性やバグの早期発見、ユーザビリティの向上が見込まれます。
今回は、JavaScriptでエラーハンドリングを実施する方法をログとして記載していきます。

他にも、体系的にJavaScriptを学びたい方には以下の教材がおすすめです:

👉1冊ですべて身につくJavaScript入門講座(Amason)
👉 スラスラわかるJavaScript(Amazon)

 

エラーハンドリングとは?

エラーハンドリングとは、プログラム中で発生したエラーを検知し、適切に処理する仕組みのことです。
JavaScriptでは主に以下のような方法でエラーを扱います。

  • try...catch を使った例外処理
  • throw を使ったエラーの発生
  • finally による後処理

 

try…catch

try...catch はJavaScriptで最も基本的なエラーハンドリングの方法です。
主に以下のブロックで分けた構成となります。

  • tryブロック:エラーが起きそうな処理を書く
  • catchブロック:エラー時に必ず実行される処理
  • エラーオブジェクトmessage, name, stack で詳細を確認可能
try {
  let result = errorTest; // 存在しない変数を参照
} catch (error) {
  console.error("エラーが発生:", error.message);
}

 

throwで意図的にエラーを発生させる

throw は条件が不正な場合、意図的にエラーを投げる手段です。
バリデーション処理や警告表示のために使用するのが主な使用のされ方となります。(既知のエラー)

function divide(a, b) {
  if (b === 0) {
    throw new Error("0で割ることはできません");
  }
  return a / b;
}

 

finally(必ず実行する処理を書く)

finally は、エラーの有無に関わらず必ず実行される処理を記述するブロックです。
エラーとしてcatchされた処理でも最後に必ず実行を実施できるため、「接続の切断」や「メモリの解放」等にも使用することが可能です。

try {
  let data = JSON.parse("{ invalid json }");
} catch (error) {
  console.error("JSONエラー:", error.message);
} finally {
  console.log("処理終了(成功/失敗に関わらず実行)");
}

 

まとめ

項目localStorage
データの持続性ブラウザを閉じても残る
使用タイミング設定やテーマ保存など
共有範囲同じドメインで共有される

 

最後に

JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript

以上、ログになります。
これからも継続していきましょう!!

JavaScriptフロントサイド関連
シェアする
おすすめIT本
良いコード/悪いコードで学ぶ設計入門

「ITエンジニア本大賞2023」技術書部門で大賞を受賞した本です。
・コードの可読性
・普段意識したほうが良いこと
・リファクタリング考え方
等、普段のコードを設計する際に意識することが書かれています。
コードのあるべき姿に迷ったら一度読んでみると良い本です。

仕組みと使い方がわかる Docker&Kubernetesのきほんのきほん

Dockerって何?となったときに私が最初に読んだ本です。
Dockerがどんな仕組みで動いているのか、コマンドでは何を命令しているのかを理解できるように、イラストを多用して説明しています。

1冊ですべて身につくJavaScript入門講座

「ITエンジニア本大賞2024」技術書部門で大賞を受賞した本です。
私が次に読もうと思っている本なのでおすすめとして挙げておきたいと思います。

コメント

タイトルとURLをコピーしました