開発者ツールでのJSの参考方法

Question

実現したいこと

開発者ツールでのJSの参考の仕方がわかりません。。。。

発生している問題・分からないこと

https://www.opera-net.jp/special/2024oct/

上のモバイルファーストサイトサイトを参考に制作をしております。
HTMLやCSSは理解できたのですが、JSのどの部分を参考にするべきかわかりません。

例えば、ハンバーガーメニューの開閉（クリックイベント）の指示の仕方など。
私の今の知識だと、class名を追加してCSSで制御するような書き方の認識だったため、参考サイトのJSのコードを確認したときどこからどこをコピーするべきかわかりませんでした。

参考するファイルは以下のファイルで間違い無いのでしょうか。

<script src="https://www.opera-net.jp/_wpcms/wp-content/themes/opera/asset/js/__v-dist.js?v3.0.0.0?678749978e892"></script>

何かライブラリなどを導入しているのかななどと不安になりました。
恐れ入りますがご教授いただけますと幸いです、

該当のソースコード

w = parseFloat(o.defaultTransformPerspective) || 0;
                if (bt ? a = G(t, Tt, e, !0) : t.currentStyle && (a = (a = t.currentStyle.filter.match(D)) && 4 === a.length ? [a[0].substr(4), Number(a[2].substr(4)), Number(a[1].substr(4)), a[3].substr(4), g.x || 0, g.y || 0].join(",") : ""), s = !a || "none" === a || "matrix(1, 0, 0, 1, 0, 0)" === a, g.svg = !!(Pt && "function" == typeof t.getBBox && t.getCTM && (!t.parentNode || t.parentNode.getBBox && t.parentNode.getCTM)), g.svg && (Et(t, G(t, St, r, !1, "50% 50%") + "", g), xt = o.useSVGTransformAttr || Dt, l = t.getAttribute("transform"), s && l && -1 !== l.indexOf("matrix") && (a = l, s = 0)), !s) {
                    for (u = (l = (a || "").match(/(?:\-|\b)[\d\-\.e]+\b/gi) || []).length; --u > -1;)
                        h = Number(l[u]),
                        l[u] = (c = h - (h |= 0)) ? (0 | c * y + (0 > c ? -.5 : .5)) / y + h : h;
                    if (16 === l.length) {
                        var b = l[8],
                            T = l[9],
                            S = l[10],
                            C = l[12],
                            k = l[13],
                            P = l[14];
                        g.zOrigin && (C = b * (P = -g.zOrigin) - l[12], k = T * P - l[13], P = S * P + g.zOrigin - l[14]);
                        var A,
                            R,
                            E,
                            O,
                            L,
                            M = l[0],
                            j = l[1],
                            I = l[2],
                            F = l[3],
                            q = l[4],
                            z = l[5],
                            H = l[6],
                            B = l[7],
                            X = l[11],
                            W = Math.atan2(j, z);
                        g.rotation = W * N,
                        W && (M = M * (O = Math.cos(-W)) + q * (L = Math.sin(-W)), R = j * O + z * L, z = j * -L + z * O, H = I * -L + H * O, j = R),
                        W = Math.atan2(b, M),
                        g.rotationY = W * N,
                        W && (R = j * (O = Math.cos(-W)) - T * (L = Math.sin(-W)), E = I * O - S * L, T = j * L + T * O, S = I * L + S * O, X = F * L + X * O, M = A = M * O - b * L, j = R, I = E),
                        W = Math.atan2(H, S),
                        g.rotationX = W * N,
                        W && (A = q * (O = Math.cos(-W)) + b * (L = Math.sin(-W)), R = z * O + T * L, E = H * O + S * L, b = q * -L + b * O, T = z * -L + T * O, S = H * -L + S * O, X = B * -L + X * O, q = A, z = R, H = E),
                        g.scaleX = (0 | Math.sqrt(M * M + j * j) * y + .5) / y,
                        g.scaleY = (0 | Math.sqrt(z * z + T * T) * y + .5) / y,
                        g.scaleZ = (0 | Math.sqrt(H * H + S * S) * y + .5) / y,
                        g.skewX = 0,
                        g.perspective = X ? 1 / (0 > X ? -X : X) : 0,
                        g.x = C,
                        g.y = k,
                        g.z = P
                    } else if (!(Ct && !n && l.length && g.x === l[4] && g.y === l[5] && (g.rotationX || g.rotationY) || void 0 !== g.x && "none" === G(t, "display", e))) {
                        var U = l.length >= 6,
                            Y = U ? l[0] : 1,
                            $ = l[1] || 0,
                            V = l[2] || 0,
                            Q = U ? l[3] : 1;
                        g.x = l[4] || 0,
                        g.y = l[5] || 0,
                        f = Math.sqrt(Y * Y + $ * $),
                        p = Math.sqrt(Q * Q + V * V),
                        d = Y || $ ? Math.atan2($, Y) * N : g.rotation || 0,
                        m = V || Q ? Math.atan2(V, Q) * N + d : g.skewX || 0,
                        Math.abs(m) > 90 && 270 > Math.abs(m) && (_ ? (f *= -1, m += 0 >= d ? 180 : -180, d += 0 >= d ? 180 : -180) : (p *= -1, m += 0 >= m ? 180 : -180)),
                        g.scaleX = f,
                        g.scaleY = p,
                        g.rotation = d,
                        g.skewX = m,
                        Ct && (g.rotationX = g.rotationY = g.z = 0, g.perspective = w, g.scaleZ = 1)
                    }
                    for (u in g.zOrigin = x, g)
                        v > g[u] && g[u] > -v && (g[u] = 0)
                }
                return i && (t._gsTransform = g), g
            }

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

実際に打ち込んだりして、HTML CSSの実装ができました。

補足

特になし

Answer 1

JSのどの部分を参考にするべきかわかりません。

読解に苦労するような状況であれば、実運用のサイトからJavaScriptコードをコピペするべきではありません。

反映時に変数名やコメントを取り払って最適化しているので、サイト実行に特化した、人間には読みづらいものとなっています。

自分で組み込んで使うことを前提とした、JavaScriptライブラリを探したほうがいいでしょう。

Comments

[mmmmmmy]

ご回答ありがとうございます。
おっしゃる通りでございます。
参考サイトを見ながら、少しずつ励んではおりますが、まだまだです。参考サイトはあくまでも参考として、自身で組み込んでいけるよう努力してまいります。
お忙しい中ありがとうございました。

Answer 2

開発者ツールで div.site-menu-button 要素を inspect して、「イベントリスナー」タブをクリックしてみます。"click" イベントを選択すると以下の様に表示されます。

クリックイベントの発生時に実行される JavaScript コードのトレースを確認することができますので、その内の一つを選んでクリックしてみると以下の様に該当する箇所が表示されます。

参考するファイルは以下のファイルで間違い無いのでしょうか。

__v-dist.js ではなく、__s-dist.js だと思われます。上記画像で表示されている menu.__Flag_open や menu.onOpen() なども __s-dist.js 内で定義されています。

Comments

[mmmmmmy]

お忙しい中、丁寧にご回答ありがとうございます。
いただいた内容で確認すると、画像のように実際の記述が確認できました。

初めURLのコードを見たとき、本当に人が打ったデータなのかと不安だったため、実際の内容が見れて方法を知れて安心しました。ご教授、本当にありがとうございます。参考サイトを見ながら、作りたいものを自分の力で作成していけるよう努力していきたいと思います。