最近スマホアプリの開発をするにあたり React Native を利用する機会がありました。
自分が参加しているプロジェクトでは開発ツールとして expo を使っているためインストール等の準備が必要だったため備忘として記事にします。
React Native の開発環境を整えなければならない方は是非参考にしてください。
s
expoを使ってReact Nativeの開発をするための準備
前提の確認
まずは expo を使って開発を行っていくための前提条件を確認します。
今回は Mac を使って環境を整えています。
上記の前提がまだ満たせていない場合はまずは下記の記事を参考に前提部分の環境構築を完了させてください。
Homebrew のインストール
Homebrew のインストール方法は下記の記事を参考にしてください。
Node のインストール
Node のインストールの方法は下記の記事を参考にしてください。
npm のパスを通す
npm のパスをまだ通していない場合は下記の記事を参考にしてください。
yarn をインストールする
yarn のインストールがまだの場合は下記の記事を参考にしてください。
Xcode をインストールする
Xcode のインストールは App Store で無料でインストールが可能ですので各自でインストールをしてください。
watchman をインストールする
watchman のインストールは brew を使って実施します。
実行するコマンドは下記のコマンドのみです。
brew install watchman
上記コマンドを実行すれば watchman のインストールは完了です。
前提条件が全て満たせている場合は次に記載している expo のインストール手順に移ってください。
expo をインストールする方法
expo をインストールするのは非常に簡単です。
npm を使って下記のコマンドを実行すれば作業は完了です。
npm install --global expo-cli

処理が完了したら下記のコマンドを実行して正常にインストールされているかを確認します。
expo --version

問題なくインストールできていることが確認できました。
おまけ
せっかくなのでアプリ起動の方法も記載しておこうと思います。
今回の自分の場合は既にソースコードは Git 管理されていたのでそれを使って起動する方法を記載します。
ソースコードの準備をする
Git を使っている前提で記載しますが、対象のリポジトリを自分の端末の任意のリポジトリにクローンしてきます。
クローンしたらアプリのディレクトリに移動して( package.json が配置されているディレクトリ)下記のコマンドを実行します。
yarn install
アプリの規模にもよりますが、短いと数秒、長くても5~10分程度で処理は完了すると思います。
アプリを起動する
処理が完了したら下記のコマンドを実行します。
expo start
実行すると自動でブラウザが開くと思います。

初回の起動の場合はアクセス許可の確認のポップアップが表示されますので許可を選択します。

これで無事に起動は完了です。
まとめ
無事に expo は起動できましたでしょうか?
これで心置きなく react-native を使ったアプリの開発ができるようになりまたね。
皆さんの快適な開発ライフの役に立ちますと幸いです。
コメント