React NativeとReanimatedでマインドフル呼吸アプリを作る方法

React NativeとReanimatedを使ってスムーズで心安らぐ呼吸エクササイズアプリの作り方を学びます。必須のアニメーションフック、シーケンス、UI同期、高パフォーマンスでネイティブに近いモバイルウェルネスアプリ開発を解説します。

WellAlly編集チーム

著者プロフィールを見る

2025年12月12日読了時間 8分

このページの内容

常に通知や気が散る要素に満ちた世界において、呼吸に意識を向ける時間は、私たちを地に足を戻す強力なツールとなり得ます。マインドフル呼吸法のルはストレス軽減と集中力の向上に役立つことが実証されており、心の健康アプリやウェルネスアプリでの人気機能となっています。

このチュートリアルでは、React Nativeと強力なreact-native-reanimatedライブラリを使用して、シンプルで洗練されたマインドフル呼吸法アプリを作成する方法を説明します。リラックス为目的としたアプリにおいて極めて重要な、滑らかでレスポンシブなユーザー体験とスムーズなアニメーションの作成に焦点を当てます。ジェリーやレスポンシブでないアニメーションは、リラックスアプリの目的を台無しにしてしまう可能性があります。それが、react-native-reanimated`こそが最適なツールである理由です。JavaScriptブリッジをバイパスし、ネイティブのUIスレッドでアニメーションを実行することで、Butter-smoothな60 FPSアニメーションを実現します。

このチュートリアルを終える頃には、動作する呼吸法アプリが完成し、ご自身のReact Nativeプロジェクトでハイパフォーマンスなアニメーションを作成するためのReanimatedの活用方法について確かな理解を深めているでしょう。

前提条件

React NativeとJavaScriptに関する実践的な知識。
マシンにNode.jsとnpm/yarnがインストールされていること。
React Native開発環境が設定されていること（Expo GoまたはReact Native CLI）。
Reactフックに関する知識。

問題の理解

呼吸法アプリを作成における核となる課題は、呼吸のサイクル（吸う、止める、吐く）をユーザーに明確に успокоитьするための、静かで落ち着いた視覚的フィードバックを提供することです。これには以下が必要です：

スムーズで連続的なアニメーション： 呼吸の吸と吐を表すために拡大・縮小する円。
同期したテキスト指示： アニメーションのタイミングに合わせて更新される、ユーザーをガイドするテキスト。
気が散らないUI： ユーザーに呼吸法に集中维持在せるミニマリストデザイン。

React Nativeの組み込みAnimated APIはアニメーションの出発点として悪くありませんがジェスチャー関連のインタラクションや высокопроизводительныйパフォーマンスが求められるアニメーションには、react-native-reanimatedが優れた選択ですより宣言的なAPIを提供し、アニメーションをUIスレッドで実行するため、JavaScriptスレッドの操作によって中断されることを防ぎます。

始める前に

始める前に、新しいReact Nativeプロジェクトがあることを確認してください。このチュートリアルでは、より 빠른設定のためExpoを使用します。

bash

npx create-expo-app mindful-breathing-app
cd mindful-breathing-app

次に、react-native-reanimatedをインストールします：

bash

npx expo install react-native-reanimated

最後に、babel.config.jsにreanimatedプラグインを追加します：

javascript

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

さあ、構築を始めましょう！

ステップ1：基本的なUIの構築

まずは基本的な視覚要素を作成しましょう：拡大・縮小する円、および指示用のテキスト要素です。

何をやるか

円とテキストコンポーネントを配置したシンプルで中央寄せのレイアウトを作成します。

実装

javascript

// App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.circle}>
        <Text style={styles.text}>Breathe</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  circle: {
    width: 200,
    height: 200,
    borderRadius: 100,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

仕組み

これは、黒い画面の 중앙に「Breathe」というテキストと一緒に白い円を描画する標準的なReact Nativeコンポーネントです。これでアニメーションの基本構造ができました。

ステップ2：呼吸アニメーションの作成

ここからアプリの核心である呼吸アニメーションを作成します。Reanimatedのフックを使用して、滑らかでループするアニメーションを作成します。

何をやるか

useSharedValueを使用して、円のスケールをコントロールするアニメーション可能な値を作成します。次に、useAnimatedStyleを使用してこのアニメーション値を円のスタイルに適用します。最後に、withRepeatとwithSequenceを使用して、連続的な呼吸サイクルを作成します。

実装

javascript

// App.js
import React, { useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
  withSequence,
} from 'react-native-reanimated';

export default function App() {
  const scale = useSharedValue(1);

  useEffect(() => {
    scale.value = withRepeat(
      withSequence(
        withTiming(1.5, { duration: 4000 }),
        withTiming(1, { duration: 4000 })
      ),
      -1,
      true
    );
  }, []);

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

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.circle, animatedStyle]}>
        <Text style={styles.text}>Breathe</Text>
      </Animated.View>
    </View>
  );
}

// Styles remain the same

仕組み

useSharedValue(1)：共有値scaleを1で初期化します。共有値はアニメーション可能で、UIとJavaScriptの両方のスレッドからアクセスおよび変更できます。
useEffect：コンポーネントがマウントされたときにアニメーションを開始するためにuseEffectフックを使用します。
withRepeat(...)：この関数はループアニメーションを作成します。2番目の引数を-1に設定して無限に繰り返されるようにし、3番目の引数をtrueに設定して各反復で方向を逆にするようにします（ブーメラン効果）。
withSequence(...)：アニメーションシーケンスを定義します。まず、円が4秒間かけて1.5に拡大し（withTiming(1.5, { duration: 4000 })）、次に4秒間かけて1に縮小します（withTiming(1, { duration: 4000 })）。
useAnimatedStyle(...)：このフックはアニメーションスタイルオブジェクトを作成します。スタイルオブジェクトを返す워크렛（UIスレッドで実行できる関数）を принимаетします。
transform: [{ scale: scale.value }]：円のスタイルのtransformプロパティにscale共有値をリンクさせます。
Animated.View：円のViewをAnimated.Viewでラップしてアニメーション可能にします。

ステップ3：指示テキストの同期

視覚的な合図は素晴らしいですが、指示テキストがあると運動はずっと明確になります。アニメーションと同期して変化するテキストを追加しましょう。

何をやるか

現在の指示テキストを保持するための新しい共有値を作成します。次に、runOnJSを使用して、UIスレッドからこのテキストを更新し、呼吸アニメーションと同期させます。

実装

javascript

// App.js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
  withSequence,
  runOnJS,
} from 'react-native-reanimated';

export default function App() {
  const scale = useSharedValue(1);
  const [instruction, setInstruction] = useState('Breathe');

  const updateInstruction = (text) => {
    setInstruction(text);
  };

  useEffect(() => {
    scale.value = withRepeat(
      withSequence(
        withTiming(1.5, { duration: 4000 }, () => {
          runOnJS(updateInstruction)('Hold');
        }),
        withTiming(1, { duration: 4000 }, () => {
          runOnJS(updateInstruction)('Breathe');
        })
      ),
      -1,
      true
    );
  }, []);

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

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.circle, animatedStyle]}>
        <Text style={styles.text}>{instruction}</Text>
      </Animated.View>
    </View>
  );
}
// Styles remain the same

仕組み

useState：state変数instructionを使用して、表示されるテキストを保持します。
runOnJS：ReanimatedアニメーションはUIスレッドで実行されるため、Reactの状態を直接更新できません。runOnJSを使用すると、UIスレッドからJavaScript関数（この場合はupdateInstruction）を呼び出すことができます。
アニメーションコールバック：withTimingはオプションのコールバック関数を受け取り、アニメーションが完了したときに実行されます。これを使用して、アニメーションシーケンスの適切なタイミングでrunOnJS(updateInstruction)を次の指示とともに呼び出します。

すべてをまとめる

マインドフル呼吸法アプリの完全なコードは次のとおりです：

javascript

// App.js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, StatusBar } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
  withSequence,
  runOnJS,
} from 'react-native-reanimated';

export default function App() {
  const scale = useSharedValue(1);
  const [instruction, setInstruction] = useState('Inhale');

  const updateInstruction = (text) => {
    'worklet';
    runOnJS(setInstruction)(text);
  };

  useEffect(() => {
    scale.value = withRepeat(
      withSequence(
        withTiming(1.5, { duration: 4000 }, () => {
          updateInstruction('Hold');
        }),
        withTiming(1.5, { duration: 2000 }, () => {
          updateInstruction('Exhale');
        }),
        withTiming(1, { duration: 4000 }, () => {
          updateInstruction('Hold');
        }),
        withTiming(1, { duration: 2000 }, () => {
            updateInstruction('Inhale');
        })
      ),
      -1,
      false
    );
  }, []);

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

  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      <Animated.View style={[styles.circle, animatedStyle]}>
        <Text style={styles.text}>{instruction}</Text>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  circle: {
    width: 200,
    height: 200,
    borderRadius: 100,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

まとめ

React NativeとReanimatedを使用して、滑らかで落ち着いたアニメーションを持つマインドフル呼吸法アプリを正常に作成しました。複雑なループアニメーションを作成するためのReanimatedのコアフックの使用方法、およびJavaScriptスレッドでの状態更新と同期させる方法を学びました。

これはほんの始まりです。このプロジェクトを拡張する方法として、以下のようなことができます：

ユーザーに呼吸法Exerciseの継続時間を設定させる。
効果音や触覚フィードバックを追加する。
さまざまな呼吸パターンを作成する（例：ボックス呼吸法）。

Reanimatedは、React Nativeアプリのユーザー体験を次のレベルに引き上げることができる非常に強力なライブラリです。そのドキュメントを探索し、さまざまなアニメーションを試してみることをお勧めします。

リソース

React Native Reanimatedドキュメント: https://docs.swmansion.com/react-native-reanimated/
React Native Gesture Handlerドキュメント: https://docs.swmansion.com/react-native-gesture-handler/docs/

クイックリファレンス

側面	主要情報
トピック	開発
関連性	患者教育と意識向上
アクション	医療提供者にご相談ください
頻度	ケアチームのおすすめに従ってください
根拠	現在の臨床ガイドラインに基づいています

よくある質問

Q: これが自分に該当するかどうかはどのようにしてわかりますか？ A: 個人的な病歴と家族歴について医療提供者と相談し、個人のリスク因子を評価し、適切な次のステップを決定してください。

Q: 医師に何を聞くべきですか？ A: 좋은質問としては、「私の結果はどういう意味ですか？」「私のオプションは何ですか？」「どのようなライフ스타ルの変化が役に立ちですか？」「いつフォローアップすべきですか？」があります。

Q: 役立つライフ스타ルの変化はありますか？ A: ほとんどの健康状態は、基盤となる措置から恩恵を受けます：バランスの取れた栄養、定期的な運動（週150分以上）、質の高い睡眠（7〜9時間）、ストレス管理、および禁煙。

医療に関する免責事項

この資料は教育目的のみを目的としており、医学的アドバイスを提供するものではありません，健康に関する決定、治疗、またはケアに関しては、資格のある医療提供者に相談之后再判断始终ください。個人の状況はすべて異なり、ある人適切 может быть適切なものが別の人に適切とは限りません。

救急該case象に直面している場合は、直ちに119翻呼叫するか、現地の緊急番号に電話してください。

すべての記事に戻る