マラソンの練習からのブログ投稿がこれからのマイルーティンになりそう（願望）なゆすけです。
いつも長々しく導入書いているので、今日はさっぱりと本題に入ります。
GSAP便利だけど複数要素のときに沼った経験が・・・
これ、生のjavascript（Vanilla JavaScript）を使っている人からしたら何言ってんだコイツって思われることだと思いますが、僕はWEB制作自体独学で学び、しかもWordpressから入っているので最初から「jQuery」がお友達でVanilla JavaScript様をスルーして覚えてきたという経緯があります。
でも同じ方って結構多いと思うんですよね・・・。
jQueryだと指定した要素が一つでも二つ以上でも同じ記述$('.element')で、特にループを回すこともなかったので、その感覚だと沼ります。
【NG例】要素（.elements）が二つ以上の場合の書き方
見ればお分かりの通り「querySelectorAll」を使って要素を取得しているのに、ループ処理をしていない・・・。今ならそりゃ動かないだろって思うのですが、当時の僕は動かない意味がわかりませんでした。
だってjQueryなら普通に動いたんだもん( – -)::
初学者向けTips
jQueryの場合、要素を取得するときはIDでもclassでも単体でも複数でも$('')の中に#か.をつけて書けばいいという魔法のような使い方ができます。
Vanilla JavaScriptの場合、ID取得の場合はgetElementById、classの場合はquerySelector、同じclassが複数使用されいてそのすべてを取得する場合はquerySelectorAllを利用します。
【OK例】要素（.elements）が二つ以上の場合の書き方
querySelectorAllを使って複数の要素を取得し、それぞれの要素にgsapのアニメーション（scrollTriggerによる監視）を行う場合は、一括で指定するのではなく取得した要素それぞれに個別に指定する必要がああります。
とはいえ、一つ一つ個別に設定していくのは面倒だし、取得する数がわからない（動的）ので手作業で個別に記述していくのは現実的ではありません。
querySelectorAllを使って要素を取得し、constやlet、varなどで変数に入れると「NodeList」という型で返り値が帰ってきます。
配列ではなくNodeListなので、配列処理に使うような.mapではなく.forEachを使ってループ処理をします。
// ループ処理を入れることですべての要素に適用される
sectionAllay.forEach((ele,key)=>{
gsap.to(ele,{
backgroundColor: 'white',
scrollTrigger: {
trigger: ele,
start: 'top center',
end: 'bottom center',
markers: true
}
})
})たったこれだけのことですが、初学者にとっては沼るポイントの一つだと思います。
が、jQueryとVanilla JavaScriptの違いを知っておく、配列やNodeList（Object）に対してループ処理をする方法を知っておくと、gsap以外のライブラリを使うときでも同じように効率的なコードが書けるようになるので、どんどん覚えていきたいですね。
まとめ
まだまだVanilla JavaScriptを使うこなせているわけではないのでですが、最近Type Scriptを使う学ぶ機会があり「型」というものを意識するようになりました。
Vanilla JavaScriptを完璧にしてからType Scriptと思っている節もあったのですが、ある程度基礎知識がついたらType Scriptのdocsを見たり、実際に使ってみることでVanilla JavaScriptの知見も広がる気がします。