expoを使ってReact Nativeの開発をするための準備

どうも、きっしゅです。

最近スマホアプリの開発をするにあたり React Native を利用する機会がありました。

自分が参加しているプロジェクトでは開発ツールとして expo を使っているためインストール等の準備が必要だったため備忘として記事にします。

React Native の開発環境を整えなければならない方は是非参考にしてください。

スポンサードリンク

Python 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイルを学ぶオンライン講座

expoを使ってReact Nativeの開発をするための準備

前提の確認

まずは expo を使って開発を行っていくための前提条件を確認します。

今回は Mac を使って環境を整えています。

  • Homebrew がインストールされていること。
  • Node がインストールされていること。
  • npm の実行ができること。(Node のインストール後にパスを通していること)
  • yarn がインストールされていること。
  • Xcode がインストールされていること。
  • watchman がインストールされていること。

上記の前提がまだ満たせていない場合はまずは下記の記事を参考に前提部分の環境構築を完了させてください。

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-cliをインストールする
※ログがたくさん出力されたので一部割愛

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

expo --version
expoのバージョンを確認する

問題なくインストールできていることが確認できました。

おまけ

せっかくなのでアプリ起動の方法も記載しておこうと思います。

今回の自分の場合は既にソースコードは Git 管理されていたのでそれを使って起動する方法を記載します。

ソースコードの準備をする

Git を使っている前提で記載しますが、対象のリポジトリを自分の端末の任意のリポジトリにクローンしてきます。

クローンしたらアプリのディレクトリに移動して( package.json が配置されているディレクトリ)下記のコマンドを実行します。

yarn install

アプリの規模にもよりますが、短いと数秒、長くても5~10分程度で処理は完了すると思います。

アプリを起動する

処理が完了したら下記のコマンドを実行します。

expo start

実行すると自動でブラウザが開くと思います。

ブラウザが開く

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

expo startの実行

これで無事に起動は完了です。

まとめ

いかがでしたでしょうか?

無事に expo は起動できましたでしょうか?

これで心置きなく react-native を使ったアプリの開発ができるようになりまたね。

皆さんの快適な開発ライフの役に立ちますと幸いです。

スポンサードリンク

コメント

タイトルとURLをコピーしました