質問: ### 前提・実現したいこと 以下のサイトで、JavaScriptの動作がとてもステキだと思いました。 スクロールすると、グローバルメニューがふわっと大きくなったり、左から画像がでてきたりします。 こういったステキなサイトを見ると、どうやってJavaScript部分が書かれているのか見たいと思ってしまいます。 (どんな技術が必要なのかを知って、今後何を勉強したら、こんなサイトを作れるのかが知りたいのです!) 【リクルート次世代教育研究院】 https://ring.education/ ### 知りたいこと Chromeなどのデバッガツールで、どの箇所を見たら、どんなコードで動いているのかが見えるのでしょうか? HTMLで書かれている内容を見るだけなら、コードとの該当箇所が見れるのですが、JSとなるといまいちわかりません(><) 何かidやclassに紐付けられて、JSコードで書かれているのだろうなと思うのですが、何をフックにして発動し、どんな動きをするように書かれているのかが、デバッガツール上で確認できるようになりたいと思いました。 アドバイス頂ける方がいらっしゃいましたら、ご教示頂ければ幸いです。 ### 補足情報 わたしのJS知識は、ドットインストールで勉強しはじめたところくらいの知識です。 基礎をふくむ5つの講座を見、手は動かしていますが、まだ身についてはいない程度のレベルです。 これからもがんばっていきたいと思っていますので、 ぜひよろしくお願いいたしますm(_ _)m
回答: > > デバッガツール上で確認できるようになりたいと思いました。 > > > 「確認」は出来ますが、そこに書いてあるコードを理解することはかなり面倒です。 【Chrome デベロッパーツールの使い方概要 | Web Tips】 【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】 ほかの回答者さんもおっしゃるように、jQueryとそのプラグインの使い方を学習されると様々な「動き」を操れるようになります。 また、本屋で何冊か本を買って読むと今後の理解が進むと思います。とりあえず最初はわからないことのほうが多いと思いますが、そのうち腑に落ちることも多いはずなのでお勧めします。 【JavaScript 第6版 : David Flanagan, 村上 列 : 本 : Amazon.co.jp】 【絶対に読んでおきたい、JavaScriptのおすすめ書籍7冊 - Qiita】 【JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで : 山田 祥寛 : 本 : Amazon.co.jp】