【JavaScript入門】DOM操作：クラスの追加と削除によるアニメーション

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

DOM操作：クラスの追加と削除によるアニメーション

　ここでは、DOM操作を利用してCSSクラスの追加と削除によるアニメーションの実装手法を解説します。ユーザーの操作に応じ、要素の高さや透明度が滑らかに変化する効果を、HTML・CSS・JavaScriptを組み合わせて実現する方法を学びます。ここでは、サンプルコード「classToggleAnimation.html」を例に、各構成要素の役割、スタイル設定、JavaScriptによる動的処理の流れについて、図表やコード例を交えて詳しく説明します。

１．HTMLとCSSによる基本構造の構築

1.1. HTML要素の構成と役割

下記の表は、今回のサンプルプログラムに使用する主要なHTML要素とその役割をまとめたものです。

要素ID	タグ例	説明
animationBox	<div id="animationBox">…</div>	全体のコンテナ。アニメーション対象の領域と操作用ボタンを内包する。
animationContent	<div id="animationContent"></div>	ダミーテキストを挿入し、アニメーション効果を適用する要素。
toggleButton	<div id="toggleButton">もっと表示する</div>	クリックにより、animationContentのクラスを切り替え、表示状態を変化させる。

1.2. CSSスタイル設定と効果の定義

　次に、CSSにより各要素の初期状態と、クラス「open」適用時の変化を設定します。以下の表に、適用するセレクタとその設定内容、および期待される効果を示します。

対象セレクタ	設定内容	効果
#animationBox	幅、余白、境界線、背景色などの基本的なレイアウト設定	コンテンツの全体的な枠組みが決まる。
#animationContent	overflow: hidden; height: 40px; opacity: 0.4; transition: 0.8s;	初期状態では内容が縮小・半透明に表示され、はみ出した部分は隠される。
#toggleButton	境界線、余白、中央揃え、カーソル指定、背景色など	操作ボタンとして視認性とクリック可能な見た目を確保する。
.open	overflow-y: auto !important; height: 180px !important; opacity: 1 !important;	openクラス付与時、要素の高さが拡大し、透明度が上がり全文が表示される。

２．JavaScriptによる動的アニメーション処理の実装

2.1. ダミーテキストの生成と挿入

　JavaScriptでは、まず読み込み時にダミーテキストを生成し、animationContent要素に設定します。以下のコードは、「魔法のフレーズ」を繰り返して長文を作成し、テキストとして挿入する例です。

<script>
  // ダミーテキストを生成し、animationContent要素に設定する
  const textData = '魔法のフレーズ '.repeat(250);
  document.querySelector('#animationContent').innerText = textData;
</script>

　この処理により、animationContent内に十分なテキストが挿入され、初期状態では限られた高さ（40px）のため、部分的にしか表示されません。

2.2. クリックイベントによるクラスの切替処理

　次に、toggleButton要素にクリックイベントリスナーを登録し、ユーザーの操作に応じてanimationContent要素に「open」クラスを追加または削除します。これにより、CSSで定義されたアニメーション効果が適用され、要素の表示状態が切り替わります。

<script>
  // toggleButtonクリック時に、animationContentのクラスopenをトグルする
  document.querySelector('#toggleButton').addEventListener('click', () => {
    document.querySelector('#animationContent').classList.toggle('open');
  });
</script>

　このコードでは、.classList.toggle()メソッドを使用して、クラスの有無を自動的に切替えています。ボタンをクリックするたびに、要素は拡大表示と縮小表示を交互に繰り返します。

３．サンプルプログラム全体と動作例の解説

　以下は、HTML、CSS、JavaScriptを組み合わせたサンプルプログラム全体の例です。タイトル部分には絵文字を加え、見た目の装飾も行っています。

ファイル名： classToggleAnimation.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🎉 クラス切替アニメーション入門</title>
  <style>
    /* コンテナ全体 */
    #animationBox {
      width: 70%;
      margin: 20px auto;
      border: 2px solid #bbb;
      border-radius: 8px;
      padding: 15px;
      background: #f0f8ff;
    }
    /* アニメーション対象のコンテンツ */
    #animationContent {
      overflow: hidden;
      height: 40px;
      opacity: 0.4;
      transition: 0.8s;
      font-size: 14px;
      line-height: 1.6;
    }
    /* 切り替え用のボタン */
    #toggleButton {
      margin-top: 10px;
      padding: 8px;
      border: 2px solid #bbb;
      border-radius: 5px;
      text-align: center;
      cursor: pointer;
      background-color: #e6f7ff;
    }
    /* openクラスが付与された場合のスタイル */
    .open {
      overflow-y: auto !important;
      height: 180px !important;
      opacity: 1 !important;
    }
  </style>
</head>
<body>
  <div id="animationBox">
    <div id="animationContent"></div>
    <div id="toggleButton">もっと表示する</div>
  </div>
  
  <script>
    // STEP 1: ダミーテキストの生成と挿入
    const textData = '魔法のフレーズ '.repeat(250);
    document.querySelector('#animationContent').innerText = textData;
    
    // STEP 2: クリックイベントでopenクラスの切替を実行
    document.querySelector('#toggleButton').addEventListener('click', () => {
      document.querySelector('#animationContent').classList.toggle('open');
    });
  </script>
</body>
</html>

ブラウザの出力例

動作例と出力内容の解説

このプログラムをブラウザで表示すると、初期状態では以下のような様相となります。

初期状態

animationContentの高さは40px、透明度は0.4のため、テキストは一部分のみ薄く表示される。
toggleButtonには「もっと表示する」と表示され、クリック可能な状態になっている。

ボタンクリック後

toggleButtonをクリックすると、animationContentに「open」クラスが追加される。
その結果、animationContentは高さが180pxに拡大し、透明度が完全な1となり、全文がはっきりと表示される。
テキストが多い場合は、縦スクロールが可能となり、全体を確認できるようになる。
再度クリックすると、openクラスが削除され、初期状態に戻る。

プログラム解説

以下のCSSの解説

cssコピーする.open {
  overflow-y: auto !important;
  height: 180px !important;
  opacity: 1 !important;
}

各プロパティの意味

height： 180px !important;
要素の高さを180ピクセルに固定します。!important によって、他のどのスタイル指定よりもこの高さが優先されます。
opacity： 1 !important;
要素の不透明度を1（つまり完全に表示）に設定します。これも !important により他の指定を上書きします。
overflow-y： auto !important;
・overflow-y
このプロパティは、要素のコンテンツが縦方向（Y軸）に要素の範囲を超えて溢れる場合に、どのような動作をするかを制御します。
CSS では、overflow プロパティで水平方向（x軸）と垂直方向（y軸）の両方を制御できますが、overflow-y は縦方向専用です。
・auto
「auto」を指定すると、ブラウザは要素内のコンテンツが設定された高さ（この場合は180px）を超えた場合にのみ自動的に縦方向のスクロールバーを表示します。
つまり、内容が180px以内ならスクロールバーは表示されず、超えた場合にユーザーが残りの部分を見るためのスクロールバーが現れます。
・!important
この指定は、他のスタイルで同じプロパティが設定されていても、このスタイル設定が最優先で適用されることを強制するものです。

以下のプログラムの解説

// STEP 2: クリックイベントでopenクラスの切替を実行
document.querySelector('#toggleButton').addEventListener('click', () => {
  document.querySelector('#animationContent').classList.toggle('open');
});

　このコードでは、クリックイベントが発生すると、DOM内の要素のクラス「open」が付与されるか削除されるように制御しています。特に「toggle('open')」は、指定したクラス名が現在の要素に存在するかどうかを判定し、以下のように動作します。

存在しない場合
要素のクラスリストに「open」を追加します。つまり、まだ「open」クラスがなければ、クリックするとこのクラスが付与されます。
存在する場合
要素のクラスリストから「open」を削除します。つまり、すでに「open」クラスが付いている場合は、クリックするとそのクラスがなくなります。

まとめ

　ここでは、DOM操作によるCSSクラスの追加と削除を利用して、ユーザー操作に応じたアニメーション効果を実現する方法を学びました。

まず、HTMLでコンテナ（animationBox）、アニメーション対象（animationContent）、操作用ボタン（toggleButton）の各要素を定義し、CSSで初期状態と切替時のスタイルを設定しました。
次に、JavaScriptでダミーテキストを生成して挿入し、クリックイベントによりanimationContentに「open」クラスをトグルする処理を実装しました。

　この手法を活用することで、ユーザーインターフェースに動的な視覚効果を与え、より魅力的なWebページの実現が可能となります。