こんにちはレオです。

React NativeとExpoを使ったクロスプラットフォームでの開発に興味が出てきたので環境構築やってみました。

もろもろインストールしてiOSシミュレーターで動作確認できるところまでをゴールに備忘録。

React NativeとExpoについて

React Native とは

そもそもReactはFacebookが開発したJavaScriptのフレームワークで、2020年時点ではWebアプリで一番採用されているフレームワークと言っても過言ではありません。React Nativeはそれのモバイル開発フレームワークみたいなものでReact Nativeを使用することでiOSとAndroidのアプリを作ることができるフレームワークです。

Expo とは

ざっくりですがExpoはReact Nativeのビルドや開発を支援してくれるサービスです。

iOSのApp StoreからExpoをダウンロードすることで実機で開発を確認できて便利です。

環境構築時のPC環境

macOS Catalina バージョン10.15.5

nodeバージョン10.13

インストール

まずはExpo CLIをインストール。

npm install expo-cli --global

Expo CLIのインストールが完了したら任意のフォルダにexpo initでプロジェクトを作成。

expo init expo_sample

以上です。

iOSシミュレーターで確認

yarn startしてブラウザ上の開発画面からiOSをクリックするとiOSシミュレーターが起動して確認できます。

またiOSのApp StoreからExpoのアプリをインストールしてアカウントを作成し、PC側でyarn startでQRコードが発行されるのでそのQRコードをiPhoneのデフォルトカメラアプリでかざすとExpoが起動して実機で確認できます。

まとめ

ひとまず環境構築は詰まることなくできましたが、React NativeはDOMが使えなかったり、いろいろとお作法があるようでネイティブ経験がないとかなり辛そうです。

頑張ってみます。