質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

javascriptの例外処理について

受付中

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 3,279

lmnwtr2027

score 11

前提・実現したいこと

javascriptでリファクタリングした際、例外処理の取り扱いがよくわからなかったので教えて下さい。

ソースコード

以下のように、ボタンを押すとエラーチェックを行い、問題ない場合のみ次の処理を行う処理を書きました。
この時、エラーチェック処理がとても長いため、この部分を関数に切り出そうとしました。

$(".sample").click(function(){
    var isError = true;
    /* 
    長いエラーチェック。エラーの場合、isError=falseをセット。
    */
  if ( isError = false ){
        alert("Error発生");
        return false;
    }
    /* 上のエラーチェックにひっかかない場合のみ行う処理をここに記述 */
})

すると、try~catchでくくる必要があり、余計にソースが分かり辛くなったように感じました。

$(".sample").click(function(){
    try{
        validate();    
       }
    catch(e){
        return false;      
    }
    /* 上のチェックにひっかかない場合に行う処理をここに記述 */
})

function validate(){
    var isError = true;
    /*
    長いエラーチェック。エラーの場合、isError=falseをセット。
    */
    if ( isError = false ){
        alert("エラー発生");
        throw "Error"
    }
}

こういう場合、もっと良い方法はないのでしょうか。
また、これでよい場合throw節には普通何を投げればよいのでしょうか。
曖昧な質問ですみませんが、よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+4

提示されているコードだと、try/catch の「大域脱出」の利点を享受できるものになっていませんね。通常の関数呼び出しのフローより大きく脱出できるところが嬉しいわけで、だからこそ異常系の処理に向くわけです(が、異常系処理以外でも使いどころはあります)。

$(".sample").click(function(){
    try{
        validate();    
       }
    catch(e){ // ※ 例外捕捉
        return false;
    }
    /* 上のチェックにひっかかない場合に行う処理をここに記述 */
})

function validate(){
    ...
    if (/* あれのチェック */) throw new Error('あれがおかしい');
    ...
    if (/* これのチェック */) throw new Error('これがおかしい');
    ...
    if (/* それのチェック */) throw new Error('それがおかしい');
    return; // 問題ナッシング
}

ここで validate() が別関数になっているところは重要ではありません。異常を発見したらボンボン例外を投げちゃうことで、正常系の処理を書くことに集中できます。下のコードのほうが本質を理解しやすいかもしれません。

$(".sample").click(function() {
    try{
        doSomething();    
       }
    catch(e){ // ※ 例外捕捉
        return false;
    }
});

function doSomething() {
    ...
    if (/* あれのチェック */) throw new Error('あれがおかしい');
    ...
    if (/* これのチェック */) throw new Error('これがおかしい');
    ...
    if (/* それのチェック */) throw new Error('それがおかしい');
    /* 上のチェックにひっかかない場合に行う処理をここに記述 */
}

validate() や doSomething() の中で例外を投げ分けることで、※印のところで例外の種類による処理の変更なんかもできます。

余談ですが、手続き型言語の多くに提供されている return も、いわゆる構造化プログラミングのフローを飛び越えて脱出できる命令と考えることができます。

$(".sample").click(function() {
    if (! validate()) return false;
    /* 上のチェックにひっかかない場合に行う処理をここに記述 */
});

function validate() {
    ...
    if (/* あれのチェック */) return false;
    ...
    if (/* これのチェック */) return false;
    ...
    if (/* それのチェック */) return false;
    return true; // 問題ナッシング
}


最初のコードとほぼ同じです。違うところは、return は自分のいる関数から脱出することしかできないのに対し、throw では try をしかけたところまで脱出できることです。つまり、validate() が超複雑で、さらに細かい検証関数を呼び出すような作りにした場合でも、その中で例外を投げるだけで簡単に大域脱出できるということです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

validate でスローせずに boolean を返してみてはどうですか?
ちなみに、isError という名前にする場合は true がエラーです。
false をエラーとしたいのであれば、変数名は isValid などにすべきですね。

$(".sample").click(function(){
    if (validate()){
        alert("Error発生");
        return false;
    }
    /* 上のチェックにひっかからない場合に行う処理をここに記述 */
})

function validate(){
    var isError = false;
    /*
     * 長いエラーチェック。エラーの場合、isError = trueをセット。
     */
    return isError;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

throw は処理を強制的に停止させたい場合に使いますが、せっかく throw したところを try-catch で例外を止めて処理させる部分に矛盾を感じます。
例外を発生させたいのなら throw new Error で強制終了させれば良いですし、静かにエラーを発生させたい(強制終了したくない)のなら throw を使わないようにしてみてはいかがでしょうか。

'use strict';
function validate (element) {
  element.checkValidity();

  var validity = element.validity,
      error = [];

  if (element.valueMissing) {
    error.push('required');
  }

  if (element.patternMismatch) {
    error.push('pattern');
  }

  return error;
}

function handleClick (event) {
  var error = validate(event.currentTarget.elements['hoge']),
      errorMsg {required: '必須項目です', pattern: '文法エラーです'};

  for (var i = 0, l = error.length; i < l; ++i) {
    console.error(errorMsg[error[i]]);
  }
}
jQuery(('.sample').on('click', handleClick);

Re: lmnwtr2027 さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

=の比較演算子は=2つまたは3つです。
===の厳密な比較の方でいいと思います。

/* 誤 */
if(isError = false)

/* 正 */
if(isError == false)

if(isError === false)

また、他の方も仰っていますが、初期値をfalseにして、
エラーがあったらtrueにした方が、このように書けます。

var isError = false;

// エラーがあったら
isError = true;

if(isError){ //エラー処理 }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る