JavaScriptの復習②

はじめに

今回は、Chapter4のイベント操作の基本と仕組みについてまとめていきます。

イベント操作とは

JavaScriptのイベント操作とは、ユーザーのアクション（クリック、キー入力、マウス移動など）やブラウザの状態変化（ページ読み込み、リサイズなど）をトリガーとして発生する出来事のことを指します。これにより、特定の処理や動作を実行することができます。具体的には、イベントリスナーを使ってイベントを監視し、発生した際に関数を呼び出すことができます。

ローディング中の画面を作ろう

下記のサイトを参考に、ローディング中の様子についてコードを書いていきます。

全体のコード解説

See the Pen ローディング中の画面 by Uka Suzuki (@uukasuzuki_) on CodePen.

CSS3のコード解説

/* ローディング中 */
#loading {
  transition: all 10s;
  background-color: #ddd;
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
}

.spinner {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ローディング完了 */
.loaded {
  opacity: 0;
  visibility: hidden;
}

• @keyframes spinで、スピナーの回転アニメーションを定義しています。また.loadedでは、ローディングが完了した際に適用され、透明度を0にして視覚的に隠します。

JavaScriptのコード解説

const loading = document.querySelector("#loading");
window.addEventListener("load", () => {
  loading.classList.add("loaded");
});

• const loading = document.querySelector("#loading");は、HTML内のidがloadingの要素を選択し、loadingという変数に格納します。この要素は、ローディング画面を表示するためのものです。

• window.addEventListener("load", () => { ... });は、ウィンドウが完全に読み込まれた際（すべてのリソースが読み込まれた後）にイベントリスナーを追加します。

• loading.classList.add("loaded");は、ローディングが完了した際に、loadedというクラスをloading要素に追加します。このクラスによって、CSSで定義されたスタイル（例えば、透明度や可視性を変更するスタイル）が適用され、ローディング画面がフェードアウトします。

三点ドットの場合

See the Pen ローディング中の画面（三点ドットの場合） by Uka Suzuki (@uukasuzuki_) on CodePen.

JavaScriptのコード解説

document.addEventListener("DOMContentLoaded", () => {
  const loader = document.querySelector(".loader");
  // 3秒後にフェードアウトを開始
  setTimeout(() => {
    loader.style.transition = "opacity 1s";
    loader.style.opacity = 0;
    // フェードアウト後にローダーを非表示にする
    setTimeout(() => {
      loader.style.display = "none";
    }, 1000); // 1秒後に非表示
  }, 3000); // 3秒待機
});

• setTimeout(() => { ... }, 3000);では、3秒（3000ミリ秒）後に、指定した処理を実行します。この中ではローダーのフェードアウトを開始します。また、loader.style.transition = "opacity 1s";を使い、ローダーの透明度が変化する際のアニメーションを設定します。ここでは、1秒かけて透明度が変わるように指定しています。

• loader.style.opacity = 0;は、ローダーの透明度を0に設定し、フェードアウトを実現します。loader.style.display = "none";では、フェードアウト後にローダーを完全に非表示にします。これにより、画面上に表示されない状態になります。
  
  この流れで、3秒間表示された後にローディングアニメーションがフェードアウトし、最終的には非表示になる仕組みです。

まとめ

今回は、ローディング中のアニメーションについてまとめました。パターンを参考に、Webサイトでよく使われるものも制作していきます。