classListからの操作でなぜアイコンが変わるのか

Question

前提・実現したいこと

少しわからないことがあり質問しました。
JavaScriptのclassListの仕様が知りたいです。

ボタンをクリックすると
like(1)実行前
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ons-icon--ion ion-ios-heart-outline">
like(1)実行後
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ons-icon--ion ion-ios-heart like">
のように変化していました。

そこで、ion-iconはclassから指定できるのかなと思い、
<ons-icon class="ons-icon ons-icon--ion ion-ios-heart-outline">
としてみるも何も表示されませんでした。

なぜlike(1)でアイコンは変わるのでしょうか？

該当のソースコード

function like (num) {
 if (document.getElementByID("button-post-like-"+num).classList.contains("like")) {
  document.getElementById("button-post-like-"+num).classList.remove("ion-ios-heart", "like");
  document.getElementById("button-post-like-"+num).classList.add("ion-ios-heart-outline");
 } else {
  document.getElementById("button-post-like-"+num).classList.remove("ion-ios-heart-outline");
  document.getElementById("button-post-like-"+num).classList.add("ion-ios-heart","like");
 };
};

<ons-button modifier="quiet" onclick="like(1)">
 <ons-icon id="button-post-like-1" icon="ion-ios-heart-outline"></ons-icon>
</ons-button>

<style type="text/css">
 .like {
  color: red;
 }
</style>

Comments

[mather]

like関数が文法エラーを起こすので、動いてるコードをコピーして貼り付けてください。

Answer 1

結論

classListの仕様ではなくWeb Componentsで実現しているからでした。（ソウイエバカイテアッタナー）

Monacaのアーキテクチャー

先進的なアーキテクチャー

先進的なアーキテクチャー
Onsen UIの中身は3つのレイヤーで作られています。
CSSコンポーネント: 次世代のCSSであるcssnextで実装されています。
Web Components: JavaScriptで記述されており、どんなフレームワークともお使いいただけます。

Web Componentsについては以下くらいしか理解してません。（想像大いに入っている）
0. 独自のタグをjavascriptでclassで作成可能
0. 通常のタグと同じく、属性値を変えたら即反映（なんかうまいこと(^^;)してlistenしているんでしょうな。slim.jsなのかな？

結論に至った経緯

属性変更を検知するのってMutationObserverくらいしか知らなくて、onsenui.jsを調べたけど見つからず…
下のコードで調べた時に5.icon指定無しならの動作がどうしてもしっくりこない。タグ名で検索したら何だこのソースは？→そうか、これがWeb Componentsか→あーicon属性なかったら動きそうにないなぁ　ってところまで確認しました。
var icon = （略）'<ons-icon icon="' + `this.getAttribute('icon')` + '"></ons-icon>');

 <p>1.フォトシェアアプリのコード</p>
<p>アイコン指定に関してはiconのほうが優先</p>
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ion-ios-heart-outline ons-icon--ion"></ons-icon>
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ons-icon--ion ion-ios-heart like"></ons-icon>
 </div>
 <div>
 <p>2.iconだけにしたら？</p>
 <p>表示する</p> 
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class=""></ons-icon>
<ons-icon id="button-post-like-1" icon="ion-ios-heart" class=""></ons-icon>
 </div>
 <div>
 <p>3.classでstyleを追加 </p>
 <p>色は変わるけどアイコンは変わらない</p>
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ons-icon--ion ion-ios-heart like"></ons-icon>
<ons-icon id="button-post-like-1" icon="ion-ios-heart" class="ons-icon ion-ios-heart-outline ons-icon--ion"></ons-icon>
 </div>
 <div>
 <p>4 .classを手動で変更 </p>
 <p>色は変わるけどアイコンは変わらない</p>
 <ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ion-ios-heart-outline ons-icon--ion"></ons-icon>
<ons-icon id="button-post-like-1" icon="ion-ios-heart-outline" class="ons-icon ons-icon--ion ion-ios-heart like"></ons-icon>
 </div>
 <p>5.icon指定無しなら</p>
<p>表示しない。。。なんで？</p>
<ons-icon id="button-post-like-1"  class="ons-icon ion-ios-heart-outline ons-icon--ion"></ons-icon>
<ons-icon id="button-post-like-1"  class="ons-icon ons-icon--ion ion-ios-heart like"></ons-icon>
 </div>
<!-- // onsenui.js  12280
//  _createClass(ActionSheetButtonElement, [{
//         var icon = _util2.default.createElement('<ons-icon icon="' + this.getAttribute('icon') + '"></ons-icon>'); 
-->

Comments

[Gecko]

ありがとうございました！

Answer 2

document.getElementByID("button-post-like-"+num).classList("like")) {

ではなく

document.getElementByID("button-post-like-"+num).classList.contains("like")

ではないでしょうか？

element.classList

---

…ふと思ったんですが、monacaで作っているならchromeのデバッガーで追ってないのかな？

Comments

[Gecko]

ご指摘の通りです。すみませんでした。
デバッガーで追う(一応onclickの前後のons-iconの変化は見ました)と、前述の通りclassの中身が変化していて、でもそれが原因でiconが変わったとも言い切れず、分からないので質問しました。

[oikashinoa]

like()以外で書き換わっているとか？ソース全体が無いのでよく分かりません。

like()にブレークポイント置いてステップ実行で見ていけばすぐ解ると思いますよ。

[Gecko]

なるほど。
試してみます。
追記:
このコード自体は、monacaの「フォトシェアアプリ デザインテンプレート」の一部です。すべて載せると大変なコード量になるので、お手数ですがすべてのコードについてはそちらを参考にして頂けると有り難いです。

[Gecko]

ステップ実行とやら試してみましたがよく分かりませんでした(どこがどう置き換わったかは分かるのですが、なぜそこが置き換わってアイコンが変わるのかが分かりません)。
仕方ないのでonsenuiのons-icon.jsを理解しようとしましたが、難しくてよく分かりませんでした。
御多忙とは思いますが、oikashinoaさんの方でons-icon.jsをみていただけないでしょうか？無理を言ってすみません。
ons-icon.jsのmonacaでのディレクトリは
www/lib/onsenui/esm/elements/ons-icon.js　です。
どうかよろしくお願いします。

[oikashinoa]

2018/07/07 00:57 に対して書いたことです

…参考にしたものとかは書いてくださいね。（患者が電話で「お腹が痛いんで診察して下さい。でも体見せるの恥ずかしいから電話でおねがいします」って言われている医者ようなもんです）

ion-iconってなんでしょ？「フォトシェアアプリ デザインテンプレート」でコード見たんですがどこにもみあたらず。
---
そこで、ion-iconはclassから指定できるのかなと思い、
<ons-icon class="ons-icon ons-icon--ion ion-ios-heart-outline">
---

[Gecko]

すみません。"one-iconのicon"の誤りです。

参考にした箇所は当該テンプレートの
like関数: index.html 73~86行目
ボタン及びアイコン: index.html 157行目
です。
お手数おかけしてすみません。

Answer 3

https://ja.onsen.io/v1/reference/ons-icon.html

こちらを見る限り、質問の内容では省略されている icon="..." の部分が重要なようです。
質問をするときには自分の気になっている部分だけではなくそのまま記載してください。

Comments

[Gecko]

申し訳ないです。
icon="~"の中身ですが、htmlのコードとまったく同じものです。