React NativeアプリをiOSデバイス(iPhone)でホットリロードする

モバイルアプリのクロスプラットフォームフレームワーク「React Native」では、簡単にiOSデバイス(実機)でホットリロードを利用したデバッグが行えます。このブログでは、iOSデバイスでホットリロードを行うための手順を解説します。
2018.09.01

React Nativeでサクサク開発!

React Native は、Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワークです。言語としてJavaScriptを使用し、React.jsを触ったことがある人であれば気軽にモバイルアプリ開発を始められます。

React Nativeは ホットリロード に対応しており、アプリを実機またはエミュレータ(シミュレータ)で実行した後は、ソースコードを保存するたびに自動でリロードが行われます。この機能を活用することにより、UIの構築などがサクサク行えます。

今回は手元にあるiOSデバイス(iPhone 5s)で試してみました。なお、下記の記事で環境構築およびサンプルプロジェクトの作成は済んでいる前提で進めています。

【お試し10分】React Nativeことはじめ!サンプルアプリをサクッと動かす

検証環境

以下の環境で試しました。

  • macOS High Sierra 10.13.2
  • Node.js 9.8.0
  • yarn 1.7.0
  • React 16.3.1
  • React Native 0.55.2
  • Xcode 9.0
  • iPhone 5s
  • iOS 11.4

また、環境として MacとiOSデバイスは同じネットワークで接続していること が前提になります。なお、Macでアンチウイルスソフトなどを導入している場合はファイアーウォールによってポートが閉じられていることがありますので、うまく繋げない場合は一時的に無効化するなど、ファイアーウォールの設定を見直してください。

それはそうと、iPhoneを早く買い換えたい!

iOSデバイスでの環境の準備(Expoアプリのインストール)

実機でのデバッグにはExpoというツールを利用します。Expoについての解説は、また別の機会にしたいと思います。

iOSデバイスで、以下のリンクからExpoアプリをインストールします。

とりあえずデバッグするだけであればアカウント作成などは不要で、インストールしているだけで良いです。

サンプルアプリをiOSデバイスで動かす

まずサンプルアプリを次のコマンドで動かします。

$ yarn start
yarn run v1.7.0
$ react-native-scripts start
22:51:28: Starting packager...
Packager started!

【QRコードが表示される】

Your app is now running at URL: exp://192.168.11.7:19000

View your app with live reloading:

  Android device:
    -> Point the Expo app to the QR code above.
       (You'll find the QR scanner on the Projects tab of the app.)
  iOS device:
    -> Press s to email/text the app URL to your phone.
  Emulator:
    -> Press a (Android) or i (iOS) to start an emulator.

Your phone will need to be on the same local network as this computer.
For links to install the Expo app, please visit https://expo.io.

Logs from serving your app will appear here. Press Ctrl+C at any time to stop.

 › Press a to open Android device or emulator, or i to open iOS emulator.
 › Press s to send the app URL to your phone number or email address
 › Press q to display QR code.
 › Press r to restart packager, or R to restart packager and clear cache.
 › Press d to toggle development mode. (current mode: development)

Expoがインストール済みの場合、標準のカメラアプリでQRコードを読み取るだけで起動できます。または s を入力してメールアドレスを設定すれば、指定のメールアドレス宛てにアプリを開くためのリンクを送ることができます。

ソースコード App.js を編集して保存すると、自動でリロードが走ります(下図のキャプチャの下部で、リロード処理の進捗が表示されています)。

無事に更新されました!

なお 他のiOSデバイスやシミュレータなども同時に接続することができます。 例えばAndroidデバイスとiOSデバイスを同時に一気に確認しながら開発もできます。捗りますね!

ホットリロードは開発の救世主

特にWebアプリ開発者の方であれば馴染み深いホットリロードですが、モバイルアプリ開発でも使えるのは非常に捗りますよね。ホットリロードがあるのとないのとでは開発スピードがだいぶ違います。サクサク開発していきましょう!

参考記事

本記事の執筆にあたって、次の記事を参考にさせていただきました。