【JavaScript】型を意識してないと、余計な時間を使うよって話

結論：.val()で取得した値を変数に代入した数値同士を足し算する時は文字列結合されます

やりたい事

• テキストボックスAに任意の数値を入力する
• テキストボックスBにはDBからMAX(id)のデータを取得している
• テキストボックスAとテキストボックスBの値を足してテキストボックスCに出力する

参考

足し算でうまくいかないのはなぜ？
http://www.dicre.com/ols/jvs/body29.html
parseInt
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt

HTML

<table>
 <tr>
  <th>テキストボックスA(ここに任意の数字を入力)</th>
  <td><input type="number" id="inputNumber"></td>
 </tr>
 <tr>
  <th>テキストボックスB(ここにDBからMAX(id)のデータを表示)</th>
  <td><input type="number" id="getId" readonly="true"></td>
 </tr>
 <tr>
  <th>テキストボックスC(ここに計算結果を出力)</th>
  <td><input type="number" id="setValue" readonly="true"></td>
 </tr>
</table>

JS

イベントハンドラはkeyupとしてます

$(document).ready(function() {
 $("#inputNumber").keyup(function() {
  var getInputNumber = $("inputNumber").val();
  var getIdNumber = $("getId").val();
  $("#setValue").val(getInputNumber + getIdNumber);
 });
});

計算結果

var getInputNumber = 10
var getIdNumber = 20
getinputNumber + getIdnumber
→1020

!!??
文字列結合になっている...掛け算・割り算をした時には問題なく正しい計算結果を返してくれていたのに、足し算はうまくいきません

文字列には掛け算・割り算は存在しないので、暗黙の型変換が行われ、文字列を数値に変換して掛け算・割り算をしてくれますが、足し算の場合は文字列結合が当てはまってしまいます。(ご指摘頂きました。val()でテキストボックスから値を取得する場合は、基本的に文字列です。なので文字列+文字列の結果は文字列ですね…勉強になりました！)

var hoge = "私は"
var fuga = "おにぎりを食べたいです"
hoge + fuga
→"私はおにぎりを食べたいです"

この結果と同じく、先ほどの10 + 20 は文字列結合されて1020と返ってきます

parseInt関数を使いましょう

$(document).ready(function() {
 $("#inputNumber").keyup(function() {
  var getInputNumber = $("inputNumber").val();
  var getIdNumber = $("getId").val();
  $("#setValue").val(parseInt(getInputNumber) + parseInt(getIdNumber));
 });
});

parseInt関数は文字列の引数を解析して、整数と解釈して値を返してくれます

var getInputNumber = 10
→文字列"10"
var getIdNumber = 20
→文字列"20"
parseInt(getinputNumber) + parseInt(getIdnumber)
→引数を整数"10" + 整数"20"と解析して値を返してくれる
→30

これで求めていた"30"という結果を得る事ができました

まとめ

動的型付け言語(rubyやphpなど)や暗黙の型変換のおかげ(??)で、あまり型を意識せずともプログラム側がよしなにやってくれます。単純に足し算をしただけの簡単な処理を書くだけなのに、型の意識が薄く余計な時間を使ってしまったので、型を意識したプログラムを書けるようにならなければいけませんね

おわり