Reactでライフサイクルを意識したアニメーション処理を初心者向けに解説

1. クラスコンポーネントでのアニメーション管理

1. クラスコンポーネントでのアニメーション管理

クラスコンポーネントでは、componentDidMountでアニメーションを開始し、componentWillUnmountで停止するのが基本です。こうすることで、不要なタイマーやアニメーションが残らず、メモリの消費を防ぎます。

import React from "react";

class FadeInText extends React.Component {
  state = { opacity: 0 };
  intervalId = null;

  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState(prev => ({
        opacity: prev.opacity + 0.05 <= 1 ? prev.opacity + 0.05 : 1
      }));
    }, 50);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  render() {
    return (
      <p style={{ opacity: this.state.opacity, transition: "opacity 0.05s" }}>
        フェードインするテキスト
      </p>
    );
  }
}

export default FadeInText;

2. 関数コンポーネントでのアニメーション管理

2. 関数コンポーネントでのアニメーション管理

関数コンポーネントではuseEffectと状態管理を組み合わせてアニメーションを制御します。クリーンアップ関数でタイマーを解除することも重要です。

import React, { useState, useEffect } from "react";

function FadeInText() {
  const [opacity, setOpacity] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setOpacity(prev => (prev + 0.05 <= 1 ? prev + 0.05 : 1));
    }, 50);

    return () => clearInterval(intervalId); // クリーンアップ
  }, []);

  return (
    <p style={{ opacity, transition: "opacity 0.05s" }}>
      フェードインするテキスト
    </p>
  );
}

export default FadeInText;

3. ライフサイクルを意識したアニメーションのポイント

3. ライフサイクルを意識したアニメーションのポイント

• コンポーネントが表示されたタイミングでアニメーション開始
• コンポーネントが消えるタイミングでアニメーション停止
• 関数コンポーネントではuseEffectのクリーンアップ関数を必ず使う
• 複数のアニメーションを扱う場合も登録と解除を対応させる

これらを意識することで、Reactアプリでのアニメーションがスムーズに動作し、パフォーマンスや安定性を維持できます。

4. 実践的な応用例

4. 実践的な応用例

例えば、ボタンをクリックしたときにボックスがスライドインするアニメーションも同じ考え方です。

function SlideInBox({ show }) {
  const [left, setLeft] = useState(-200);

  useEffect(() => {
    if (show) {
      const intervalId = setInterval(() => {
        setLeft(prev => (prev + 10 <= 0 ? prev + 10 : 0));
      }, 50);
      return () => clearInterval(intervalId);
    }
  }, [show]);

  return (
    <div style={{
      position: "relative",
      left: `${left}px`,
      width: "200px",
      height: "100px",
      backgroundColor: "lightblue",
      transition: "left 0.05s"
    }}>
      スライドするボックス
    </div>
  );
}

5. メリット

5. メリット

• 不要なタイマーやアニメーションが残らずメモリ効率が良い
• ライフサイクルに沿った管理でパフォーマンス向上
• アプリ全体の動作が安定する
• 副作用の管理が明確になる

まとめ

まとめ

ここまで、Reactにおけるライフサイクルを活用したアニメーション管理について詳しく解説してきました。フロントエンド開発、特にモダンなJavaScriptフレームワークであるReactを用いたWebアプリ制作において、アニメーションはユーザーエクスペリエンス（UX）を向上させるために欠かせない要素です。しかし、ただ「動けば良い」というわけではありません。ウェブアクセシビリティやパフォーマンス、そして何よりメモリリークを防ぐための適切な実装が求められます。

Reactアニメーションの基本思想

Reactの設計思想である「宣言的UI」に基づくと、アニメーションもまた「状態（State）」の変化として捉えることができます。クラスコンポーネント時代のcomponentDidMountやcomponentWillUnmount、そして現在の主流である関数コンポーネントのuseEffectフック。これらを正しく理解し、使い分けることが、プロフェッショナルなフロントエンドエンジニアへの第一歩です。

特に重要なのは、コンポーネントが破棄される際の「クリーンアップ処理」です。タイマー関数（setIntervalやsetTimeout）や、外部ライブラリのインスタンスを適切に破棄しないと、画面を遷移しても裏側で処理が走り続け、アプリの動作が徐々に重くなってしまいます。

さらに一歩進んだReactアニメーションの実装例

ここでは、学んだライフサイクルの知識を応用して、複数の状態を制御する「カラーフェードアニメーション」のサンプルプログラムを作成してみましょう。TypeScript（TSX）を用いたより実践的なコード例を紹介します。

import React, { useState, useEffect } from "react";

/**
 * 背景色が徐々に変化するアニメーションコンポーネント
 * ライフサイクルを意識したクリーンアップ処理を実装
 */
const ColorPulseBox: React.FC = () => {
  const [hue, setHue] = useState<number>(0);

  useEffect(() => {
    // 16ms（約60fps）ごとに色相環の値を更新
    const timer = setInterval(() => {
      setHue((prevHue) => (prevHue + 1) % 360);
    }, 16);

    // コンポーネントがアンマウントされる際にタイマーを確実に解除
    return () => {
      clearInterval(timer);
      console.log("アニメーションのリソースを解放しました");
    };
  }, []);

  const boxStyle: React.CSSProperties = {
    width: "100%",
    height: "150px",
    backgroundColor: `hsl(${hue}, 70%, 60%)`,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    color: "white",
    fontWeight: "bold",
    borderRadius: "10px",
    transition: "background-color 0.1s linear",
  };

  return (
    <div style={boxStyle}>
      色相：{hue}° の動的変化
    </div>
  );
};

export default ColorPulseBox;

SEOの観点から見るReactアニメーションの最適化

Webサイトの制作において、SEO（検索エンジン最適化）は避けて通れない課題です。Reactでリッチなアニメーションを多用する場合、Core Web Vitals（LCP, FID, CLS）への影響を考慮する必要があります。

• CLS（Cumulative Layout Shift）の防止： アニメーションによって要素が急激に動くと、レイアウトシフトが発生し、検索ランキングに悪影響を及ぼす可能性があります。transformやopacityを利用し、レイアウトに影響を与えない実装を心がけましょう。
• LCP（Largest Contentful Paint）の意識： ヒーローエリアなどの大きな要素に重いアニメーションを適用する場合、読み込み速度とのバランスが重要です。
• SSR/SSGとの親和性： Next.jsなどのフレームワークを使用する場合、クライアントサイドでのみ実行されるアニメーションコード（windowやdocumentを扱う処理）は、useEffectの中で呼び出すのが鉄則です。

これからのフロントエンド開発に向けて

現在のWeb制作現場では、Framer MotionやGSAPといった強力なアニメーションライブラリが利用されることも多いですが、その根底にあるのは今回学んだ「Reactのライフサイクル管理」です。基礎がしっかりしていれば、どのような新しいツールが登場しても柔軟に対応できるでしょう。JavaScriptの基本文法、ReactのHooks、そしてCSSのアニメーションプロパティを組み合わせて、ユーザーに驚きを与えるインターフェースを目指してください。