Ichizokuは日本唯一のSentry公認販売業者です。
日本語のドキュメント、動画、サポート窓口で日本のお客様のSentry活用を支援します。

【React Native】ログ出力ガイド

07/10/2025

Article by: Matthew C.

コンソールによる基本的なログ出力は、アプリのデバッグや理解を始める上で良い出発点です。より大規模で複雑なアプリでは、追加情報の記録やログの永続化が有効になります。

このガイドでは、React Native においてログを作成・表示する方法、カスタムログをファイルに保存する方法を学びます。

JavaScript のログを中心に扱いますが、Sentry の React Native SDK を使用し、従来のログを超えたエラー・例外の自動報告やそれに至るイベントの可視化方法についても紹介します。

コンソールメソッドとログレベル

React Native では、Web ブラウザと同じコンソールメソッドが使用できます。

ほとんどのコンソールメソッドには、重大度（Severity）のレベルが割り当てられています。以下の 4 段階があり、軽いものから重いものの順に、それぞれの用途を示しています。

Verbose（冗長）：デバッグ用のログメッセージ。
Info（情報）：コードが期待通りに動作しているときのログ（例：ユーザーが支払いを完了した時）。
Warning（警告）：問題につながる可能性のあるイベントのログ。
Error（エラー）：実際のエラーのログ。

以下の表はよく使われるコンソールメソッドと、それぞれに割り当てられたログレベルを示したものです。

console.debug メソッドは、console.log や console.info と同様に動作しますが、ログレベルが異なります。console.trace メソッドは、スタックトレース（関数の呼び出し履歴）をコンソールに出力するために使用されます。

console.time と console.timeEnd メソッドを組み合わせて使用することで、処理にかかる時間を測定できます。

オブジェクトのログ出力

本番環境のアプリケーションでは、文字列よりもオブジェクトをログに出力した方が良い場合があります。

構造化されたログ出力（Structured Logging）により、JSON としてパース可能なログファイルが作成されます。これにより、監査ツールでログをデータベースのように検索できます。可能であれば、あらかじめログプロパティのセットを定義しておくと、ログの整理や検索がしやすくなり、エラー追跡や分析がよりスムーズになります。

コンソールログの表示方法

React Native の開発サーバーを起動すると、Metro バンドラーのターミナル上でコンソールログを確認できます。React Native の LogBox ツールは、エラーや警告を赤や黄色のバッジ付きで画面上に通知として表示します。LogBox API を使って、一部またはすべてのログを無視するように設定することができます。

console.table や console.dir などの高度なログ出力メソッドは、ターミナルには表示されません。React Native 0.76 で導入された組み込みデバッガ React Native DevTools を使えば、これらのログを表示でき、デバッグ体験が向上します。React Native DevTools は、React Native 向けに最適化された新しい JavaScript エンジン Hermes を使用しているすべてのアプリに対応しており、Expo ではこのエンジンがデフォルトで使用されています。

React Native では、Expo のような React Native フレームワークを使用して、本番対応アプリの構築をスムーズに始めることが推奨されています。Expo を使用している場合、開発サーバー起動後に j キーを押すことで、Google Chrome や Microsoft Edge でデバッガを起動できます。

React Native DevTools

DevTools の Console タブでは、フィルター入力欄の右側にある Default levels（デフォルトレベル） のドロップダウンメニューを使用して、ログレベルごとにログを絞り込むことができます。

console.debug などの「Verbose（冗長）」レベルのログは、デフォルトでは表示されません。

React Native 0.77 以降では、JavaScript のログが Metro から削除されるため、ログの確認には React Native DevTools を使用することが最善です。

ネイティブログの確認

ネイティブコードを含むプロジェクトでは、Android や iOS のネイティブログを確認する必要がある場合があります。

これらのログにアクセスするには、アプリのネイティブコード（iOS または Android）を生成し、Android Studio や Xcode のようなネイティブデバッグ機能を備えた IDE でアプリを実行する必要があります。

Android

まず、まだ設定していない場合は Android Studio と Android エミュレータをセットアップします。

次に、プロジェクトのネイティブコードを生成します。Expo を使用している場合は、以下のコマンドを実行して、Java や Kotlin コードを含む android フォルダをアプリのルートに追加します。

Android Studio でネイティブコードを開きます。

Android Studio からアプリをビルドし、実行中のアプリにデバッガを接続します。その後、Logcat を使用してネイティブログを確認できます。

iOS

macOS を使用している場合は、以下の手順で iOS アプリをビルドできます。

まず、Xcode と Watchman がセットアップされていることを確認してください。iOS エミュレータは macOS 上でのみインストール可能です。
アプリのネイティブコードを生成するには、以下の Expo コマンドを実行します。これにより、Objective-C や Swift コードを含む ios フォルダがアプリのルートに追加されます。

以下のコマンドを使って、Xcode でネイティブコードを開きます。

Xcode の左上にある再生ボタンをクリックするか、⌘ + R を押してアプリをビルド・実行します。

Windows や Linux で iOS アプリを開発する場合は、物理的な iOS デバイスと Apple Developer Program のメンバーシップが必要になります。

iOS デバイス向けのビルド方法については、Expo のドキュメントを参照してください。

アプリのビルド後は、LLDB（低レベルデバッガ）やその他の Xcode のデバッグツールを使って、ネイティブログを確認できます。

システムログで何が起きているかを確認する

デバイス上で発生しているすべてのログ（他のアプリや OS のログを含む）を確認したい場合は、以下のコマンドのいずれかを使用できます。

React Native ログ処理のカスタマイズ

より高度なログ処理が必要な場合は、ログ出力の流れをカスタマイズしたり、ローカルファイルに保存したり、リモートサーバーに送信したくなるでしょう。react-native-logs や react-native-file-logger のようなライブラリを使えば、こうした処理を簡単かつ迅速に実現できます。

react-native-logs は、Node.js の代表的なロギングライブラリ winston に似ていますが、よりシンプルです。主な機能は以下のとおりです。

カスタムログレベルの設定
ログをファイルに保存する機能
クラウド送信用のカスタムトランスポート（Sentry 対応を含む）
ログレベルごとのカスタム色設定
アプリ内の特定領域に限定したネームスペース付きログ出力

react-native-file-logger ライブラリは、使いやすさを重視して設計されており、コンソールメソッドと同じログレベルを使用します。カスタムログレベルの追加はできません。

このライブラリは、react-native-logs と比べて以下の 2 点で優れています。

メール送信機能：sendLogFilesByEmail メソッドを使って、ログファイルを簡単にメール送信できます。
サイズベースのローテーション設定：ログファイルの最大サイズや保持数をカスタマイズできます。

ただし、react-native-logs ライブラリには時間ベース（日次）のファイルローテーションしか用意されていません。サイズベースのファイルローテーション機能を追加したい場合は、自分で実装する必要があります。

react-native-logs ライブラリの使用方法

最も多機能でカスタマイズ性に優れたライブラリである react-native-logs は、ほとんどのユースケースに適しています。ここではこのライブラリをより詳しく見ていき、ログレベルのカスタマイズ、クラウド送信、ファイル保存の方法を学びます。

カスタムログレベルの作成

createLogger() メソッドは、引数なしで呼び出すと、debug、info、warn、error のログレベルを持つシンプルなロガーを作成します。

設定オブジェクトを使用して、独自のログレベルを定義することができます。

これらのレベルは、Node.js の代表的なログライブラリ winston でも使用されているものです。

severity はコンソールに出力される最小のログレベルを指定します。指定しない場合、デフォルトでは debug または最初のカスタムレベルが使用されます。

ロガーの各ログメソッドは、ログレベルとタイムスタンプを含んだ形式で出力されます。

ログメソッドにはオブジェクトも渡すことができます。

複数のメッセージ引数を指定した場合、ロガーはそれらを結合して出力します。

出力されるログは以下のようになります。

ログレベルの色をカスタマイズする

react-native-logs におけるトランスポートは、ログメッセージの表示・保存・送信を行う関数です。

consoleTransport を使うと、コンソールへのログ出力のフォーマットを変更できます。以下のようにインポートします。

colors プロパティを使用して、ログレベルごとに色を設定することができます。

使用できる色の種類には制限がある点に注意してください。

React Native DevTools でログの色を確認することができます。

React Native DevTools コンソール

ログをクラウドサービスに送信する

独自のカスタムトランスポートを作成すれば、ログをクラウドサービスに送信し、データベースに保存することができます。

カスタムトランスポート関数は、以下の引数を受け取ります。

msg: any：ロガーによって整形されたログメッセージ（形式：[時刻]｜[ネームスペース]｜[レベル]｜[メッセージ]）
rawMsg: any：元のログメッセージ
level: { severity: number; text: string }：ログレベル
extension?: string | null：ログのネームスペース（任意）
options?: any：transportOptions オブジェクト

ログをファイルに保存する

fileAsyncTransport を使うことで、ログをファイルに非同期で保存できます。

まず、expo-file-system または react-native-fs をインストールします。

Expo を使用していない純粋な React Native プロジェクトでは、react-native-fs ライブラリの RNFS を使うことができます。

transport プロパティに配列を渡すことで、複数のトランスポートを同時に使用できます。

各アプリは、以下のディレクトリ内にのみ読み書きアクセスが許可されています。

FileSystem.documentDirectory
FileSystem.cacheDirectory

react-native-logs には基本的なファイルローテーション機能があります。fileName に {date-today} を含めることで、fileAsyncTransport に毎日新しいファイルを作成させることができます。

Android Studio でログファイルを見る方法

開発中に Android のログファイルを確認する最も簡単な方法は、Android Studio エミュレータを使って仮想デバイス上でアプリをテストすることです。

Android ビルドがまだない場合は、以下の手順で作成します。

エミュレータを起動します。
Expo CLI のコンパイルコマンドを使ってアプリをローカルでビルドします。これにより、プロジェクトのルートディレクトリに android フォルダが生成されます。

このコマンドはローカルにインストールされた Android SDK を使ってプロジェクトを androidフォルダにコンパイルし、Android Studio のエミュレータにアプリをインストールして起動します。

すでに Android ビルドがある場合は、以下の手順で Android Studio で開きます。

開発サーバーを起動します。

s を押して開発ビルドに切り替えます。
次に a を押して、アプリを Android エミュレータで起動します。

Android Studio のエミュレータを使って、仮想 Android デバイス内のファイルシステムからログファイルを確認できます。

Android Studio でプロジェクトを開き、画面右側のツールウィンドウバーにある Device Explorer ボタンをクリックします。
FileSystem.documentDirectory を保存先として使用した場合、react-native-logs のログファイルは data/data/com.<アプリ名>/files フォルダ内に保存されています。

The Android Studio Device Explorer

ファイルを右クリックし、名前を付けて保存 (Save as) を選ぶことで、ログファイルを任意のフォルダに保存できます。

Xcode でログファイルを見る方法

開発中に iOS のログファイルを確認する最も簡単な方法は、Xcode シミュレータを使用することです。

iOS ビルドがまだない場合は、以下の手順で作成します。

Expo CLI のコンパイルコマンドを使ってアプリをローカルでビルドします。これにより、プロジェクトのルートに ios フォルダが生成されます。

このコマンドは、プロジェクトを ios フォルダにコンパイルし、その後 Xcode シミュレータにアプリをインストールして起動します。

すでに iOS ビルドがある場合は、以下の手順で Xcode で開きます。

開発サーバーを起動します。

s を押して開発ビルドに切り替えます。
続いて i を押すと、iOS アプリが Xcode シミュレータで起動されます。

ログファイルの保存場所をコンピュータ上で確認する方法は 2 通りあります。

以下のコンソールログを使用する方法

現在起動しているシミュレータにインストールされているアプリを一覧表示するには、Xcode のコマンドラインツールを使用します。

出力されたオブジェクトには、org.name.your-app-name というプロパティがあり、その中の DataContainer プロパティの値が、シミュレータ上の iOS デバイスストレージへのファイルパスです（file:// の接頭辞は除く）。

Sentry を React Native アプリに統合する

よく聞かれる質問に「Sentry は単なるログ出力ツールではないのか？」というものがあります。Sentry はログ出力の代替ではなく、それを補完する存在です。ログ出力は、アプリケーション内のすべてのイベントを追跡し、それをファイルやデータベースに記録して監査可能にするものですが、Sentry はアプリケーションのエラーや例外の報告に特化しています。例外とは、構文エラーなど、通常のコード実行を中断させるイベントのことです。Sentry はその原因に関する詳細なデータを収集し、本番環境での再現・修正に必要な情報を提供してくれます。Sentry ではアラートを設定することで、コードの不具合やそれがユーザーに与える影響をリアルタイムで監視することも可能です。

Sentry の React Native SDK は、アプリ内のエラーや例外を自動で報告し、以下のような追加機能も有効にできます。