【html & jQuery】配列とstring型の比較ができない

Question

#分からないこと
htmlの配列データに対してtextContentを用いて取得した値を、String型の配列と比較していますが、値が一致しているはずなのにtrueになってくれません。

分かりづらいと思うので例を示します

<div class= content>
  <a class= content__letter>a</a>
</div>
<div class= content>
  <a class= content__letter>b</a>
</div>
<div class= content>
  <a class= content__letter>1</a>
</div>
<div class= content>
  <a class= content__letter>2</a>
</div>

function comparison(letter){
  const array = ["a", "c", "1", "3"]
  var result = ""

  if (array.includes(letter)){
    result = letter
  }
  
  return result
}
function main_function(){
  var letter
  $(".content__letter").each(function (i, element){
    letter = element.textContent
    result = comparison(letter)
    console.log(result)
  }
}

jQueryのmain_functionが呼び出された時の動作として、ブラウザのコンソールにすべてresult=""のまま表示がなされます。

これはfunctionのcomparison中のif文の条件が常にfalseとなっていることから発生しています・
letterの中には、arrayに含まれる"a"や"1"があるにも関わらず、すべてfalseとなるのは、なぜでしょうか？

#仮説と検証
##変数の型が一致していない？
$.type()にて変数letterとarrayの要素の一部の型を調べました。
どちらもstringとなっていました。

##実際に文字列と比較できる？

console.log(letter == "a")
```を記述しました。
結果、eachの繰り返し中すべてfalseでした。

console.log(letter == "1")

ただし

console.log(letter == １)

string型となっていたのになぜ？
配列の値を数字に数字の比較はできそうです。
が、アルファベットの方も比較したいので原因はまだ追求する必要があります。

textContentで取得した値は何か特殊な型となるのでしょうか？
もしくは、代替案ございましたら教えていただけると幸いです。

よろしくお願いいたします。

#その他
##開発環境
- OS macOS Catalina (10.15.4)
- VScode (1.45)
##言語・gemのバージョン
- ruby 2.5.1p57
- rails (5.2.4.2)
- haml (5.1.2)
- haml-rails (2.0.1)
- mysql2 (0.5.3)
- sass (3.7.4)
- sass-rails (5.1.0)
- jquery-rails (4.4.0)
##ソースファイル

$(function () {
function chord_display_relative(letter) {
// 略
}

//これがeach文の中で呼び出される関数です
function chord_display_absolute(key, letter, last_letter) {

if (/#|b|m/.test(key)) {
  minor_flag = 1;
  key = key.replace("m", "");
}

const absolute_note_other_array = [
  "Ab",
  "A#",
  "B#",
  "Cb",
  "D#",
  "E#",
  "Fb",
  "Gb",
];
var key_index = absolute_note_other_array.indexOf(key);
if (key_index == 0) {
  key = "G#";
} else if (key_index == 1) {
  key = "Bb";
} else if (key_index == 2) {
  key = "C";
} else if (key_index == 3) {
  key = "B";
} else if (key_index == 4) {
  key = "Eb";
} else if (key_index == 5) {
  key = "F";
} else if (key_index == 6) {
  key = "E";
} else if (key_index == 7) {
  key = "F#";
}
const absolute_note_array = [
  "G",
  "G#",
  "A",
  "Bb",
  "B",
  "C",
  "C#",
  "D",
  "Eb",
  "E",
  "F",
  "F#",
  "G",
  "G#",
  "A",
  "Bb",
  "B",
  "C",
  "C#",
  "D",
  "Eb",
  "E",
  "F",
  "F#",
];

key_index = absolute_note_array.indexOf(key);

　　//const以下で定義されている配列が例のコードのarrayにあたります。
const relative_note_array1 = ["1", "2", "3"];
const relative_note_array2 = ["4", "5", "6", "7"];

var changed_index;

const symbol_should_not_changed = ["|", "m", "{", "}", "@", "$", "t"];

const half_note_array = ["B", "b"];
var previous_index;
var previous_note;

var delete_flag = 0;
changed_index = 0;

　　
// 問題のif文
if (symbol_should_not_changed.includes(letter)) {
} else if (relative_note_array1.includes(letter)) {
changed_index = key_index + (letter * 2 - 2);
letter = absolute_note_array[changed_index];
} else if (relative_note_array2.includes(letter)) {
changed_index = key_index + (letter * 2 - 3);
letter = absolute_note_array[changed_index];
} else if (half_note_array.includes(letter)) {
previous_index = absolute_note_array.indexOf(last_letter);
delete_flag = 1;
if (letter == "B") previous_index = previous_index + 1;
if (letter == "b") previous_index = previous_index - 1;
if (previous_index == -1) {
previous_index = absolute_note_array.length - 1;
letter = absolute_note_array[previous_index];
}
} else {
letter = "";
}

var output = new Object();
output.letter = letter;
output.delete_flag = delete_flag;
return output;

}

//問題のメイン関数
function chord_display(key) {
var chord_text = $(".chord-display--text").text();

$(".chord_text__chord_letter").each(function (i, element) {
  var letter = $(".chord_text__chord_letter")[i].textContent;

  var last_letter;
  if (i == 0) {
    last_letter = "";
  } else if (i > 0) {
    last_letter = $(".chord_text__chord_letter")[i - 1];
  }

  var letter = element;

  letter = letter.textContent;
  console.log(letter);

  var output;
  if (
    $(".key__key-display--relative-key").attr("style") == "display: flex;"
  ) {
    output = chord_display_relative(letter);
  } else if (
    $(".key__key-display--relative-key").attr("style") == "display: none;"
  ) {
    output = chord_display_absolute(key, letter, last_letter);
  } else {
    output = chord_display_absolute(key, letter, last_letter);
  }
  $(".chord_text__chord_letter")[i].textContent = output.letter;
});

}

続きは以下。ここから下で発火していますが、今回は余り関係がありません。
```rails

  function absolute_key(note_selected, key_now_state) {
    const symbols = ["#", "b"];
    if (symbols.includes(note_selected)) {
      if (/#|b|m/.test(key_now_state)) {
        key_now_state = key_now_state.slice(0, 8);
      }
      $(".key__key-display--now").text(key_now_state + note_selected);
    } else if (note_selected == "m") {
      if (/m/.test(key_now_state)) {
      } else {
        $(".key__key-display--now").text(key_now_state + note_selected);
      }
    } else {
      $(".key__key-display--now").text("key of " + note_selected);
    }
  }

  $(".key__key-display").on("touchend mouseup", function () {
    $(".chord-menu__key--palettes").show();
  });

  // 発火点
  $(".palettes__palette").on("touchend mouseup", function () {
    var note_selected = $.trim($(this).text());
    var key_now_state = $(".key__key-display--now").text();
    key_now_state = $.trim(key_now_state);
    if (note_selected == "閉じる") {
      $(".chord-menu__key--palettes").removeAttr("style");
    } else {
      if (note_selected == "移動ド") {
        $(".key__key-display--relative-key").css("display", "flex");
        key_for_registration("relative-key");
      } else {
        $(".key__key-display--relative-key").hide();
        absolute_key(note_selected, key_now_state);
        key_now_state = $(".key__key-display--now").text();

        key_for_registration(key_now_state);
      }
      chord_display(key_now_state);
    }
  });
  // 発火点２
  // ページ読み込み時の挙動
  $(document).ready(function () {
    var key_now_state = $(".key__key-display--now").text();
    key_now_state = $.trim(key_now_state);
    // absolute_key(note_selected, key_now_state);
    chord_display(key_now_state);
    key_for_registration(key_now_state);
  });

  function key_for_registration(key_now_state) {
    if ($("#key_name").get(0) != undefined) {
      $("#key_name").val(key_now_state);
    }
  }
});

.content__chord
  - @song.chords.each do |chord|
    - chord_array = chord.text.split(//)
    .chord_text
      - chord_array.each do |char|
        %a.font_base.chord_text__chord_letter{value: char}
          =char

↓変換後

<!-- each文で表示される例。 -->
<div class="chord_text">
  <a class="font_base chord_text__chord_letter" value="1">1</a>
  <a class="font_base chord_text__chord_letter" value="#">#</a>
  <a class="font_base chord_text__chord_letter" value="3">3</a>
  <a class="font_base chord_text__chord_letter" value="b">b</a>
</div>

他に必要な情報があれば教えて下さい。

Comments

[kei344]

https://jsfiddle.net/89zxy42m/ 特に問題が再現しません。（エラーが起きるので閉じ括弧はつけましたが）

[shota-imoto]

テストありがとうございます。

明日、もう一度元のソースを確認します。
今回、ターゲットと思っていたところと別のところに問題がありそうですね。

また、今回は説明ように簡単なモデルを作成しましたが、実際にテストするのも、問題解決に役立ちそうですね。勉強になります。

[shota-imoto]

textContentを行った段階で謎のスペースが生じていました。
具体的には
a class="font_base chord_text__chord_letter" value="1">1</a>
のときは取得値は"1 "
trim()でカットしたらtrueが返ってくるようになりました。
html上はスペースなどなかったので、なぜ紛れ込んだのかは謎です。

ご対応ありがとうございました♪

[shota-imoto]

取得値、再度確認したら
"
1 "
と改行が入っていました。

[kei344]

どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

Answer 1

textContentを行った段階で謎のスペースが生じていました。
具体的には
a class="font_base chord_text__chord_letter" value="1">1</a>
のときは取得値は" (改行)1 "
trim()でカットしたらtrueが返ってくるようになりました。
html上はスペースなどなかったので、なぜ紛れ込んだのかは謎です。

簡易のコードを作って動作を確かめていただいたところスペースは発生せず動作しました。