ラック
Home > ブログ > 記事 > 2016年11月 > JSのショートサーキット評価について

JSのショートサーキット評価について

カテゴリ: プログラム

経緯

入力フォームの必須チェックをする場面に遭遇しました。最終的には処理の直前でバリデーションするのは当然として、ボタンクリックでページ遷移する前にメッセージを表示させて処理を中断した方がユーザには優しいですよね。

せっかくHTML5でinputタグにrequired属性が追加されたので、これを使えれば楽…なのですが、IEですら対応しているのにSafariが未だに対応していないという悲しい現実に直面しました。

そのため、Javascript(正確にはjQuery)でエラーメッセージ表示をさせる処理も書くことになりました。

考えたこと

今回の必須項目にはテキストボックスの他、ラジオボタンもあります。ラジオボタンはchecked="checked"を書いておけば、普通に使っていれば必ずどれかは選択されている状態になります。とはいえ、開発者ツールからソースコードを操作して上記コードを削除して、わざと「グループ内のどのラジオボタンもチェックされていない状態」にして処理を実行させる輩がいないとも限りません。そのため、しっかりチェックしましょう。

汎用的なチェックロジックを作りたかったので、.val()で取得した文字列が空文字列だったらエラーになるように…


var val = $("input[name=\"radioHOGE\"]:checked").val();
if(check(val)) {
    //エラー処理
}

//汎用チェック関数
function check(val) {
    if(val.length == 0) {
        return ture; //フラグが立った場合trueとする
    }
    else {
        return false;
    }
}

と考えましたが、先述のように「グループ内のどのラジオボタンもチェックしない」場合はエラーになりました。はい、うっかりしていました。これは、valがundefinedになるためです。…とすれば、


var val = $("input[name=\"radioHOGE\"]:checked").val();
if(check(val)) {
    //エラー処理
}

//汎用チェック関数
function check(val) {
    if(typeof val == "undefined") {
        return true;
    }
    else if(val.length == 0) {
        return ture;
    }
    else {
        return false;
    }
}

このようにして、.length()を処理させる部分にundefinedが渡らないようにすれば良い。ですが、長い。せめてショートサーキットが使えれば…と思ったところで「そういえばJavascriptのショートサーキットってどうやるのだろう?」と疑問に思い、調べた次第です(ここまで前振り)。ちなみに実際の解決方法はものすごくシンプルに収まるので以下の話は必要ありませんでした。これについては最後に。

Javascriptのショートサーキット

調べたところ、Javascriptのショートサーキットはなかなかぶっ飛んでいました(Cとかから比べた場合)。で、ショートサーキットを使うと以下のように書けます。


var val = $("input[name=\"radioHOGE\"]:checked").val();
if(check(val)) {
    //エラー処理
}

//汎用チェック関数
function check(val) {
    return typeof val == "undefined" || val.length == 0 || false;
}

これは…きっと他の人が見たら何やっているかわけ分からなくなるパターンな臭いがします。具体的には初めてPerlの@_を見たときのように。個人的にはそれくらい衝撃的でした。

最終的な解決方法

ここまで考えましたが、根本的なことに行き当たります。ぶっちゃけ今までの方法全部必要ないですよね?

必要なのは「.val()で取得した値が文字列で、空文字列でない」場合とそうでない場合を判別することです。つまり、nullかundifinedかNaNかfalseか0(数値型)か””(空文字列)ならばエラーにすれば良いのです。エラーではない場合は、空文字列ではない文字列の場合のみ。つまり


var val = $("input[name=\"radioHOGE\"]:checked").val();
if(!val) {
    //エラー処理
}

そもそもチェック関数とかロジックなんて必要なかった!完!

なお、bool値の扱い方が反転していることに突っ込んではいけない(今までの方法は「trueならばエラー、falseならばOk」でしたが、上の方法は「falseならばエラー、trueならばOK」になっている)。

ということでそもそも…な話でしたが、Javascriptのショートサーキットについて勉強するには良い機会になった、ということにしておきましょう。

タグ: javascript

 



関連する記事一覧