if (targetNode.classList.contains('my-color'))はなぜtrueなのか教えてほしいです。

Question

解決したいこと

dotinstallでclassList を使ったレッスンをしております。
ボタンをクリックするたびに .my-colorが付いたり外れたりの動きを作っています。

containsである要素に特定のクラスが付いているかどうか調べることもでき、このクラスが付いてるかどうかを true 、 false で返してくれるというところで疑問があります。下記コードに書きましたがif文で表した時contains('my-color')で表したものは初めからtrueと決まっているのか、そのようなデフォルト仕様だと考えればいいのかご教示いただきたく存じます。

該当するソースコード

<style>
.my-color {
        background-color: aqua;
        color: red;
      }
</style>
<button>Run</button>
<h1 id = "target">文字色が変わるよ</h1>

  const button = document.querySelector('button');
  button.addEventListener('click', () => {
    const targetNode = document.getElementById('target');

   
    if (targetNode.classList.contains('my-color')) {
      targetNode.classList.remove('my-color');
    } else {
      targetNode.classList.add('my-color');
    }

button要素をクリックしてclassがついていた場合、ノードのremoveメソッドがクラスを外してくれるのでstyleで指定した色が消える。クラスが消えていた場合addメソッドでclassを追加したため色がつく。と理解はしているのですが、そもそもの真偽値はこのように決まっているのはなぜなのか。コメントいただけると幸いです

Answer 1

末尾に括弧があるのは関数呼び出し、つまり何らかの処理の呼び出しだ。
contains()の場合、実行した瞬間に、targetNodeのclassListに対し、当該の値が存在するかを実際に調べに行く。

targetNodeというのは自分でつけた名前だが、classListは「classListという名前で要素が存在する」というルールがある。
https://developer.mozilla.org/ja/docs/Web/API/Element/classList
日本国内のあらゆる自動車にナンバープレートが付いていたり、あらゆる缶ジュースにバーコードがついているのと同じだ。あらゆるHTML要素にclassListという属性が存在する（この辺のデータの組み立ては、ブラウザが行っている。<b>と書かれていたら太文字にする、とかと同じような話で、ブラウザは「そのように処理する」というルールになっている）。
containsも同じで、containsという名前でそのような（つまり、対象となったclassList内に当該データがあるか探索し、その結果を返す）処理が呼び出せる、というルールになっていて、ブラウザはその通りに実装している。

要は「HTMLをJavaScriptから操作する際のルール」がそう取り決められており、あなたの使っているブラウザーでもその通りに実装されている、という話だ。
このようなルール（DOM; Document Object Model）は、昔はW3Cが決め、今はWHATWGという組織が決めている。

Answer 2

そもそもの真偽値はこのように決まっているのはなぜなのか。

「そう決まっている」以上の回答が必要なのでしょうか？

Comments

[maisumakun]

https://dom.spec.whatwg.org/#interface-domtokenlist

[maisumakun]

逆質問になりますが、true/false以外で「どんな値を返す」と想像したのでしょうか？

[nyanchuu]

targetNode.classList.contains('my-color')←containsの()の中は=trueであると解釈していいのか。と聞きたかったわけです。真偽値はtrue/fals返の値が返るのですが、ここでの()内がtrueである理由がよくわからなかったので、質問しました。

[maisumakun]

> ここでの()内がtrueである理由がよくわからなかったので

その解釈は成立しません。関数の引数と返り値は、必ず同じでならなければならないものではありません。

[maisumakun]

「contains('my-color')」全体でtrueという値を返すもので、カッコの中だけ考えても何の意味もありません。

[nyanchuu]

>関数の引数と返り値は、必ず同じでならなければならないものではありません
contains() = trueの解釈ではないのですね。

コメントありがとうございます。

[maisumakun]

> contains() = trueの解釈ではないのですね。

どういう意味でしょうか？contains()の結果はtrueです。

[nyanchuu]

とんちんかんな質問に親身にご回答くださいましてありがとうございました。躓いているところをどう伝えればいいのか、悩みました。何度か解いて分かってきたことは

一度目のボタンクリックではクラスが付与されていない状態(false)になるのでelse文が実行されクラスリストから'my-colorが'追加されていた。my-color'は付与され、スタイルが適用されるとtrueになるので
'my-color'をリストから削除してという処理がされたのだと理解しました。

ありがとうございます。