JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのエラー処理と例外処理の実装例をわかりやすく解説

JavaScriptにおけるエラー処理(例外処理)は、プログラムの実行中に発生する予期しない問題に対応し、アプリケーションのクラッシュを防ぐために欠かせない仕組みです。JavaScriptでは主に try...catch 構文を使ってエラーを捕捉します。

基本となる3つの要素

  • tryブロック: エラーが発生する可能性があるコードを記述します。
  • throw文: 「0での除算は不可」など、独自のカスタムエラーを意図的に発生させることができます。
  • catchブロック: tryブロック内でエラーが発生した際に、そのエラーを受け取って適切な処理を行います。

実装例

以下は、JavaScriptでエラー処理と例外処理を実装した具体的なサンプルコードです。2つの数値を入力して除算を実行し、2つ目の値が「0」の場合には throw 文でカスタム例外を発生させる構成になっています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 18px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>エラー処理と例外処理のサンプル</h1>
<div class="sample"></div>
<input class="inputNum" type="number" />
<input class="inputNum" type="number" />
<button class="Check">DIVIDE</button>
<h3>
上のボタンをクリックすると除算が実行されます
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let num, num1;
    document.querySelector(".Check").addEventListener("click", () => {
        num = document.querySelectorAll(".inputNum")[0].value;
        num1 = document.querySelectorAll(".inputNum")[1].value;
        try {
            if (num1 === "0") throw "Can't divide by zero";
            sampleEle.innerHTML = `${num} divide by ${num1} = ${num / num1}`;
        } catch (e) {
            sampleEle.innerHTML = "Error: " + e;
        }
    });
</script>
</body>
</html>

動作のポイント

DIVIDEボタンをクリックすると、イベントリスナー内で入力された2つの値を取得し、try ブロックの中で除算処理を行います。ここで重要なのが次の一行です。

if (num1 === "0") throw "Can't divide by zero";

2つ目の値が「0」だった場合、throw 文によって文字列型の例外が発生し、以降の処理はスキップされて catch ブロックへ制御が移ります。その結果、画面には「Error: Can't divide by zero」というエラーメッセージが表示され、無効な演算が実行されることを防げます。

出力結果

通常どおり数値を入力してDIVIDEボタンをクリックした場合 −

JavaScriptのエラー処理と例外処理の実装例をわかりやすく解説

2つ目の数値として「0」を入力してDIVIDEボタンをクリックした場合 −

JavaScriptのエラー処理と例外処理の実装例をわかりやすく解説


  1. JavaScriptとCSSで作る！タイプライター風の文字入力・削除エフェクトの実装方法

    CSSアニメーションとJavaScriptを組み合わせることで、まるでタイプライターで打っているかのような「文字の入力」と「削除」を繰り返すエフェクトを実装できます。Webサイトのヒーローセクションやキャッチコピーの演出など、訪問者の目を引く演出として幅広く活用できる人気のテクニックです。以下のサンプルコードでは、複数のテキストを順番にタイプ表示し、すべて表示し終えると今度は1文字ずつ削除していく動きを再現しています。実装例<!DOCTYPE html> <html> <style> div {    display: flex; &nb

  2. JavaScriptでCSS変数を取得・設定する方法

    JavaScriptを活用すると、CSS変数（カスタムプロパティ）の値を動的に読み取ったり、書き換えたりすることができます。ポイントになるのは、次の3つのメソッドです。 1. getComputedStyle() ― 適用済みスタイルの取得 getComputedStyle()メソッドは、対象の要素に実際に適用されているすべてのスタイル情報を含むオブジェクトを返します。このオブジェクトには、CSS変数の値も含まれています。 2. getPropertyValue() ― 目的のプロパティ値の取得 getComputedStyle()が返したオブジェクトに対してgetPropertyVal