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

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

#JavaScript

#iOS

#Android

#React

#React Native

諏訪悠紀

2018.09.01

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

React Nativeでサクサク開発！

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

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

Introducing Hot Reloading · React Native

今回は手元にある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 を入力してメールアドレスを設定すれば、指定のメールアドレス宛てにアプリを開くためのリンクを送ることができます。