要素のテキストとカスタム属性の使い分け

Question

###実現したいこと
ビデオプレイヤーのオリジナルUIを作っております。
再生速度を変更するボタンの実装なのですが、要素のテキストを使うか、カスタム属性を使うかで地味に悩んでいます。
どちらのコードが速度などで最適でしょうか？
この他にも最適解がございましたら、ご教示ください。

コード

<div class="player">
  ︙
  <video src="../img/movie1.mp4" class="player__video" id="video-src" preload="auto"></video>
  ︙
  <button class="video-speed-btn" data-video-speed="0.5">0.5</button>
  <button class="video-speed-btn" data-video-speed="0.75">0.75</button>
  <button class="video-speed-btn" data-video-speed="1.0">1</button>
  <button class="video-speed-btn" data-video-speed="1.25">1.25</button>
  <button class="video-speed-btn" data-video-speed="1.5">1.5</button>
</div>

const
  video = document.getElementById('video-src'), 
  videoSpeedBtn = document.getElementsByClassName('video-speed-btn');
  ︙

####JavaScript 例１

for (let i = 0, len = videoSpeedBtn.length; i < len; i++) {
  videoSpeedBtn[i].addEventListener('click', () => {
    video.playbackRate = videoSpeedBtn[i].dataset.videoSpeed;
  }, false);
}

####JavaScript 例２

for (let i = 0, len = videoSpeedBtn.length; i < len; i++) {
  videoSpeedBtn[i].addEventListener('click', () => {
    video.playbackRate = videoSpeedBtn[i].textContent;
  }, false);
}

Comments

[m.ts10806]

タイトルは質問内容が把握しやすい内容にしてください。またどちらのコードも問題なく、同様の結果が想定通り得られているということで良いでしょうか

[Tubuanpan]

タイトル修正いたしました。同様の結果が想定通り得られているという事で問題ないです。

Answer 1

すでにベストアンサーがでてしまっているようですが、質問文の2択ではカスタム属性がよいと考えます。
もし使い捨ての短いコードだったら要素のテキストでもよいと思います。

まず、速度については100ミリ秒以内のレスポンスであれば問題ありません。
おそらくどちらの方法をとっても1ミリ秒の違いも無いくらいではないかと思います。

速度以外に何を重視するかといえば、開発のしやすさです。
CSSのclass名(BEM)から察するにある程度の保守性を必要としているのではないかと思います。
要素のテキストはユーザの目に見えるものであるため外的要因による仕様変更の影響を受けやすくなっています。
例2は見た目の仕様変更があった場合、内部ロジックはその影響をダイレクトに受けることになってしまいます。

たとえば、ボタンに表示される文字列が「0.5」「1.0」「2.0」となっているのが見づらいと不評だったので「x0.5 ????」「x1.0 ????」「x2.0 ????」という表示に変えたくなったとします。

例2の場合であればJavaScriptコードを大幅に修正する必要があります。
結局は例1のような形にする必要がありますが、場合によってはすでに開発したデータベース側の都合で一筋縄ではいかない…といったことも考えられます。
一方、例1の場合であればHTMLコードを書き換えるだけで済みます。

Comments

[Tubuanpan]

回答ありがとうございます。具体的な説明とても分かり易かったです。
自分で速度計測してみましたが、確かにほとんど差はありませんでした。
保守性を考えて例１を採用することにしました。

Answer 2

最適

私はこの手の質問で「結果」だけを追い求める事に意味はないと思います。
通常は「目的」があって、その目的が適う「最適解」を選びます。
しかし、この質問ではその目的が曖昧です。

再生速度を変更するボタンの実装なのですが、要素のテキストを使うか、カスタム属性を使うかで地味に悩んでいます。
どちらのコードが速度などで最適でしょうか？

速度などとは何ですか。
あなたが求める「最適」とは？
速度を求めるなら、element.click() してから処理完了までの時間を計測すればいいのでは？
両者にある性質をリストアップし、それらから最適解を導き出すことをしてみましたか。

前回の質問

正直なところ、前回の質問の回答で私は答えになっています。
最適か否かは別にして、私はどちらのコードも採用しません。

• JavaScript - このコードをswitch文を使って置き換えることは出来ますか？(125789)｜teratail

block scopeに辿り着いた理由も気になるところですが、どういう理由でそちらが「最適」だと判断したのでしょうか。

Re: Tubuanpan さん

Comments

[Tubuanpan]

回答ありがとうございます。
「速度など」と分かりにくく書いてしまいすいません。どちらが動作速度が早いかを知りたかったのですが、動作速度の計測は非常に手間がかかるものだと思っておりました。以外に簡単にできるようなので自分で計測してきます。
次に質問するときは、明確な目的を示し、わかりにくくならないよう気をつけます。本当にありがとうございました。