React NativeをMacで試してみた(環境構築〜動作確認まで)

React Nativeを試してみたいけどiPhoneの場合実機で確認するにはデベロッパープログラムの登録が必要で、私が持っている実機はiPhoneのみなのでどうしようかと思っていました。

安いAndroid端末でも買おうか迷っていましたが、下記の記事を読んでいてExpoという存在を知りました。

制限はあるもののかなり簡単に実機での確認ができるようになっているようなので早速試してみました。

参考サイト

virtualiment

React NativeはiOS、Android両方のプラットフォームで動くものが作れるというメリットがあります。ここではMac上でReact Nativeを開発するための環境を構築し、Xcodeのシミュレータ上でReact Nativeア[…]

Yarnをインストール

最近のnodejsのパッケージ管理はnpmよりYarnの方が主流なんですかね?

$ brew install yarn

とりあえずインストール完了。

$ node -v
v10.5.0

$ yarn -v
1.7.0

watchmanをインストール

リアルタイムに反映するために必要なようです。

$ brew install watchman
$ watchman -v
4.9.0

create-react-native-appをインストール

いよいよメインのインストール。npmではなくyarnでインストールします。

$ yarn global add create-react-native-app

create-react-native-appコマンドでReact Nativeアプリプロジェクトを作成

作業用のディレクトリに移動し、コマンドを実行します。プロジェクト名もとりあえず参考サイトのままにしてます。

$ create-react-native-app my-app

このコマンドは結構時間がかかりました。

いざ実機で確認!

ここからが目からウロコでした。今回は実機で確認したいので「yarn start」コマンドで確認します。

$ yarn start // スマホ実機上で動作確認
$ yarn run ios // Xcodeのシミュレータ上で動作確認
$ yarn run android // Android build toolsのシミュレータ上で動作確認

my-appディレクトリに移動し、コマンドを実行。

$ cd my-app
$ yarn start

QRコードが出てこない!?と思っていたら、ウィンドウが小さすぎていました。

ウィンドを広げるとQRコードがありました。
これをExpoアプリで読み込むことで実機で確認できるようです。

Expoアプリで実機確認!

iPhoneの場合は「Expo Client」をインストールします。

インストール後にアプリを立ち上げてみてもQRを読み込むような操作が不明だったので、標準のカメラアプリからQRを読み込みました。

だいぶぼやけていますが、カメラアプリでQRを読み込むと「Expoで開く」が出てきましたのでこれから起動します。

※実機とMacは同じネットワーク上が条件

App.jsを開いて一行追加するとそれがすぐに反映されました。

まとめ

iPhoneは実機の確認が面倒なイメージがありましたが、随分楽に実機の確認までが出来ました。

Expoでの確認には制限があるようですが、それでも十分に活躍の場はありそうです。実機によるモックアップなどはこれで十分可能だと思います。

SwiftがわからなくてもReact経験者であればコードを書くことができますし、今後も色々と試してみたいと思います。