React Nativeのパフォーマンスを向上させる基本的な方法

ReactNativeによるクロスプラットフォーム開発は、その高い柔軟性と利便性により今でも多くのアプリ開発現場で重宝されています。しかし、大規模なデータ処理や複雑なUI要素が絡む場合、React Nativeはパフォーマンスが落ちるという問題点があります。

本記事ではReact Nativeアプリのパフォーマンスを向上させる方法について詳しく解説しています。

この記事の主な内容

大量のデータを扱う場合のFlatListの使用
外部ライブラリの選択時の注意点
アニメーションの最適化

ReactNativeのパフォーマンス向上にはFlatListの使用が効果的

React Nativeで作成されたアプリのパフォーマンスを向上させるには、FlatListの使用が効果的です。FlatListは、大量のリストデータを効率的に扱うことができ、オンデマンドでデータをレンダリングし、スクロール時のパフォーマンスを最適化します。このコンポーネントは、画面に表示されている要素のみを描画し、スクロール時に非表示の要素をメモリから削除することで、メモリ使用量を減少させる助けとなります。このようにして、アプリの応答速度を向上させ、UXを向上させます。

FlatListを使用する

FlatListとは、React Nativeで使用されるコンポーネントで、長いリストやデータコレクションを効率的に表示するために設計されています。

大抵のアプリには、商品、住所、メモなどの情報のリストを含む画面が含まれています。リストが数十〜数百行程度であれば、React NativeのScrollViewはスムーズなパフォーマンスを発揮します。しかし、大量のデータ、無限にスクロールする場合には、FlatListが必要になります。

FlatListを使うと大量のデータをスムーズにスクロールできる仕組みは、主に「仮想化」という技術に基づいています。これは、一度に画面上に表示されるアイテムのみをレンダリングし、スクロールに応じて必要なアイテムを動的に読み込んで表示する方法です。

そのため、データの量が多くても、アプリのパフォーマンスを損なわずに高速なスクロール体験を提供することができます。この仮想化のおかげで、FlatListは大量のデータを扱う際にも高い効率を発揮します。

上の図の例では、5000件の項目がある場合、ScrollViewよりもFlatListを使用した方がスムーズなスクロールが可能です。この差は、FlatListが効率的なデータレンダリングのための抽象化されたロジックを採用している点にあります。無関係なレンダリングを減らし、スクロールを60FPSで安定して動作させるために、多くのヒューリスティックと高度なJavaScriptの計算が組み込まれています。

ただし、大量のデータを扱う場合は、FlatListに追加の設定（プロップ）を行うことで、さらにパフォーマンスを向上させることができます。

RemoveClippedSubviews

このプロップを使用すると、FlatListは表示されていない項目を削除できます。つまり、スクロールビューにない項目は削除されます。これにより、特に大量のデータを扱う場合や長いリストをスクロールする際に、メモリの使用量を減らし、アプリの応答性を高める効果があります。

メリット	デメリット
画面外の要素をメモリから削除することで、全体のメモリ消費を減らす。リスト全体ではなく、常に少量のアイテムだけが表示されるため、メモリに負担がかからない	コンテンツが欠落している場合にエラーが発生する可能性がある。画面に戻った要素が再描画される際に遅延が発生する可能性がある。特定のレイアウトやアニメーションによっては、適切に動作しない場合がある

MaxToRenderPerBatch

MaxToRenderPerBatchは、バッチごとに一度にレンダリングするアイテムの最大数を設定できるプロパティで、デフォルトは10です。この値を調整することで、スクロール中のパフォーマンスと応答性を最適化できます。小さな値はパフォーマンスを向上させるが、スクロール時に空白が表示される可能性があります。一方、大きな値はスクロール時の空白を減らしますが、初期のレンダリング時間が長くなることがあります。適切な値はアプリの具体的な使用状況によって異なります。

メリット	デメリット
クロール時の視覚的な空白部分が少なくなる（充填率が向上する)	1バッチあたりのアイテム数が多くなる。つまり、JavaScriptのパフォーマンスや応答性が低下する。このプロップスを使用する場合は、インタラクションのないリストを選択する必要があります。

UpdateCellsBatchingPeriod

このプロパティを使用すると、React NativeのVirtualizedListにバッチ処理の間隔をミリ秒単位で指定します。このプロパティを調整することにより、一定期間ごとにどの程度のアイテムをレンダリングするかをコントロールでき、アプリのスクロール性能のバランスを取るのに役立ちます。デフォルトは50です。

メリット	デメリット
maxToRenderPerBatchと組み合わせることで、完璧なバッチを実現できる。アイテム数の制御とアイテムの更新頻度を適切に調整することで、リストのスムーズなスクロールと応答性を保ちつつ、パフォーマンスの負担を最小限に抑えられる	適切な値の見極めが難しい。バッチ更新の頻度を低く設定すると、スクロール時に一時的な空白領域が現れることがあり、頻度を高くしすぎると、アプリの反応速度が遅れ、全体のパフォーマンスに影響を与える可能性があル。

InitialNumToRender

InitialNumToRenderは初期表示時にレンダリングするアイテムの数を設定します。このプロパティにより、アプリの起動時やリストが初めて表示される際のパフォーマンスを最適化することができます。適切な値を設定することで、アプリの起動速度とユーザー体験を向上させることが可能です。デフォルトは10です。

メリット	デメリット
初期ロードパフォーマンスの向上。初期表示に必要なアイテムの数を調整することで、アプリの起動時のレンダリングパフォーマンスを改善する。	リソースの過剰利用。必要以上に多くのアイテムを初期にレンダリングすると、メモリと処理能力を過剰に消費することがある

ReactNative外部ライブラリを選択する際の注意点

React Nativeアプリでは、ネイティブアプリと違ってJavaScriptバンドルがメモリに読み込まれ、JavaScript VMで解析・実行されるため、JavaScriptコードのサイズがアプリのパフォーマンスに大きな影響を与えます。読み込み中のアプリは反応しない時間があり、これを「TTI (time to interactive)」と呼びます。

この時間を短縮するためには、プロダクションバンドルに含めるライブラリを慎重に選び、容量の小さいものを使用することが重要です。特に大容量のライブラリを使う際は、同様の機能を持つ小型ライブラリがないか確認することが推奨されます。

ここでは、最も一般的な操作の1つである「日付の操作」を例に挙げます。経過時間を計算しようとしているところを思い浮かべてください。　moment.jsのライブラリ全体（72.3Kb）を解析のために使用するオプションがあります。

しかし、代わりにday.js(わずか2Kb)を使うことで、大幅に小さくなり、求める機能が提供できます。

代替手段がない場合、（経験則から言うと）基本的にライブラリのより小さな部分をインポートできるかどうかを確認してください。例えば、lodashのような多くのライブラリは、デッドコードの除去ができない環境をサポートするために、ユーティリティのセットを小さく分割しています。

例えば、Lodashマップを使用したい場合にライブラリ全体をインポートするのではなく、1つのパッケージをインポートするだけで済みます。

Lodashの一部のみを使用することで、アプリ全体にライブラリをインポートする必要がなくなります。これにより、数ミリ秒の短縮にしかなりませんが、累積するとアプリのパフォーマンスとユーザー体験の向上に大きく寄与します。

React Nativeでアニメーションを実装

アプリの世界では、スムーズなユーザーインターフェース、最適化されたインタラクションやユーザー体験を提供することが効果的に集客する唯一の方法です。モバイルユーザーは、外観が素晴らしく、アニメーションが常にスムーズに動作するインターフェースを好みます。

ここでは、ReactNativeでパフォーマンスをアニメーションを実装する方法についてご紹介します。

一度だけ実行されるアニメーションの場合

アニメーションを使用する画面のパフォーマンスを効果的に向上させる最もシンプルな方法は、ネイティブドライバーを活用することです。

ネイティブドライバーを有効にするには、上記のように useNativeDriver: true 属性を追加します。

React Native Reanimatedライブラリの使用も良い選択肢です。このライブラリは、Animatedライブラリと互換性のあるAPIと、アニメーションをより効率的に制御する関数群を提供しています。

ユーザーの操作で動くアニメーションの場合

この場合にアニメーションで実現できる最も望ましい結果は、ジェスチャーでアニメーションをコントロールできることです。ユーザーにとってこの部分がインターフェースの中で最も興味深い部分となります。

このような複雑なユースケースに対応するため、React Native Gesture Handlerというライブラリがあります。このライブラリをAnimatedと組み合わせることで、スワイプ操作などの要素を作成できます。ただし、JavaScriptのコールバックが必要な場合がありますが、それには解決策が存在します。

ジェスチャーを使ったアニメーションに最適なツールは、ReanimatedとGesture Handlerの組み合わせです。これらは連携して機能し、複雑なジェスチャー駆動アニメーションを効果的に作成する能力を持っています。

ここで問われるのは開発者の想像力です。（Reanimatedの高度なAPIを扱うコーディングスキルも必要）

React Nativeでのアニメーション実装には複数の正解があり、様々なアプローチやライブラリが存在します。この記事での提案はあくまで参考の一つですが、各社のニーズに合った方法を選ぶことが重要です。

JavaScriptだけで充分な場合もありますし、独自のアニメーションを使うことで滑らかで柔軟なアプリケーションを実現することも可能です。

まとめ

この記事では、React Nativeアプリのパフォーマンスを高める方法について解説しました。

FlatListの活用
RemoveClippedSubviewsやMaxToRenderPerBatchなどのプロパティの調整
外部ライブラリの適切な選択
60FPSでのアニメーションの実現

これらの方法を用いることで、より流れるようなユーザー体験と高いパフォーマンスのアプリを開発することが可能です。

この記事で紹介したのはごく基本的な方法ですが、これらの情報を出発点として、さらに深く探求することで、各状況に最適な解決策を見つけ出すことが可能です。

RabilooはReact Nativeアプリ開発を得意としています。効率の良いアプリ開発、コストを抑えたアプリ開発パートナーをお探しの企業様、ぜひお気軽にご相談ください。