ReactおよびReact Native向けアニメーションライブラリの深掘り比較

アニメーションはユーザー体験を大きく左右しますが、適切なツール選びは難しいものです。framer-motion、react-spring、react-native-reanimatedなど、それぞれが異なる哲学と技術的アプローチを持っています。この記事では、実際の開発現場で直面する課題を中心に、各ライブラリの使いどころを具体的なコード例とともに解説します。

⚠️ 非推奨ライブラリについて

まず重要な前提として、react-motionは公式に非推奨（deprecated）とされています。GitHubリポジトリおよびnpmページにその旨が明記されており、新規プロジェクトでの使用は避けるべきです。代わりにreact-springが後継として推奨されています。

🎯 シンプルなコンポーネントの出入りアニメーション

モーダルや通知、リストアイテムの追加・削除など、コンポーネントの表示・非表示に伴うシンプルなトランジションが必要な場合。

react-transition-group はこの用途に特化しています。CSSトランジションを活用し、クラス名の付与タイミングを制御することで、軽量かつ直感的に実装できます。

// react-transition-group
import { CSSTransition } from 'react-transition-group';

function Modal({ isOpen }) {
  return (
    <CSSTransition in={isOpen} timeout={300} classNames="fade">
      <div className="modal">コンテンツ</div>
    </CSSTransition>
  );
}

/* CSS */
.fade-enter { opacity: 0; }
.fade-enter-active { opacity: 1; transition: opacity 300ms; }
.fade-exit { opacity: 1; }
.fade-exit-active { opacity: 0; transition: opacity 300ms; }

framer-motion も同様のことが可能ですが、より宣言的です。

// framer-motion
import { AnimatePresence, motion } from 'framer-motion';

function Modal({ isOpen }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.3 }}
        >
          コンテンツ
        </motion.div>
      )}
    </AnimatePresence>
  );
}

react-spring では以下のように書けます。

// react-spring
import { useTransition, animated } from '@react-spring/web';

function Modal({ isOpen }) {
  const transitions = useTransition(isOpen, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: { duration: 300 }
  });

  return transitions((style, item) => 
    item ? <animated.div style={style}>コンテンツ</animated.div> : null
  );
}

💡 選択のポイント: 単純なCSSトランジションで十分ならreact-transition-groupが軽量。より複雑な動きや統一されたAPIを望むならframer-motionかreact-spring。

📱 React Native向けアニメーション

React Nativeでは、JavaScriptスレッドとUIスレッドの分離により、アニメーションの実装方法がWebとは異なります。

react-native-animatable は最もシンプルで、事前定義されたアニメーションを即座に適用できます。

// react-native-animatable
import Animatable from 'react-native-animatable';

<Animatable.View animation="fadeInUp" duration={500}>
  <Text>こんにちは</Text>
</Animatable.View>

一方、react-native-reanimated はネイティブスレッドでアニメーションを実行するため、滑らかなパフォーマンスを実現します。スクロール連動アニメーションなど複雑なケースに必須です。

// react-native-reanimated
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

function FadeIn() {
  const opacity = useSharedValue(0);

  const style = useAnimatedStyle(() => ({
    opacity: opacity.value,
  }));

  // 初回レンダー後にアニメーション開始
  useEffect(() => {
    opacity.value = withTiming(1, { duration: 500 });
  }, []);

  return <Animated.View style={style}><Text>こんにちは</Text></Animated.View>;
}

💡 選択のポイント: 単発のシンプルなアニメーションならreact-native-animatableで十分。しかし、ジェスチャーやスクロールと連動するインタラクティブなアニメーションが必要なら、必ずreact-native-reanimatedを選ぶべきです。

🖱️ ジェスチャーとインタラクティブアニメーション

ドラッグ操作やホバー効果など、ユーザーのインタラクションに反応するアニメーション。

framer-motion はこの分野で圧倒的な使いやすさを提供します。

// framer-motion: ドラッグ可能なカード
<motion.div
  drag
  dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  ドラッグ可能
</motion.div>

react-spring でも実現可能ですが、より多くのボイラープレートが必要です。

// react-spring: ドラッグ可能なカード
import { useDrag } from '@use-gesture/react';
import { useSpring, animated } from '@react-spring/web';

function DraggableCard() {
  const [{ x, y }, api] = useSpring(() => ({ x: 0, y: 0 }));

  const bind = useDrag(({ offset: [x, y] }) => {
    api.start({ x, y });
  });

  return (
    <animated.div
      {...bind()}
      style={{ x, y, touchAction: 'none' }}
    >
      ドラッグ可能
    </animated.div>
  );
}

💡 選択のポイント: ジェスチャー対応のインタラクティブアニメーションを素早く実装したいならframer-motionが断然有利。react-springは柔軟性が高い反面、設定が煩雑になります。

📐 自動レイアウト遷移（Layout Animations）

要素のサイズや位置が変化した際に、自動で滑らかな遷移を適用する機能。

framer-motion はlayoutプロパティでこれを簡単に実現します。

// framer-motion: レイアウト遷移
{items.map(item => (
  <motion.div
    key={item.id}
    layout // これだけで自動遷移
    style={{ width: isSelected ? 200 : 100 }}
  >
    {item.name}
  </motion.div>
))}

react-spring では、要素の寸法を監視し、手動でトランジションをトリガーする必要があります。

// react-spring: レイアウト遷移（簡略化例）
const [width, setWidth] = useState(100);
const props = useSpring({ width });

useEffect(() => {
  setWidth(isSelected ? 200 : 100);
}, [isSelected]);

return <animated.div style={{ width: props.width }}>{item.name}</animated.div>;

💡 選択のポイント: 自動レイアウト遷移はframer-motionの独壇場です。react-springでは同等の機能を実現するには大量の追加コードが必要になります。

🌐 WebとReact Nativeのクロスプラットフォーム対応

同じコードベースでWebとモバイルの両方をサポートしたい場合。

react-spring は@react-spring/webと@react-spring/nativeを提供し、ほぼ同一のAPIで両プラットフォームに対応できます。

// react-spring: Web版
import { animated } from '@react-spring/web';

// react-spring: React Native版
import { animated } from '@react-spring/native';

framer-motion はWeb専用であり、React Nativeでは使えません。逆に**react-native-reanimated** はReact Native専用です。

💡 選択のポイント: クロスプラットフォーム対応が必要ならreact-springが唯一の選択肢。Web専用ならframer-motion、React Native専用ならreact-native-reanimatedが最適です。

📊 まとめ：各ライブラリの適正ユースケース

💡 最終的なアドバイス

• Webプロジェクトでリッチなアニメーションが必要なら → framer-motionを第一候補に。
• React Nativeで滑らかなインタラクティブアニメーションが必要なら → react-native-reanimatedが必須。
• WebとReact Nativeの両方で同じアニメーションロジックを使いたいなら → react-springを選ぶ。
• 単純なフェードイン・アウトやスライドインで十分なら → react-transition-group（Web）またはreact-native-animatable（React Native）で軽量に実装。
• react-motionは絶対に使わない — 公式で非推奨とされているため、メンテナンスやセキュリティリスクがあります。

アニメーションライブラリの選択は、プロジェクトの要件、チームのスキルセット、パフォーマンス要件を総合的に判断することが重要です。過剰な機能は不要な複雑さを生みますが、必要な機能を犠牲にするとユーザー体験が損なわれます。上記の比較を参考に、あなたのプロジェクトに最適なツールを選んでください。