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

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

ただいまの
回答率

90.61%

  • プログラミング言語

    670questions

    プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

  • アルゴリズム

    396questions

    アルゴリズムとは、定められた目的を達成するために、プログラムの理論的な動作を定義するものです。

入力確認処理などは条件分岐のネストが深いのと条件分岐が浅く長く続くのどっちがマシか

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,272

manzyun

score 1864

次のJavascrpitは自分がHTMLで構成された入力フォームの空欄チェックのソースコードなのですが、個人的にネストが深すぎて気になっておりますし、縦にも長くて気になります。

function isNotInputEmpty(){
/*
 * 空欄があった場合はアラートを表示する。
 */
        var empty_string = ''
        for each(var element in document.input_form){
        if('text' == element.type && '' == element.value){
        switch(element.name){
            case 'name':
                empty_string += '「お名前」の欄が入力されていません。';
                break;
            case 'name_kana':
                empty_string += '「カタカナ」の欄が入力されていません。';
                break;
            case 'mail':
                empty_string += '「メールアドレス」の欄が入力されていません。';
                break;
            case 'tel':
                empty_string += '「電話番号」の欄が入力されていません。';
                break;
            case 'postcode':
                empty_string += '「郵便番号」の欄が入力されていません。';
                break;
            case 'state':
                empty_string += '「都道府県」の欄が入力されていません。';
                break;
            case 'city':
                empty_string += '「市区町村」の欄が入力されていません。';
                break;
            case 'addr':
                empty_string += '「市区町村」の欄が入力されていません。';
                break;
            }

            if(0 > empty_string.length && ('addr' != element.name || 'member_num' != element.name){
                enpty_string += '\n';
            }
        }
        if(0 > empty_string.length){
            alert(empty_string);
            return false;
        } else {
      return true;
      }
  }
}
自分なりには
「後から変更があったとしてもコードの編集する量を最小限に抑えれないか」
と考えてこのコードを書きましたが、これとあと1つ処理の順序を変えることが可能だと思いまして、一つ目は

1. textエレメントをswitchで判別する
2. caseの中でif空欄判定をする
3. 空欄であればエラーメッセージを入れる

この処理だとテキストエレメントを取得するときのfor eachが省けて良いと思ったのですが、先に書いたとおり
「後から変更があったとしてもコードの編集する量を最小限に抑えれないか」
という個人的な観点からするとこのコードが一番なのかなと思っているのですが……。

ここで質問です。
Webのフォームに限らず、入力フォームの入力確認処理では似たような処理を書くと思いますが、皆さんはどのように書きますでしょうか、またそのように書いた理由も教えていただけると幸いです。言語は問いません。

P.S.
このソースコードはまだ実行していないため、そもそも動かないかもしれません。その部分のご指摘でも構いません。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+2

自分だったらこうしますかね。
チェックすべき項目をオブジェクトにまとめて、
項目が増えてもそこだけ追加してロジック部分は1行も弄らないで済むようにします。
(動作未確認です)

function isNotInputEmpty(){

/*
 * 空欄があった場合はアラートを表示する。
 */
  var valid_empty = {
      'name':'お名前',
      'name_kana':'カタカナ',
      'mail':'メールアドレス',
      'tel':'電話番号',
      'postcode':'郵便番号',
      'state':'都道府県',
      'city':'市区町村'
  };

  var empty_string = ''
  for each(var element in document.input_form){
    if('text' == element.type && '' == element.value && valid_empty[element.name] !== undefined){
      empty_string += '「'+valid_empty[element.name]+'」の欄が入力されていません。\n';
    }
  }

  if(0 > empty_string.length){
    alert(empty_string);
    return false;
  } else {
    return true;
  }
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2014/09/16 18:39

    FormをJavascriptで動的に作ってしまうのですね。ここまでは頭が働きませんでした。

    キャンセル

+1

html を書くときに
  <span id="label_1">名前</span><input id="field_1" ...></input>
のような規則をもうける事にするとよいです。
そのようにおけば、HTML の dom を input 要素をさがすと、その input に付随した 画面上のラベルを得る事ができるようになります。
そして input が未入力なときのエラーメッセージの生成にそのラベルを使うようにできるはずです。

このようにしていけば、HTML 上のラベル変更に追従して、エラーメッセージも変化します。

ちなみに rails の Form 生成のツールには、このような仕組みで動作しているものがあります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2014/09/16 18:36

    そういえばこのコードを書き加えるHTMLのFormを見ていて違和感があったのは、labelタグがなかったからかもしれません。
    確かにこの方法がスマートでJavascriptの得意とするところを存分に活かしているように思いました。

    キャンセル

0

本筋と関係ないですが、
if(0 > empty_string.length
empty_string.length が負になることはないのでは?

変数を定数と比較するときは、普通は「変数 関係演算子 定数」と書きます。主語→述語の順というか。
それを逆にしたから、こういう間違いが生じたのだと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2014/09/16 18:34

    本当ですね……。

    昔所属していたところでのコード規約を意識していると、こういうミスが多いので、
    やはり自然体で書いたほうがいいのかもしれません。

    (コード規約の理由としては ```if (hoge == 0) ```と書いたつもりが ```if(hoge = 0```と書いてしまい、hogeに代入されてしまうというトラブルを減らすためだそうです)

    キャンセル

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

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

関連した質問

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

  • プログラミング言語

    670questions

    プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

  • アルゴリズム

    396questions

    アルゴリズムとは、定められた目的を達成するために、プログラムの理論的な動作を定義するものです。