スクロールアニメーションのコードを理解したい。

Question

前提

JSを学習中です。以下のスクロールアニメーションを学んでいます。
私の解釈で間違っていないか、また間違っている部分を教えてほしいです。

//要素を取得
const scrollElements = document.querySelectorAll(".js-scroll");


//定数elementInViewに関数を代入。引数からel要素を取得し、ビューポートから取得した要素の真上までの長さを定数elementTopに入れる。
const elementInView = (el, dividend = 1) => {
 const elementTop = el.getBoundingClientRect().top;

//ウィンドウの高さ、またはドキュメントの高さをdividend（デフォルト値は1）で割った数値を出し、elememntTopがその数値以下ならそれを戻り値とする。
 return (elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend);
};


//定数elementOutofViewに関数を代入。引数からel要素を取得し、ビューポートから取得した要素の真上までの長さを定数elementTopに入れる。
const elementOutofView = (el) => {
 const elementTop = el.getBoundingClientRect().top;

//elementTopよりウィンドウの高さ、またはドキュメントの高さが大きいならそれを戻り値とする。
 return (elementTop > (window.innerHeight || document.documentElement.clientHeight));
};

//この関数が実行された場合、el要素にscrolledクラスを追加する
const displayScrollElement = (element) => {
 element.classList.add("scrolled");
};


//この関数が実行された場合、el要素からscrolledクラスを外す
const hideScrollElement = (element) => {
 element.classList.remove("scrolled");
};


const handleScrollAnimation = () => {
//scrollElementsの各要素に対して、if文を実行する
 scrollElements.forEach((el) => {
//el要素の上部がelementInView(el, 1.25)以下の場合、関数displayScrollElementを実行する
   if (elementInView(el, 1.25)) {
     displayScrollElement(el);
//もしel要素の上部がel要素より小さい場合、関数hideScrollElementを実行する
   } else if (elementOutofView(el)) {
     hideScrollElement(el)
   }
 })
}

//スクロールした場合、handleScrollAnimation関数を実行する
window.addEventListener("scroll", () => { 
 handleScrollAnimation();
});

実現したいこと

コードを完全に理解できるようになりたいです。

該当のソースコード

const scrollElements = document.querySelectorAll(".js-scroll");

const elementInView = (el, dividend = 1) => {
 const elementTop = el.getBoundingClientRect().top;

 return (elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend);
};

const elementOutofView = (el) => {
 const elementTop = el.getBoundingClientRect().top;

 return (elementTop > (window.innerHeight || document.documentElement.clientHeight));
};

const displayScrollElement = (element) => {
 element.classList.add("scrolled");
};

const hideScrollElement = (element) => {
 element.classList.remove("scrolled");
};

const handleScrollAnimation = () => {
 scrollElements.forEach((el) => {
   if (elementInView(el, 1.25)) {
     displayScrollElement(el);
   } else if (elementOutofView(el)) {
     hideScrollElement(el)
   }
 })
}

window.addEventListener("scroll", () => { 
 handleScrollAnimation();
});

Comments

[Cocode]

質問とは関係なくて恐縮ですが、JavaScriptのコードは

```javascript
ここにかく
```

と言うふうにしてあげると、他の方が見やすくてとても助かると思いますー！

同様にhtmlを書く場合は

```html
ここにかく
```

とします。cssなら名前のところにcssとかく。色々な言語対応しています！便利！

[lattesaurus]

分かりました。訂正してみます。ありがとうございます！

[Cocode]

訂正お疲れ様ですありがとうございます。
ちなみにJavaScriptこコメントは行頭にスラッシュ2本です！！

// コメントをかく

なのでそう書いた方がよかったかもしれませんね。
今のところはまぁいいでしょう！
誰か他の方に指摘されたら修正してください…！

---

> ウィンドウの高さ、またはドキュメントの高さをdividend（デフォルト値は1）で割った数値を出し、
> elememntTopがその数値以下ならそれを戻り値とする。

これってどう言う意味でしょうー？計算した数値を戻り値にするという意味でしょうか？
正解は「true か false を戻す」なんですが。

[lattesaurus]

ご指摘ありがとうございます！

スラッシュ、修正します。

---

> ウィンドウの高さ、またはドキュメントの高さをdividend（デフォルト値は1）で割った数値を出し、
> elememntTopがその数値以下ならそれを戻り値とする。

trueかfalseを戻すのですね。
計算した数値を戻り値とするのだと思っていました。
スクリーンの一番上～スクロール対象の要素までの長さが、下の計算値に一致（true）した時、displayScrollElement関数を実行するということですね。
```javascript
return (elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend);
```
この関数に当てはまらない場合は、else if文に該当するかチェックし、当てはまる場合は要素を隠すということであっていますでしょうか？
```javascript
if (elementInView(el, 1.25)) {
displayScrollElement(el);
} else if (elementOutofView(el)) {
hideScrollElement(el)
```

[Cocode]

> スクリーンの一番上～スクロール対象の要素までの長さが、下の計算値に一致（true）した時、

は、はずれですーーーー！笑
「スクロール対象の上辺のY座標が、計算値より小さいまたは同じときにtrue、大きい時はfalse」を戻します。ちょっとここだと説明しにくいので、回答を投稿しますね。

Answer 1

コメント欄でのやりとりが難しくなってきたのでこちらに記載します。

私が気づいた問題点

// ウィンドウの高さ、またはドキュメントの高さをdividend（デフォルト値は1）で割った数値を出し、
// elememntTopがその数値以下ならそれを戻り値とする。
  return (elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend);
};

この部分ですが、質問者様は2つの解釈をされていました。

ウィンドウの高さ、またはドキュメントの高さをdividend（デフォルト値は1）で割った数値を出し、elememntTopがその数値以下ならそれを戻り値とする。

スクリーンの一番上～スクロール対象の要素までの長さが、下の計算値に一致（true）した時、

残念ながらどちらも不正解で、「スクリーンの一番上～スクロール対象の要素までの長さ」を短く「対象要素の上側Y座標」と表現しますと、

「対象要素の上側Y座標が、計算値より小さいまたは同じ時true、大きいときfalseを戻す」 です！

多分この記述方法見慣れてないと思うので説明します。

function isSmallerOrEqual(elementTop, dividendVal) { // 対象要素上側Y座標、計算値
	if (elementTop <= dividendVal) { // elementTopがdividendValより小さい、または同じ
  	return true;
  } else { // それ以外（elementTopの方が大きい等）
  	return false;
  }
}
isSmallerOrEqual(900, 1000); // true
isSmallerOrEqual(1000, 1000); // true
isSmallerOrEqual(1001, 1000); // false

見慣れたif文でコードを見ると、理解しやすいのではないでしょうか？
でもこのif分実はとーっても間抜けなことをしていまして…

if (elementTop <= dividendVal)ここの部分って、条件に合っていたらtrue、合っていなかったらfalseを戻すので、if文がちゃんと条件分岐してくれるんですよね？
ということはですよ、ifの( )の中身だけreturnすればtrue/false戻せるじゃん？ってことです。

それを普通の関数とconstに入れてアロー関数で描くとこうなります。

function isSmallerOrEqual(elementTop, dividendVal) {
  return elementTop <= dividendVal;
}

const isSmallerOrEqual = (elementTop, dividendVal) => elementTop <= dividendVal;

めちゃくちゃスリムでスマートですね。

コメント欄での質問への回答

この関数に当てはまらない場合は、else if文に該当するかチェックし、当てはまる場合は要素を隠すということであっていますでしょうか？

この部分のコードですね

const handleScrollAnimation = () => {
  scrollElements.forEach((el) => {
    if (elementInView(el, 1.25)) {
      displayScrollElement(el);
    } else if (elementOutofView(el)) {
      hideScrollElement(el)
    }
  })
}

おっしゃる通り？で、

• ifのelementInView()関数がtrueなら→displayScrollElement(el)を実行（表示する）
  • falseなら→else ifへ
• else ifのelementOutofView()関数がtrueなら→hideScrollElement(el)を実行（隠す）

です！

---

もし、elementOutofView関数で行われているreturnの計算式が、elementInViewのreturnの計算式とまったく同じ場合は、else if 文とelementOutofView関数を削除し、else文にすることができますでしょうか？

これってつまり関数を2つ作る意味がなくて、どちらか一方の関数しか存在しない状態だと思います。
例えば、elementOutView()を削除してelementInView()関数しか存在しない場合、else ifは不要で、elseのみで対応しますよね。
ですのでご質問の回答も「Yes」だと思います。
（違ってたらごめんなさい。頭こんがらがってきちゃった）

Comments

[lattesaurus]

解説してくださりありがとうございます！

>>「対象要素の上側Y座標が、計算値より小さいまたは同じ時true、大きいときfalseを戻す」

理解できました！
確かにif文で見てみると分かりやすいですね。

>>if (elementTop <= dividendVal)ここの部分って、条件に合っていたらtrue、合っていなかったらfalseを戻すので、if文がちゃんと条件分岐してくれるんですよね？
>>ということはですよ、ifの( )の中身だけreturnすればtrue/false戻せるじゃん？ってことです。

Cocodeさんが書いてくれたif文の場合、elseを消しても問題ないことは分かりました。

もし、elementOutofView関数で行われているreturnの計算式が、elementInViewのreturnの計算式とまったく同じ場合は、else if 文とelementOutofView関数を削除し、else文にすることができますでしょうか？

```javascript
else if (elementOutofView(el)) {
hideScrollElement(el)
}
```

↓

```javascript
else { hideScrollElement(el) }
```

[Cocode]

質問にお答えするため回答を更新しました！

[lattesaurus]

ご回答ありがとうございます。
こんがらがせてしまってすみません。汗

とても分かりやすく説明してくださったおかげで、コードを理解することができました。
ありがとうございます！

[Cocode]

お役に立ててよかったですー！