Vegaアプリでのトレースの検査
トレースは、コード内の特定のポイント間の実行時間を測定して、Vegaアプリのパフォーマンスのボトルネックを特定するために役立ちます。アプリの応答が遅い場合や遅延が発生する場合、トレースを取得すると、実行中にどの部分に時間がかかっているかを明らかにすることができます。特に、頻繁に呼び出される関数や負荷の高い操作を調べるときに役立ちます。
Vegaには、アプリのパフォーマンスを分析するためのトレースシステムであるPerfetto（英語のみ）のサポートが組み込まれています。コードの特定の領域を追跡するには、Systrace（英語のみ）を使用してトレースポイントを追加できます。これは、JavaScriptからトレースを出力できるようにするReact Native APIです。
このページでは、以下の手順について説明します。
アプリへのトレースの追加
Systraceを使用して、コードの次の領域にトレースポイントを追加することを検討してください。
- 頻繁に実行される関数
- 実行に時間がかかる操作
- ユーザー操作に対応するイベントハンドラー
- パフォーマンスの問題が疑われる領域
フォーカスのパフォーマンスのトレース
TouchableOpacityコンポーネントを含むFlatListのスクロール中にフォーカスが遅くなる動作を調査するときは、onFocusコールバック関数の前後にトレースを追加します。
例：
// VegaVideoAppでのSystraceコードの例
import { Systrace } from "react-native";
const FocusableElement = ({
focusableElementRef,
children,
onPress,
onBlur,
onFocus,
getFocusState,
onFocusOverrideStyle,
style,
hasTVPreferredFocus,
...otherProps
}: FocusableElementProps) => {
const [isFocused, setIsFocused] = useState(false);
const focusHandler = () => {
Systrace.beginEvent("VegaVideoApp:FocusedElement:onFocus"); // ---> トレース開始
setIsFocused(true);
getFocusState?.(true);
onFocus?.();
Systrace.endEvent(); // ---> トレース終了
};
const blurHandler = () => {
setIsFocused(false);
getFocusState?.(false);
onBlur?.();
};
return (
<TouchableOpacity
ref={focusableElementRef}
activeOpacity={1}
hasTVPreferredFocus={hasTVPreferredFocus}
onFocus={focusHandler}
onBlur={blurHandler}
onPress={onPress}
style={[style, isFocused ? onFocusOverrideStyle : undefined]}
testID={otherProps.testID}
{...otherProps}
>
{children}
</TouchableOpacity>
);
};
アプリのトレースを記録する
必要なトレースをアプリのJSコードに追加したら、アプリを再ビルドし、Vegaデバイスで実行して、トレースを記録します。
手順1： アプリを再ビルドする
アプリを再ビルドして、パフォーマンストレースをアプリバンドルに取り込みます。トレースを正確に測定するために、必ずReleaseビルド構成を使用してください。ビルド手順については、アプリのビルドを参照してください。
手順2： アプリをインストールして実行する
再ビルドしたバージョンのアプリをインストールして実行し、トレースデータの収集を開始します。トレースを正確に測定するために、必ずVega対応デバイスでアプリを実行してください。Vegaデバイスでアプリを実行する手順については、アプリの実行を参照してください。
手順3： アプリのトレースを記録する
次の手順を使用して、パフォーマンスの問題のトレースを記録します。
-
オプション1： Vega StudioのActivity Monitor
-
オプション2： コマンドラインインターフェイス
a.
kepler exec perf record --app-name <<対話型コンポーネントのID>>コマンドを実行して、トレースを記録します。b. 記録コマンドが機能しない場合は、
kepler exec perf activity-monitor --app-name <<対話型コンポーネントのID>>を実行します。たとえば、スクロールの問題に関するトレースを記録するには、次の手順に従います。
- アプリを起動します。
- Activity Monitorを実行します。
- 記録を開始します。
- アプリ内でスクロールを実行します。
- 記録を停止します。
generatedディレクトリの下の出力ファイル 記録が完了すると、Activity Monitorによってプロジェクトの
generatedディレクトリに出力ファイルが作成されます。ディレクトリの名前は記録のタイムスタンプを示します。Activity Monitorは、プロジェクトディレクトリに以下のトレースファイルを生成します。
ファイル名 説明 iter*_trace*_-converted.json Vega Studioと互換性のあるTrace Event Format（英語のみ）のJS CPUプロファイラートレースファイル。 iter*_trace*_-original.json Chrome DevToolsと互換性のあるTrace Event Format（英語のみ）のJS CPUプロファイラートレースファイル。 iter*_vs_trace Perfettoトレースファイル。 *trace-recorder.json Activity Monitorによって記録されたトレースファイル。
このファイルをRecording Viewで開くと、Activity Monitorで収集されたデータを検査することができます。
Perfetto UIでのアプリのトレースの分析
トレースを収集したら、Perfetto UI（英語のみ）を使用してカスタムトレースの継続時間と呼び出しパターンを分析します。
-
Perfetto UIでトレースファイルを開きます。
Perfettoの [Open trace file] - [Open trace file] をクリックします。
- generatedディレクトリからiter*_vs_traceファイルを選択します。
- generatedディレクトリからiter*_vs_traceファイルをPerfetto UIウェブページにドラッグします。
- トレースが読み込まれるまで待ちます。
-
上部の検索バーにトレース名を入力して、追加したトレースを検索します。
次の画像は、
onFocusハンドラーに追加されたVegaVideoApp:FocusedElement:onFocusトレースを示しています。
onFocusハンドラーに追加されたトレース Vega Studio拡張機能がインストールされている場合は、VS Codeでトレースファイルを直接開くことができます。
- VS Codeのプロジェクトで生成されたディレクトリに移動します。
- 表示するトレースファイルをクリックします。ファイルはVS Code内のPerfetto UIで開きます。
各トレースについて、次の操作を行います。
- すべての記録箇所で継続時間を分析して、想定された動作を検証します。
- 下に表示されるスタックトレースを調べて、想定された呼び出しパターンを確認します。
トラブルシューティング
トレースが終了しない
Perfetto UIでトレースが完了しないように見える場合は、コード内でSystrace.endEvent() API呼び出しが実行されることを確認してください。
例：
関数内に早期のreturnステートメントがあり、Systrace.endEvent()がその後に置かれていて実行されない状況では、トレースが完了しないように見える結果になります。
関連トピック
Last updated: 2025年10月1日
