Reanimated徹底解説：React Nativeアニメーションの未来か？

software-mansion/react-native-reanimated

さあ、今日は「Reanimated」という素晴らしいライブラリについてお話ししましょう！

React Nativeでアニメーションを実装する際に、標準のAnimatedライブラリを使うことが多いですよね。でも、「もっと滑らかに動かないかな…」「UIスレッドがブロックされてカクつく…」なんて感じたことはありませんか？そんな悩みを解決してくれるかもしれないのが、このReanimatedなんです！

でも、このReanimated、実は開発者の間では熱い議論が繰り広げられているんですよ。「信じる派」と「信じない派」に分かれて、まるでコントのように激しい討論が日々行われています。

信じる派リーダー
情熱的なアニメーション愛好家

信じない派リーダー
現実主義のパフォーマンス至上主義者

信じる派リーダー（腕組みをしてニヤリ） 「いやー、Reanimatedは本当に素晴らしい！これを使えば、今まで諦めていたような複雑なアニメーションも、ヌルヌル動くんだよ！UIスレッドに負荷をかけずに、ネイティブ側でアニメーションを処理してくれるんだから、もう最高！」

信じない派リーダー（冷めた目で腕を組み返す） 「ふん、夢ばかり見てるな。確かにパフォーマンスは向上するかもしれない。だが、それだけのために学習コストをかけて、新たなAPIを覚える必要があるのか？既存のAnimatedで十分なケースも多いだろう。それに、デバッグが複雑になる可能性だってあるんだぞ？」

信じる派リーダー（熱弁） 「何を言ってるんだ！その学習コストを払ってでも得られる恩恵は計り知れない！例えば、ジェスチャーとの連携なんて、Reanimatedを使えば驚くほど簡単に、そして滑らかに実現できるんだ！ユーザー体験が格段に向上するんだから、それはもう、投資だよ、投資！」

信じない派リーダー（ため息） 「投資ねぇ…。ちょっとしたアニメーションのためだけに、大掛かりなライブラリを導入するのは、オーバーキルじゃないのか？バンドルサイズも大きくなるし、依存関係が増えることで、将来的なメンテナンスコストだって上がる可能性がある。シンプル・イズ・ベストだろ？」

信じる派リーダー（さらに熱くなる） 「シンプルに見えて、実は複雑なことを裏でやってくれているんだよ！例えば、値の補間やアニメーションの連鎖、ループ処理なども、宣言的に書けるから、コードが分かりやすくなるんだ！それに、Hot Reloadingも強力だし、開発効率だって上がるんだ！」

信じる派リーダー（さらに熱くなる） 「何より、彼らが目指しているのは、React Nativeにおけるアニメーションの究極形なんだ！将来的に、もっと多くの機能が追加され、より簡単に、より高性能なアニメーションが実現できるようになるはずだ！未来に目を向けろ！」

信じない派リーダー（頭を抱える） 「未来はいいが、今をどうするかだ！既存プロジェクトへの導入は？移行コストは？新しいバージョンのたびに、また変更に追われるのか？安定性だって重要だぞ！」

信じる派リーダー（キリッとした表情で） 「大丈夫！公式ドキュメントも充実しているし、コミュニティも活発だ！それに、彼らは常に最高のパフォーマンスと開発体験を提供しようと努力している。信じてみろ！きっと、君のReact Nativeライフが変わるはずだ！」

信じる派リーダー（笑顔で） 「さあ、まずは触ってみることから始めようじゃないか！百聞は一見に如かずだよ！」

信じない派リーダー（渋々ながらも、少し興味を持った様子） 「…まあ、そこまで言うなら、少しは話を聞いてやるか…。」

このコントのように、色々な意見があるReanimatedですが、ソフトウェアエンジニアとしての視点から見ると、以下のような点で非常に役に立ちます。

ネイティブスレッドでのアニメーション実行（UIスレッド解放）
ここが一番のキモです。従来のAnimatedライブラリは、JavaScriptスレッドでアニメーションの計算を行っていました。JavaScriptスレッドはUIのレンダリングやその他のロジックも担当しているため、複雑なアニメーションや頻繁な更新があると、UIスレッドがブロックされてしまい、カクつき（フレーム落ち）が発生することがありました。 Reanimatedは、アニメーションのロジックをネイティブ（C++）側で実行するように最適化されています。これにより、JavaScriptスレッドの負荷が軽減され、UIスレッドがスムーズに動作し、非常に滑らかなアニメーションを実現できます。これは特に、高速なジェスチャー操作や多数の要素が同時に動くようなケースで威力を発揮します。

宣言的なAPIと強力なフック
Reanimatedは、useSharedValue、useAnimatedStyle、useAnimatedGestureHandlerなどのフックを提供しており、これらを使うことで、宣言的にアニメーションを記述できます。これはReactのコンポーネント指向の考え方と非常に相性が良く、コードの可読性と保守性を高めます。

ジェスチャーハンドリングとの連携のしやすさ
react-native-gesture-handlerと組み合わせて使用することで、ユーザーのタッチ操作やスワイプ、ピンチなどのジェスチャーに完璧に同期したアニメーションを簡単に実装できます。例えば、ドラッグ可能な要素や、スワイプで開閉するパネルなど、リッチなUIを少ないコード量で実現可能です。

高度なアニメーション制御
値の補間（interpolate）、アニメーションの連鎖、ループ、条件分岐など、複雑なアニメーションロジックをより直感的に記述できます。また、アニメーションの途中で値を取得したり、イベントを発生させたりすることも可能です。

デバッグのしやすさ（最近は特に向上）
以前はデバッグが難しいという声もありましたが、最近のバージョンでは、デバッグツールが充実してきており、より開発しやすくなっています。

Reanimatedの導入は、いくつかのステップを踏む必要がありますが、公式ドキュメントが非常に丁寧に書かれているので、それに沿って進めれば問題ありません。

まずは、必要なパッケージをインストールします。

yarn add react-native-reanimated react-native-gesture-handler
# または npm install react-native-reanimated react-native-gesture-handler

react-native-gesture-handlerもReanimatedと組み合わせて使うことが多いので、一緒にインストールすることをおすすめします。

babel.config.jsファイルにReanimatedのプラグインを追加します。

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-reanimated/plugin', // この行を追加
  ],
};

重要
'react-native-reanimated/plugin'は、他のプラグイン（特に 'react-native-dotenv' や 'react-native-paper' など）よりも最後に配置する必要があります。これは、プラグインの処理順序が重要だからです。

iOSプロジェクトの場合、Podfileを更新し、Podをインストールする必要があります。

ios/Podfileを開き、一番上に以下の行を追加します。

require_relative '../node_modules/react-native-reanimated/scripts/configure_gradle_for_turbo_modules.rb'

# ... 他のPodfileの内容 ...

次に、ターミナルでiOSディレクトリに移動してPodをインストールします。

cd ios
pod install

App.jsやindex.jsなど、アプリケーションのエントリポイントで、react-native-gesture-handlerのインポートを一番上に追加します。

import 'react-native-gesture-handler'; // この行を一番上に！

import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Reanimated App</Text>
    </View>
  );
};

export default App;

これで、基本的な導入は完了です。一度アプリを再ビルド（yarn react-native run-ios または yarn react-native run-android）してみてください。

では、実際にReanimatedを使ってシンプルなアニメーションを実装してみましょう。今回は、ボタンをタップすると四角が左右に動くアニメーションと、ドラッグで動かせる四角の例を見てみましょう。

import React from 'react';
import { Button, StyleSheet } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring, // スプリングアニメーション
} from 'react-native-reanimated';

const SIZE = 100;

function BasicMovement() {
  const offset = useSharedValue(0); // アニメーションさせる値を管理するSharedValue

  const animatedStyles = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: offset.value }], // offset.valueに基づいてX座標を変換
    };
  });

  const handlePress = () => {
    offset.value = withSpring(Math.random() * 200 - 100); // ランダムな位置へスプリングアニメーション
  };

  return (
    <>
      <Animated.View style={[styles.box, animatedStyles]} />
      <Button onPress={handlePress} title="動かす！" />
    </>
  );
}

const styles = StyleSheet.create({
  box: {
    width: SIZE,
    height: SIZE,
    backgroundColor: 'hotpink',
    borderRadius: 10,
    marginVertical: 50,
  },
});

export default BasicMovement;

解説

useSharedValue(0)
offsetというShared Valueを初期値0で作成します。これがアニメーションさせる値になります。offset.valueで値にアクセスします。

useAnimatedStyle(() => { ... })
アニメーションされるスタイルを定義するためのフックです。この中の関数はUIスレッドで実行され、offset.valueの変化に応じてスタイルの計算が行われます。

transform: [{ translateX: offset.value }]
offset.valueが変化すると、四角がX軸方向に移動します。

withSpring(Math.random() * 200 - 100)
offset.valueに新しい値を代入する際に、withSpringを使うことで、スプリングアニメーションで滑らかに移動させます。

この例ではreact-native-gesture-handlerも使います。

import React from 'react';
import { StyleSheet } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  useAnimatedGestureHandler,
  withSpring,
} from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';

const SIZE = 100;

function DraggableBox() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  // ジェスチャーイベントを処理するハンドラー
  const onGestureEvent = useAnimatedGestureHandler({
    onStart: (event, ctx) => {
      // ジェスチャー開始時の現在の位置を保存
      ctx.startX = translateX.value;
      ctx.startY = translateY.value;
    },
    onActive: (event, ctx) => {
      // 指の移動量に開始時の位置を足して、現在の位置を計算
      translateX.value = ctx.startX + event.translationX;
      translateY.value = ctx.startY + event.translationY;
    },
    onEnd: (event) => {
      // 指を離した時に、初期位置に戻す（例として）
      translateX.value = withSpring(0);
      translateY.value = withSpring(0);
    },
  });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        { translateX: translateX.value },
        { translateY: translateY.value },
      ],
    };
  });

  return (
    <PanGestureHandler onGestureEvent={onGestureEvent}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </PanGestureHandler>
  );
}

const styles = StyleSheet.create({
  box: {
    width: SIZE,
    height: SIZE,
    backgroundColor: 'purple',
    borderRadius: 10,
    marginTop: 50, // 上からの余白
  },
});

export default DraggableBox;

解説

PanGestureHandler
react-native-gesture-handlerから提供されるコンポーネントで、パン（ドラッグ）ジェスチャーを検出します。

useAnimatedGestureHandler({ ... })
ジェスチャーイベント（onStart、onActive、onEndなど）が発生した際に実行されるロジックを定義します。この中もUIスレッドで実行されます。

ctx
contextオブジェクトで、ジェスチャーの開始時などの状態を保持するために使えます。

event.translationX, event.translationY
指がどれだけ移動したか（翻訳量）を示します。

onEnd
ジェスチャーが終了した際に、スプリングアニメーションで初期位置（0, 0）に戻るようにしています。

Reanimatedは、React Nativeでより高度で滑らかなアニメーションを実装するための強力なツールです。確かに学習コストや導入の手間はありますが、その恩恵は大きく、特にパフォーマンスが重視されるアプリケーションや、リッチなUIアニメーションを必要とする場合に、その真価を発揮します。

「信じる派」の意見のように、未来のReact Nativeアニメーションを担う可能性を秘めたライブラリだと私は思います。まずは触ってみて、そのスムーズさを体験してみてください！きっと、「信じる派」の気持ちが少しは理解できるはずです！