JavaScriptにおけるdata属性を使った例外の例

ページの読み込み時に、サーバーが商品名、価格、 購入数量を格納したHTMLコードを生成するとします:

html<div id="product" data-product="りんご" data-price="1000" data-amount="5"></div>

商品の要素への参照を受け取り、商品の合計金額 （価格 × 数量）を計算する関数を作ってみましょう:

javascriptfunction getCost(elem) {
  return elem.dataset.price * elem.dataset.amount;
}

私たちの商品の合計金額を求めてみます:

javascriptlet product = document.querySelector('#product');
let cost = getCost(product);

alert(cost);

ここで、次のような状況を想定してみます: サーバー側の何らかの障害により、価格や数量 （またはその両方）が欠落した商品情報が 送信されてきた場合です。例を示します:

html<div id="product" data-product="りんご" data-price="1000"></div>

この状態で商品の合計金額を計算しようとすると、 結果として画面に NaN が表示されます。 これはあまり有益な情報ではないことに同意できるでしょう。

つまり、必要な属性が存在しない状況から 保護する必要があります。これには2つの方法があります。 1つ目の方法は、これを正常な動作と見なし、 単純に必要な属性の有無をif文でチェックする方法です:

javascriptfunction getCost(elem) {
  if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
    return elem.dataset.price * elem.dataset.amount;
  } else {
    return 0; // 何か（0やnull、falseなど）を返す
  }
}

2つ目の方法は、属性 data-price または data-amount の欠落を例外的な状況と 見なすことです。この場合、例外をスローします:

javascriptfunction getCost(elem) {
  if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
    return elem.dataset.price * elem.dataset.amount;
  } else {
    throw {
      name: 'ProductCostError',
      message: '商品の価格または数量が存在しません'
    };
  }
}

ここでどちらの方法を適用するのが適切かは、 プログラマの判断に委ねられます。問題を スクリプトの正常な動作の一部と見なすか、 それとも例外的な状況と見なすかによって決まります。

状況が例外的であると判断したとします。 その場合、商品の合計金額を取得するコードは 以下のようになります:

javascriptlet product = document.querySelector('#product');

try {
  let cost = getCost(product);
  alert(cost);
} catch (error) {
  // 例外に対して何らかの対応を行う
}