【JavaScript】xxx.split is not a function というエラーが発生していた←記載内容が間違っていました

記載内容に間違いがありました。

xxx.split is not a function

というエラーが発生していると記載していましたが、
修正前の状態に戻し再確認を行ったところ、エラーは発生しませんでした。
ロジックだけでは無く、データもエラーが発生していた時と同じにしましたが、
再現出来なくなっていました。

また、チェックボックスから取得した値の型がどうなってるをtypeof 型を確認したい変数で確認したところ、
string
になっていました。

sample3

$("input[type='checkbox']").click(function() {
  //チェックしたチェックボックスの値を取得
  var v = $(this).val();
  //チェックボックスの値の型を確認するために追記した箇所です。
  console.log("v=" + v + " type=" + typeof v);
  // userLsitが空っぽだったらvを入れて、userListに何らかの値が入ってたらカンマ区切りで結合
  // 実際のコードは、ココでチェックされた値だけをuserListに入れるって処理も記述されています。
  if (userList.length > 0) {
    userList = userList + "," + v;
  } else {
    userList = v;
  }
};

間違った記事を指摘して頂き有難うございました。
指摘がなければチェックボックスの値がNumberになる事があると、間違った認識を持ち続けることになっていました。

今後の対応

修正前の状態に戻し、定期的にエラーが発生していないか確認を行い、
再度エラーが発生する事があれば、調査と修正を行い、この記事の更新を行います。

今回の間違いで学んだこと

1. もっと調べる
2. ログの出力などを行い、確認を十分に行う
3. チェックボックスの値はNumberにはならない
4. シンタックスハイライト・書き方は意識して分かりやすいように書く

ココから下は間違いを含む記事です

概要

4年くらい前に作られたhtmlを見てたら
xxx.split is not a function
というエラーが発生していたので調査と修正を行いました。
その備忘録です。

原因

エラーが発生していた箇所は下記のような記述になっていた。

var userNo = userList.split(",");

userListには、チェックしたチェックボックスの値がカンマ区切りで保存される。

sample1

$("input[type='checkbox']").click(function() {
  //チェックしたチェックボックスの値を取得
  var v = $(this).val();
  // userLsitが空っぽだったらvを入れて、userListに何らかの値が入ってたらカンマ区切りで結合
  if (userList.length > 0) {
    userList = userList + "," + v;
  } else {
    userList = v;
  }
};

チェックボックスは複数存在していて、値は1,2,3・・・みたいな数値が割り当てられていた。

例えば、値が「1」のチェックボックスを初めて押下すると、userListには「1」が保存され、
次に値が「2」のチェックボックスを押下すると、userListには「1,2」が保存される仕組み。
エラーが発生していた箇所　『　var userNo = userList.split(",");　』　は、チェックボックスが押下されると
呼ばれる仕組みになっていた。
実際のコードとは少し違いますが、下記みたいな感じ。

sample2

$("input[type='checkbox']").click(function() {
  //チェックしたチェックボックスの値を取得
  var v = $(this).val();
  // userLsitが空っぽだったらvを入れて、userListに何らかの値が入ってたらカンマ区切りで結合
  if (userList.length > 0) {
    userList = userList + "," + v;
  } else {
    userList = v;
  }
  //！！！エラーが発生していた記述！！！
  var userNo = userList.split(",");
};

初めて押下した時は、userListの値が「1」みたいにカンマ区切りでは無い値が入ってるため
userListに入ってる値がNumber型と判定されて、
userList.split is not a function
のようなエラーが発生していました。
この状態で、さらにチェックボックスを押下すると、userListの値は「1,2」みたいになるため、
エラーは出ずに正常な処理が行われていた。

いつから？

このhtmlが作られた時は発生して無かったはず。
もしかしたらテスト漏れだったのかもしれませんが・・・

チェックが厳密になった？

構文のチェックが厳密になったのかな？と思って調べてみたけど分かりませんでした。
やっぱりテストが不十分だったのかな。

修正方法

エラーが発生していた箇所を下記のように変更しました。

var userNo = (String(userList)).split(",");

『 userList = String(v); 』にした方が良かった・・・。