📱

React Nativeの周辺ツールを理解する

Takeshi Tsukamoto

2024/12/04に公開

この記事はReact Native 全部俺 Advent Calendar 4日目の記事です。
https://adventar.org/calendars/10741

 このアドベントカレンダーについてこのアドベントカレンダーは @itome が全て書いています。
基本的にReact NativeおよびExpoの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はXにお願いします。

 React Nativeの周辺ツールを理解するReact Nativeでアプリを開発する際、コードを書くだけでなく、デバッグやコード品質の維持のために様々なツールを使います。今回はReact Native開発で使用する主要な開発ツールについて解説します。

 TL;DRChrome DevToolsがそのまま使えるので、Webフロントエンド開発者は違和感なくデバッグできる
ExpoプロジェクトではESLintとPrettierが最初から設定されている
React Native DevToolsとmetroバンドラーを理解することで効率的な開発が可能

 MetroバンドラーReact Nativeアプリのビルドには、Metroというバンドラーが使用されます。MetroはReact Native専用に開発されたJavaScriptバンドラーで、以下のような役割を担っています：
コードの変換
ES6やTypeScriptのコードをネイティブアプリが解釈できる形式に変換
JSXの変換やBabelによる最適化も行う
依存関係の解決

import文やrequire文を解析して、必要なモジュールを集める
循環参照の検出とエラー報告
アセットの管理
画像やフォントなどのリソースファイルの最適化
プラットフォーム固有のファイル（.ios.jsや.android.js）の適切な選択
Hot Reloading
コード変更時の即時反映
また、開発中はMetroバンドラーがローカルサーバーとして動作し、デバイスやシミュレータにJavaScriptコードを提供します。

 React Native DevToolsReact NativeのデバッグにはChrome DevToolsが使えます。これはReact Native開発の大きな利点の一つです。Webフロントエンド開発者であれば、普段使い慣れたツールでモバイルアプリのデバッグができます。

 セットアップ方法開発サーバーを起動した状態でシミュレータやデバイスのDeveloper Menuを開き、「Debug with Chrome」を選択するだけです。特別な設定は必要ありません。

 コンソールデバッグJavaScriptのコードは通常のWeb開発と同じようにconsole.log()などを使ってデバッグできます。
function MyComponent() {
  console.log('Component rendered');
  return <View><Text>Hello World</Text></View>;
}
ネイティブ側のログも確認できます。iOS SimulatorであればXcodeのコンソール、Android EmulatorであればLogcatに出力されます。

 パフォーマンスモニタリングReact Native DevToolsには強力なパフォーマンスモニタリング機能が備わっています。
[パフォーマンスタブのスクリーンショットをここに挿入]
主な機能：
フレームレートモニタリング
JSスレッドとUIスレッドの両方のフレームレートを確認できます
アニメーションの滑らかさをリアルタイムで確認できます
メモリ使用量の追跡
メモリリークの早期発見に役立ちます
ヒープスナップショットで詳細な分析が可能です
ネットワークリクエストの監視
APIコールのタイミングと所要時間を確認できます
レスポンスの内容も確認できます

 ネットワークログの監視Network Inspectorを使うことで、アプリ内のすべてのネットワークリクエストを監視できます。
[Network Inspectorの画面をここに挿入]
主な機能：
リクエストの詳細表示
HTTPメソッド、URL、ステータスコード
リクエストヘッダーとレスポンスヘッダー
リクエストボディとレスポンスボディ
タイムライン表示
リクエストの時系列表示
Waterfall形式での所要時間分析
フィルタリング機能
URLやメソッドによる絞り込み
ステータスコードによるフィルタリング
特に便利な使い方：
// ネットワークログの詳細を出力
fetch('https://api.example.com/data')
  .then(response => {
    console.log('Response headers:', response.headers);
    return response.json();
  })
  .then(data => console.log('Response data:', data));

 React Developer ToolsReact Developer Toolsも使用できます。コンポーネントツリーの確認や、propsやstateの変更をリアルタイムで確認できます。React Developer Toolsは個別のアプリとしても提供されていますが、Chrome上のDeveloper Toolsにも統合されているので、そちらを使う方が便利です。
特に便利な機能を紹介します
コンポーネントの検索
大規模なアプリケーションでも目的のコンポーネントをすぐに見つけられます
フィルタリング機能で特定のコンポーネントに絞り込めます
プロパティの編集
選択したコンポーネントのpropsやstateをその場で編集できます
スタイルの微調整に特に便利です
パフォーマンスプロファイリング
不必要な再レンダリングを発見できます
レンダリング時間の長いコンポーネントを特定できます

 Linter & FormatterExpoプロジェクトではESLintとPrettierの利用が推奨されています。expo lintコマンドを実行することで初回に.eslintrc.jsファイルをExpoが自動で作成してくれます。

 ESLintExpoプロジェクトのデフォルトの.eslintrc.js：
// https://docs.expo.dev/guides/using-eslint/
module.exports = {
  extends: 'expo',
  ignorePatterns: ['/dist/*'],
};
expo設定には、React NativeとExpoプロジェクトに最適化されたルールセットが含まれています：
React Hooksのルール
アクセシビリティのベストプラクティス
Expoの推奨設定

 Prettierprettierをプロジェクトにインストールして以下のように設定することで、eslintの実行時に同時にprettierのフォーマットチェックも行えるようになります。
npx expo install -- --save-dev prettier eslint-config-prettier eslint-plugin-prettier
module.exports = {
  extends: ['expo', 'prettier'],
  plugins: ['prettier'],
  ignorePatterns: ['/dist/*'],
  rules: {
    'prettier/prettier': 'error',
  },
};

 まとめReact Native開発では、Webフロントエンド開発でおなじみのツールがそのまま使えることが大きな利点です。

これらのツールを使いこなして快適なReact Nativeライフを！

 参考リンクReact Native Debugging
Metro Bundler Documentation
Expo Development Tools
React Native DevTools
ESLint Configuration for Expo