React Nativeアプリをオフラインで開発する:古典的だけど確実な3ステップ手法

著者:Panth Solanki

React Nativeを学ぶのに絶好のタイミングは今です。開発環境の構築方法は主に2通りありますが、この記事ではExpoを使用して、Android端末をインターネット接続なしで直接PCにつないでアプリを開発する方法に焦点を当てます。

インターネットが使える環境なら、端末のExpoクライアントアプリ経由で簡単に開発できます。しかし、月間のデータ通信量を節約したい、モバイル回線やWi-Fiの接続が不安定、あるいはあえて昔ながらのスタイルで開発したい――そんな事情があるときでも心配はいりません。必要なのはわずか3つのステップだけです。

なお、本記事の手順は開発マシンがWindows、ターゲット端末がAndroidの場合を想定しています。

1. 事前準備

まず、PCにADB(Android Debug Bridge)ドライバーをインストールします。ドライバーの入手元と具体的な導入手順は、各配布ページの案内に従ってください。

インストールが完了したら、Android端末をPCにUSB接続し、コマンドプロンプトを開いて次のコマンドを実行します。

adb devices

「List of devices attached」の下にデバイス名が表示されれば、準備は完了です。何も表示されない場合は、ADBドライバーが正しくインストールされていない可能性がありますので、設定を見直しましょう。

注意: 端末側では、開発者向けオプション内のUSBデバッグを必ずオンにしておいてください。

さらに、Google PlayストアからExpo Client(現在の名称はExpo Go)アプリを端末にインストールしておきます。

2. React Nativeプロジェクトの作成

公式ドキュメントの手順に沿ってプロジェクトを作成します。Node.js 10以上がインストール済みであることを前提に、以下のコマンドを順番に実行してください。

npm install -g expo-cli
expo init AwesomeProject
cd AwesomeProject
npm start

これらのコマンドを実行すると、ブラウザでhttps://localhost:19002が開きます(自動的に開かない場合は、手動でURLにアクセスしてください)。

localhostの画面にTunnel Readyと表示されたら、いよいよ出番です。ここからが魔法の時間です:)

Tunnel Ready と表示されれば、開発の準備は整いました

3. 端末との接続(セットアップ後の手順)

Android端末をPCに接続した状態で、新しいコマンドプロンプトを開き、以下のコマンドを順に実行します。

adb devices
adb -s reverse tcp:8081 tcp:8081

1行目のコマンドで、接続中のデバイス名を確認できます。2行目はポート8081をリバース転送するためのコマンドで、正常に実行されても特に出力はありません(エラーメッセージが出なければ成功です)。

続けて、ブラウザでhttps://localhost:19002を開き、Run on Android device/emulatorをクリックします。

Run on Android device/emulator をクリックすると、端末上でアプリが起動します

すると、端末側でJavaScriptバンドルの読み込みが始まります。すべてのバンドルのロードが完了すると、アプリが端末上でライブ実行され、ブラウザのサイドバーにも接続されたデバイスが表示されます。

サイドバーに自分の端末が表示されます

デバッグの方法

ブラウザ画面の右上にあるボタンをクリックすると、デバッガーを開けます。端末に渡されているデータやログをリアルタイムで確認できるため、開発効率が大きく向上します。

右上のボタンをクリックすれば、端末に送られているデータを確認できます

補足:最新のExpoについて

現在のExpoでは、グローバルインストール型のexpo-cliは非推奨となり、「npx create-expo-app AwesomeProject」というコマンドでプロジェクトを作成する方式が標準になっています。ただし、今回紹介しているadb reverseによるポート転送を使ったオフライン開発の考え方自体は変わっていません。環境に合わせて使い分けてください。

まとめ

インターネット接続が不安定な環境でも、通信量を節約したい場面でも、ADBのリバースポートフォワーディングを活用すれば、快適にReact Nativeアプリを開発できます。たった3ステップなので、ぜひ一度試してみてください。

この情報が皆さんのお役に立てば幸いです。質問があれば、お気軽にコメントしてください。喜んでお手伝いします。最後までお読みいただき、ありがとうございました。

無料でプログラミングを学びませんか。freeCodeCampのオープンソースカリキュラムは、これまで4万人以上の人々を開発者としての就職へと導いてきました。