JavaScriptの復習⑤

はじめに

今回の記事は、ページスクロールと複数の条件を組み合わせたアニメーションについて復習します。

ページのスクロール量とは？

JavaScriptのページスクロール量とは、ユーザーがページをどれだけスクロールしたかを取得・操作することです。スクロール量を知ることで、動的なレイアウト変更や、特定の要素にスクロールさせるといったインタラクションを実装できます。

全体のコード一覧

See the Pen ページのスクロール量 by Uka Suzuki (@uukasuzuki_) on CodePen.

JavaScriptのコード解説

const getScrollPercent = () => {
  // スクロール量
  const scrolled = window.scrollY;
  // ページ全体の高さ
  const pageHeight = document.documentElement.scrollHeight;
  // 表現領域の高さ
  const viewHeight = document.documentElement.clientHeight;
  // スクロールされた割合
  const percentage = (scrolled / (pageHeight - viewHeight)) * 100;
  // プログレスバーに幅を指定
  document.querySelector("#bar").style.width = `${percentage}%`;
};

window.addEventListener("scroll", getScrollPercent);

• const getScrollPercent = () => { ... };は、ページがスクロールされた際に呼び出される関数 getScrollPercent が定義されています。無名関数（アロー関数）を使っていて、スクロールイベントに応じてページのスクロール量を取得し、プログレスバーに反映させます。

• const scrolled = window.scrollY;は、ページのトップからのスクロール量（ピクセル単位）を取得します。この変数 scrolled には、ページがどれだけ縦方向にスクロールされたかの情報が入ります。

• const pageHeight = document.documentElement.scrollHeight;は、scrollHeight はドキュメント全体の高さを取得します。この値は、ページ全体の高さ（スクロールされる部分も含めたサイズ）を示します。

• const viewHeight = document.documentElement.clientHeight;のclientHeightは現在表示されているウィンドウの高さ（ビューポートの高さ）を取得します。これは、画面に表示されている範囲の高さです。

• const percentage = (scrolled / (pageHeight - viewHeight)) * 100;とは、この式でページ全体に対してどれだけスクロールされたかの割合（パーセンテージ）を計算します。
  
  (pageHeight - viewHeight)は、スクロール可能な全体の高さ（ページ全体の高さから表示領域の高さを引いたもの）。* 100は、パーセンテージに変換。

• document.querySelector("#bar").style.width = ${percentage}%;は、querySelector("#bar") でHTML要素のIDがbarの要素を取得します。そして、style.widthプロパティでプログレスバーの幅をスクロール割合に応じて更新します。${percentage}%によって、幅がパーセンテージ形式で設定されます。

• window.addEventListener("scroll", getScrollPercent);は、ここでscrollイベントをリスンしています。ページがスクロールされるたびにgetScrollPercent関数が呼び出される仕組みです。これにより、スクロールに連動してプログレスバーが動きます。

ページ全体の高さ

表現領域の高さ

スクロール量の計算式

スクロールされた割合を計算するには、「スクロール量÷スクロール可能なページの高さ×100」 で表し、上記のJavaScriptの場合、ページ全体の高さから表現領域の高さを引いた数値を求めたい時は、「スクロール量÷（ページ全体の高さ-表現領域の高さ）×100」 にあてはめます。

例）スクロールすると背景色が変わる

See the Pen スクロール量 by Uka Suzuki (@uukasuzuki_) on CodePen.

CSS3のコード解説

body {
  margin: 0;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease;
}

.content {
  height: 200vh; /* 200%の高さを設定してスクロールできるようにする */
  padding: 20px;
}

• margin: 0;で、ブラウザのデフォルトの余白をなくします。これにより、ページが画面の端から端まで広がります。transition: background-color 0.3s ease;では、背景色が変わる際のアニメーション効果を設定しています。色が変わるのにかかる時間は0.3秒で、アニメーションは滑らかに進行します。

JavaScriptのコード解説

window.addEventListener("scroll", function () {
  // スクロール量を取得
  const scrollPosition = window.scrollY || document.documentElement.scrollTop;

  // ページ全体の高さ
  const documentHeight = document.documentElement.scrollHeight - window.innerHeight;

  // スクロール位置をパーセンテージで計算
  const scrollPercent = (scrollPosition / documentHeight) * 100;

  console.log(`スクロール位置: ${scrollPosition}px`);
  console.log(`スクロール進行度: ${scrollPercent.toFixed(2)}%`);

  // 例: スクロール量に応じて背景色を変える
  document.body.style.backgroundColor = `rgba(0, 150, 136, ${scrollPercent / 100})`;
});

• window.addEventListener("scroll", function () {...});で、スクロールイベントが発生するたびに、この関数が呼び出されます。

• const scrollPosition = window.scrollY || document.documentElement.scrollTop;は、現在のスクロール位置を取得します。window.scrollYは現在の垂直スクロール量を返し、古いブラウザのためにdocument.documentElement.scrollTopも使用します。

• const documentHeight = document.documentElement.scrollHeight - window.innerHeight;は、ドキュメント全体の高さからビューポートの高さを引いて、スクロール可能な領域の高さを計算します。

• const scrollPercent = (scrollPosition / documentHeight) * 100;は、現在のスクロール位置を全体の高さで割り、パーセンテージに変換します。

• console.log(...): 現在のスクロール位置とスクロール進行度をコンソールに出力します。toFixed(2)メソッドは小数点以下2桁まで表示します。

• document.body.style.backgroundColor = ...;は、スクロール量に応じて背景色を変更します。rgba(0, 150, 136, ${scrollPercent / 100})では、透明度をスクロール量のパーセンテージに基づいて設定します。これにより、スクロールが進むにつれて背景色が徐々に濃くなります。

論理演算子

JavaScriptの論理演算子は、主に条件分岐や比較の際に使われる重要なツールです。主な論理演算子は以下の3つです。

1. 論理AND（&&）
2つの条件がどちらもtrueの場合にtrueを返し、1つでもfalseがあればfalseを返します。

let a = true;
let b = false;
console.log(a && b); // false

2. 論理OR（||）
2つの条件のうち1つでもtrueであればtrueを返し、どちらもfalseの場合にのみfalseを返します。

let a = true;
let b = false;
console.log(a || b); // true

3. 論理NOT（!）
1つの条件の真偽を逆にします。trueならfalseに、falseならtrueにします。

let a = true;
console.log(!a); // false

例）実際の使い方

let age = 25;
let hasLicense = true;

// このコードでは、年齢が18歳以上であり、かつ運転免許がある場合に運転可能と表示されます。
if (age >= 18 && hasLicense) {
  console.log("運転可能です");
} else {
  console.log("運転できません");
}

まとめ

今回は、ページスクロールと複雑な条件分岐についてまとめました。次回は、配列とfor文の繰り返し処理を復習していきます。