なんだか、ここ2週間体調がすぐれない。

精神的な面では大丈夫なのだが、お腹をずっと下しっぱなし、そして左のまぶたが痙攣しっぱなしなのである。

他人のお腹事情などどうでも良いハナシだろうだが、僕はどちらかというとお腹は丈夫な方で、滅多なことでは下したりしない。

しかも、元々の便秘体質に加えて、常用している精神薬の副作用でさらに出にくくなっているのである。

なのに、である。

2週間も続くと、さすがにしんどい。

脱水症状も伴って、ダウン寸前である。

と、いう訳で、今朝病院に行って胃腸科の先生に診てもらってきた。

なんだか専門用語を使われてよく分からなかったのだが、要はストレスか疲れが原因で自律神経のバランスが崩れているのではないか、とのことだった。

ここ2カ月ほど、マンションを購入したり(入居はまだ先だけど)愛犬を飼いだしたり(名前は八兵衛)、いろいろ忙しくて気持ち的にはテンションが高かったんだけど、復職して半年が経ち、やっぱり体には相当の疲れが溜まってんだろうな。

あとちょっとで夏期休暇だし、もうひと踏ん張りしよう。

さて、サイト構築に話を移そう。

もう半年も前にハナシになるが、jQueryにゾッコンであることはここでも書いた。

ただ、その時は主にjQuery UIの使い勝手が良いことが主にその理由だったのだが、最近はコードの書き易さ、htmlソースからの分離という面において“スゲエ”と思うことが多々あり、これまでに自作してきた入力制御系のJavaScriptコードをjQueryにてコツコツ書き換え作業中である。

jQueryの素晴らしさに関しては筆を改めるとして、今回はJavsScriptにおける数値の取り扱いについてである。

次のような、生徒、保護者、知り合いのセレクトボックスが並んでおり、入力された人数の数値の合計を求めて合計人数のところに表示しようというものだ。

保護者:
<select name="参加人数(保護者)" id="num_parents">
  <option value="" selected="selected">↓</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
 人

生徒:
<select name="参加人数(生徒)" id="num_students">
  <option value="" selected="selected">↓</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
人

知り合い:
<select name="参加人数(知り合い)" id="num_friends">
  <option value="" selected="selected">↓</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
人

合計:<span id="sum_1">-</span>人
<input type="hidden" name="参加人数(合計)" id="sum_2" value="" />

そして、jQueryの力をお借りしてJavaScriptで以下のようなコードを書いた。

$(function() {
  var num = 'select[id^="num_"]';
  var sum = '*[id^="sum_"]';
  if ($('*').is(num) && $('*').is(sum)) {
    $(num).each(function() {
      $(this).bind('change', function() {
        var select_num = $(num);
        var val_sum = 0;
        for (i = 0; i < select_num.length; i++) {
          var val = $(select_num[i]).val();
          val = parseInt(val);
          val_sum = val_sum + val;
        }
        if (isFinite(val_sum)){
          $('#sum_1').html(val_sum);
          $('#sum_2').val(val_sum);
        } else {
          $('#sum_1').html(0);
          $('#sum_2').val(0);
        }
      });
    });
  }
});

一つ目のポイントは11行目の“parseInt()”関数。

これは、10行目で.val()で取得した値が数値型であることが自明ではないため、そのまま12行目の

val_sum = val_sum + val;

の計算をする時に、文字列の結合となってしまう。(つまり、1 + 1 = 11、となる)

従って、文字列を整数に変換するためにparseInt関数を使わなければならない。

次に、14行目の“isFinite()”関数。

この関数、元々は“与えられた値が有限数かどうかを調べる”ための関数であるが、これに関して面白い記事を見つけたので、ちょいとご紹介。

通常の数値かどうかはisNaN関数じゃなくてisFinite関数
http://d.hatena.ne.jp/sandai/20100206/p1

まあ、この記事は“JavaScript 数値 判定”でググると一発目に検索される記事なので、同じ目的でこのページを訪れた人は既にご覧になっている可能性が高いが、ポイントは、

isNaN 関数は引数を評価し、その引数が "NaN"(not a number; 非数)であるかどうかを決定します。

ということでしょう。(注意:“MOZILLA DEVELOPER NETWORK”からの孫引きです。)

つまり、not a numberであれば“true”を返すので、数値であれば“false”を返すこととなる

数値であれば“false”というのは、数値判定として使うには直感的にはちと厳しい。

安易に数値判定としてisNaN()関数を使うと痛いしっぺ返しを喰らうので注意しなければいけませんな。

と、いうワケで、数値判定にはisFinite()関数を使う方が安全である、というオハナシでした。