ガイドターゲティング：複数エレメントがあった場合に最初に見えたエレメントをターゲットする

メモシリーズ：

下記記事の補足
ガイドターゲティング：複数同じエレメントがあった場合、指定のエレメントをターゲットする方法

アプリ上同じ要素が複数あり、今画面内に見えてるのもの(見えてる中で①番目要素)に対してターゲットしたい場合の発掘方法

//要素郡とってくる
const elements = document.querySelectorAll('#likebtn');

//ブラウザ上表示されているものを探す
for (let i = 0; i < elements.length; i++) {
    const element = elements[i]
    const rect = element.getBoundingClientRect()
    if (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    ) {
        //見えてるものの最初の要素にカスタム属性追加する
        //step 2でターゲットする
        element.setAttribute('firstVisible', 'yes')
        console.log(i)
        //loop抜ける
        break
    }