アプリのパフォーマンスに関するよくある質問（FAQ）
詳細を知りたいトピックを選択してください。
TVアプリのパフォーマンスに関する一般的な問題を解決する方法のビデオ
このビデオでは、パフォーマンスに関する次の問題について説明します。
- アプリの起動が遅い
- スクロールが遅い
- キー操作の遅延
- アプリのメモリの問題
アプリの起動
アプリの起動のパフォーマンスは、ユーザーエクスペリエンスに直接影響を与えます。アプリの起動が遅いと、ユーザーの不満が募り、アプリを利用しなくなる可能性があります。開発中にコードを最適化すると、アプリの起動時間を短縮できます。
一般的な原因には次のようなものがあります。
- JavaScript（JS）バンドルサイズが大きい。
- アプリ起動時のネットワークリクエストの待ち時間が長い。
Q： アプリの起動のパフォーマンスが重要なのはなぜですか。
A： アプリの起動のパフォーマンスはユーザーエクスペリエンスに影響するため重要です。起動が遅いと第一印象が悪くなり、ユーザーがアプリを利用しなくなる可能性があります。詳細については、アプリのKPIの測定を参照してください。
Q： アプリの起動のパフォーマンスを測定するための主な指標は何ですか。
A： アプリの起動のパフォーマンスを測定するための主な指標は次のとおりです。
- 最初のフレームまでの時間（TTFF）
-
最初の描画までの時間（TTFD）
詳細については、アプリのKPI指標とガイドラインを参照してください。
Q： どのようなシナリオでアプリを起動できますか。
A： アプリの起動は次のシナリオで発生します。
- コールドスタート - アプリをゼロから起動する
-
ウォームスタート - アプリをバックグラウンドから再開する
詳細については、起動シナリオを参照してください。
Q： 起動のパフォーマンスを測定するために利用できるツールにはどのようなものがありますか。
A： アプリの起動のパフォーマンスを測定するには、以下のツールを使用します。
-
Vega App KPI Visualizer（推奨方法）
詳細については、アプリのKPIの測定を参照してください。
-
Perfettoを使用したトレース分析
詳細については、トレースの検査を参照してください。
Q： TTFDの測定はどの程度信頼できますか。
A： TTFDの精度は、useReportFullyDrawnフックを使用したfully_drawn markerの正しい配置によります。詳細については、描画完了マーカーを参照してください。
Q： アプリの起動が遅くなる原因は何ですか。
A： アプリの起動が遅くなる主な原因は次のとおりです。
- ネットワーク遅延
- JSスレッドがビジー状態である
- UIコンポーネントが重い
- 過剰な再レンダリング
- リスト構成が最適化されていない
- JSバンドルサイズが大きい
- 画像処理が非効率的
- ネイティブのSplashScreenが見つからない
Q： アプリの起動のパフォーマンスを向上させるにはどうすればよいですか。
A： 以下の解決策でアプリの起動のパフォーマンスを向上させることができます。
-
ネイティブのSplashScreen APIを実装します。
詳細については、SplashScreenマネージャーを参照してください。
-
画像の使用状態とサイズを最適化します。
詳細については、画像コンポーネントを参照してください。
-
不要な再レンダリングを最小限に抑えます。
詳細については、再レンダリングと再定義の回避を参照してください。
-
リストコンポーネントを最適に構成します。
詳細については、大規模なリストの処理方法を参照してください。
-
JSバンドルサイズを小さくします。
詳細については、バンドルサイズの削減を参照してください。
-
効率的な画像キャッシュを使用します。
Q： ネットワーク関連の起動の問題をデバッグする方法を教えてください。
A： ネットワーク関連の起動の問題をデバッグするには、ネットワークプロキシを使用することで、呼び出しを調査したり、複数のテストを繰り返して比較したり、サーバーの応答時間とデータ量を分析したりできます。詳細については、ネットワークプロキシによるトラフィックのモニタリングを参照してください。
Q： JSスレッドの問題を特定するにはどうすればよいですか。
A： JSスレッドの問題を特定するには、以下を使用します。
-
カスタムマーカー用のRN Systrace JS API
詳細については、トレースの検査を参照してください。
-
起動モードCPUプロファイラー
詳細については、起動モードでの記録の実行を参照してください。
-
Thread State Visualizer
詳細については、スレッドの状態についてを参照してください。
-
why-did-you-render（wdyr）ツール
詳細については、コンポーネント再レンダリングに関する問題の調査を参照してください。
Q： JavaScriptスレッドが8秒以上ブロックされている場合、この種のクラッシュを診断するにはどうすればよいですか。
A： JSスレッドが8秒以上ブロックされたままになると、システムはアプリを終了します。この問題は、集約クラッシュレポート（ACR）を調べることで解決できます。Vega Studioでのアプリクラッシュのデバッグの手順に従ってください。
次のエントリは、ブロックされたJSThreadがクラッシュを引き起こしたことを示します。
LCM_ANR_THREAD_NAME: JSThread
LCM_ANR_REASON: Thread Monitor
JavaScriptモードを使用してクラッシュファイルをシンボリケートし、クラッシュ前のJS実行状態を識別することができます。コードにターボモジュール呼び出しが含まれる場合は、ネイティブモードでシンボリケートします。Vega Studioでのアプリクラッシュのデバッグの、ネイティブモードのシンボリケーションについての手順に従ってください。
スクロールが遅い
スクロールが遅くなったりカクカクとしたりするのは一般的なUIパフォーマンスの問題で、リストのナビゲーションの滑らかさに影響を与えます。スムーズなスクロールでは、ユーザーがコンテンツを動かしたときに表示の途切れや遅れが生じることなく、一貫したフレームレートが維持されています。
一般的な原因には次のようなものがあります。
- リストのレンダリング効率が悪い。
- JSスレッドの計算負荷が高い。
- リストアイテムのレイアウトが複雑である。
- 画像またはメディアコンテンツが大きい。
- スクロール中の再レンダリングが多すぎる。
Q： スクロールが遅い問題を調査するにはどうすればよいですか？
A： スクロールが遅い問題を検出するには、次のツールを使用します。
-
Vega App KPI Visualizerを使用して、UIの滑らかさ（%）KPIの測定と追跡を行います。
詳細については、滑らかさとフォアグラウンドメモリの測定を参照してください。
-
JS CPUプロファイリングを使用して、JSスレッドで実行に時間がかかっているホット関数やコードを特定します。
詳細については、CPU使用率のモニタリングを参照してください。
-
Flashlightは、アプリで実行されているすべてのスレッド間でのCPU使用率を追跡します。スレッドには、 JSスレッド、UIスレッド、レンダリングスレッドが含まれます。
詳細については、Flashlightによるアクティビティのモニタリングを参照してください。
-
JSスレッド状態の可視化を使用して、アプリのJSスレッド、UIスレッド、レンダリングスレッドのスレッド状態を追跡します。
詳細については、スレッドの状態についてを参照してください。
-
React DevToolsプロファイラー
詳細については、React DevToolsを使用してコンポーネントのレンダリングを検査するを参照してください。
-
why-did-you-render（wdyr）ツール
詳細については、コンポーネント再レンダリングに関する問題の調査を参照してください。
Q： スクロールが遅くなるのを防ぐにはどうすればよいですか？
A： 次の最適化戦略を実装します。
-
不要な再レンダリングを回避します。
詳細については、再レンダリングと再定義の回避を参照してください。
-
画像を最適化します。
詳細については、画像コンポーネントを参照してください。
-
オーバードローを削減します。
詳細については、オーバードロー検出を参照してください。
-
アニメーションのベストプラクティスに従います。
-
デバウンスを実装して実行を遅延させます。デバウンスとは、入力が停止した後にのみ関数を実行する手法です。
- 検索入力： 入力の終了後に処理を実行します。
- ウィンドウのサイズ変更： サイズが確定してから更新を行います。
-
一定間隔の処理にはスロットリングを使用します。スロットリングとは、関数呼び出しを固定間隔に制限する手法です。
- スクロールハンドラー： 位置を定期的に更新します。
- ライブアップデート： 設定された間隔でデータを更新します。
- リアルタイムフィルター： 入力を定期的に処理します。
例：
import debounce from "lodash/debounce";
import throttle from "lodash/throttle";
const SearchWithLodash = () => {
// デバウンスを適用した検索
const debouncedSearch = useCallback(
debounce((query) => {
fetchSearchResults(query);
}, 300),
[],
);
// スロットリングを適用したスクロールハンドラー
const throttledScroll = useCallback(
throttle(() => {
// スクロールの処理
}, 100),
[],
);
return (
<View>
<TextInput onChangeText={debouncedSearch} />
</View>
);
};
キー押下時の遅延が大きい
キー押下遅延は、TVのリモコンボタンを押してからアプリが応答するまでの遅延を示します。TVユーザーは、リモコンを操作したらすぐに反応が返ってくることを期待しているため、この指標はユーザーエクスペリエンスにとって重要な意味を持ちます。
一般的な原因には次のようなものがあります。
-
JavaScriptスレッドがビジー状態である。
- JSスレッドでの計算（アニメーション、同期操作）の負荷が高い。
- コンポーネントが不要に再レンダリングされている。
- イベント処理の効率が悪い。
-
JSスレッドのスタベーションが発生している。
- OS上のほかのアプリやプロセスによるCPU使用率が高い。
- バックグラウンドタスクが干渉している。
Q： キー押下遅延の問題を調査するにはどうすればよいですか？
A： キー押下遅延の問題を検出するには、次のツールを使用します。
-
JSスレッド状態の可視化を使用して、アプリのJSスレッド、UIスレッド、レンダリングスレッドのスレッド状態を追跡します。
詳細については、スレッドの状態についてを参照してください。
-
JS CPUプロファイリングを使用して、パフォーマンスのボトルネックを特定します。
詳細については、CPU使用率のモニタリングを参照してください。
-
React DevToolsプロファイラー
詳細については、React DevToolsを使用してコンポーネントのレンダリングを検査するを参照してください。
-
why-did-you-render（wdyr）ツール
詳細については、コンポーネント再レンダリングに関する問題の調査を参照してください。
Q： キー押下が遅くなるのを防ぐにはどうすればよいですか？
A： 次の最適化戦略を実装します。
- TVEventHandlerを使用します。
-
フォーカス管理を最適化します。
詳細については、フォーカス管理UIの最適化を参照してください。
-
不要な再レンダリングを回避します。
詳細については、再レンダリングと再定義の回避を参照してください。
-
デバウンスまたはスロットリングを実装します。
詳細については、スクロールが遅いを参照してください。
アプリのメモリが不足する
Vegaプラットフォームでは、アプリとシステムサービスを並行して実行するためにメモリを最適化し、シームレスなユーザーエクスペリエンスを実現しています。以下の厳密なメモリ制限がプラットフォームによって適用されます。
- フォアグラウンドアプリ： 420MB
- バックグラウンドアプリ： 150MB
アプリがこれらの制限を超えると、システムはLow Memory Kill（LMK）イベントをトリガーし、アプリをクラッシュさせてユーザーエクスペリエンスを中断します。また、メモリ使用量が多い場合、JSスレッドでガベージコレクション（GC）サイクルに費やされる時間が長くなるため、アプリの速度も低下します。安定したスムーズなユーザーエクスペリエンスを維持するには、以下を行うことが重要です。
- アプリのメモリ使用量をモニタリングする。
- 最も多くのメモリを消費しているオブジェクトを特定する。
- 不要なメモリ割り当てを排除する。
Q： メモリの問題を調査するにはどうすればよいですか？
A： メモリの問題を検出するには、次のツールを使用します。
-
Memory Monitor - Vegaアプリのメモリ使用量をリアルタイムで追跡し、アプリがメモリ制限に近づいた時点や制限を超えた時点を示します。
詳細については、Memory Monitorを使用したアプリの検査を参照してください。
-
Chrome DevTools（CDT）- JavaScriptのメモリ消費量のプロファイリングを行い、ヒープスナップショットと割り当てタイムラインを通じてメモリリークの特定を支援します。
詳細については、Chrome DevToolsを使用したアプリのプロファイリングを参照してください。
-
Memlab - 異なるユーザーフロー間でヒープスナップショットを比較して、メモリリークを特定します。
詳細については、JavaScriptヒープスナップショットを分析するを参照してください。
-
Vega App KPI Visualizer - フォアグラウンドメモリやバックグラウンドメモリなどのメモリKPIのモニタリングを支援します。
詳細については、アプリのKPIの測定を参照してください。
Q： メモリが遅くなるのを防ぐにはどうすればよいですか？
A： 次の最適化戦略を実装します。
-
タイマーとリスナーをクリーンアップします。
詳細については、リスナー、イベントサブスクリプション、タイマーを参照してください。
-
クロージャスコープでリークが発生しないようにします。
大きいオブジェクトへの参照を保持するクロージャは、メモリリークを引き起こします。これらのオブジェクトはガベージコレクターで解放できないため、メモリが蓄積していきます。定期的にクリーンアップを行うと、使用されていないメモリをガベージコレクターで確実に解放できるようになります。
例：
function leakyFunction() { const bigArray = new Array(1000000).fill(0); return function () { // bigArrayはクロージャによって暗黙的にキャプチャされます。 console.log("Hello, World!"); }; } leakyFunction(); // bigArrayは不要になってもメモリに残ります。関連トピック
Last updated: 2025年9月30日
