【入門】ReactNative+Expo環境構築|firebaseとの連携も解説

【入門】ReactNative+Expo環境構築|firebaseとの連携も解説
  • JavaScriptのライブラリであるReactを理解することができた。
  • Webアプリ開発はできるから次はReactNativeでモバイルアプリを開発したい。

上記のように思うエンジニアは多いと思います。

そこで、今回はReactNativeでモバイルアプリを開発する方法について詳しく解説していきます。

前提知識
  • ReactNativeはJavaScriptの知識を活用してアプリを開発することができる
  • 開発するにはExpoか、React-Native-CLIのいずれかを活用する人が多い
  • Expo=簡単に構築可能で扱いやすいが制限がある、React-Native-CLIは構築が難しいが制限がない
  • ReactNativeを始めたばかりの方であれば、Expo一択
  • 最近はExpoの制限がなくなりつつあるので、将来的にもExpo一択で問題ない

本記事の読者は『ReactNative×Expo』で開発をしようと思っている方が多いので、本記事ではExpoを中心に解説をしていきます。

記事の内容

React Native Expoとは

Expoとは
React Native Expoとは

Expoを一言で表すと、ReactNativeのビルドや開発をバックアップしてくれるサービスです。

  • これまでの場合:ReactNativeでの開発にはXcodeやAndroid Studioを活用してビルドや開発を行う
  • Expoの場合:XcodeやAndroid Studioに触れずに開発が可能

ちょっと前々では、ネイティブアプリのコードも書く必要があったのですが、Expoのおかげでネイティブ部分を書かずに開発が可能になりました。

注意点:Expoを使用する最初の設定としてXcodeやAndroid Studioは必要です。
ただ、Expoを活用する人であれば、最初だけ触ってその後は触る機会はほとんどないです。


React NativeにExpoは使わないと聞いたけどどうなの?

結論から言うと、Expoを使わないと言っている方=エンジニアとしてのレベルが高い人が多いです

つまり、これからReactNativeを使ってモバイルアプリを開発したいと思う初心者の方はExpo一択です。

読者もエンジニアとしてのスキルが向上した後であれば、Expoを使わない選択肢もありかもしれませんが、最初のうちは使いましょう。


React NativeでExpoを使うメリット

React NativeでExpoを使うメリットは下記のとおりです。

  • Expoを使うと開発スピードが格段に上がる
  • 開発工数を格段に減らすことができる
  • Webアプリでの知識だけを活用できる
  • 簡単に配布することができる
  • 実機でデバックを確認できる

Expoを使うメリットは簡易性ですね。


【入門】ReactNative Expoの開発環境

【入門】ReactNative Expoの開発環境
【入門】ReactNative Expoの開発環境

当サイトでは2021年4月の時点で下記で構築しました。

環境構築
  1. ・Node.jsインストール(必須)
  2. ・npmインストール
  3. ・Xcodeのインストール


手順①Expoの環境を構築する

手順①Expoの環境を構築する:Expoへ行く

Expoのアカウントを作成していきましょう。

手順①Expoの環境を構築する;アカウントを作成する

登録情報を入力していきましょう。

Expo CLIをインストールしていきましょう。

CLI(Command Line Interface)コマンドラインインターフェース
→Expoをターミナルコマンドで扱えるようにする

使うもの:ターミナル

npm install expo-cli --global

WARNなどが表示されますが、エラーでなければインストールされています。

インストールができているかの確認は下記のコマンドを入力しましょう。

バージョンが表示されれば、インストールが無事にされています。

できない方は下記のコマンド入力してみてください。

export PATH=$PATH:`npm bin -g`

その後expo -Vと入力し、バージョンを確認してみましょう。

私は上記の方法で解決しました。

expoがインストールできない方は【expo コマンド 使えない】とググって解決策を探しましょう。

私はこの検索で解決策を見つけました。


手順②ReactNative×Expoでの開発環境

まずは作業フォルダを作成しましょう。

今後、react native×expoの開発をしていくのであれば「projects」のようなフォルダを作成しておきましょう。

mkdir projects
cd projects

上記の解説をすると、mkidirで新しいフォルダ作成をし、cdを使うことでディレクトリを移動しています。

次に、Expoを使ってプロジェクトを作成していきます。

expo init Oniproject

上記の入力が上手くいくと下記の画像のように表示されるはずです。

ReactNative×Expoでの開発環境

今回はblankを選択しましょう。

1分ほどでプロジェクトがインストールされます。

ReactNative×Expoでの開発環境:ファイルを確認する

コマンドができていれば下記のファイルが作成されるはずです。

  • App.jsファイル
  • app.jsonファイル
  • assetsフォルダ
  • babel.confiig.jsファイル
  • node_modulesフォルダ
  • package-lock.jsonファイル
  • package.jsonファイル


手順③Expoを使ってプロジェクトを立ち上げる

cd Oniproject
expo start

今後、react native×expoの開発をしていくのであれば「projects」のようなフォルダを作成しておきましょう。
手順③Expoを使ってプロジェクトを立ち上げる

expo startができると上記の画面に行きますので、「Run on iOS simulator」をクリックしてみてください。

手順③Expoを使ってプロジェクトを立ち上げる:シミュレーター

これでReactNative×Expoの環境構築入門は終わりです。

ここからはExpoを使ってできることを増やしていくだけです。


エラーポイントを解説

当サイトでのエラーポイントは2つほどでした。

  • export PATH=$PATH:`npm bin -g`
  • Xcodeをインストールしていなかった

大体がpathが通っていないことでエラーが起きているみたいです。

どうしてもエラーが対処できない方はTwitterなどで相談してください。


まとめ:ReactNative×Expoを使って環境構築する方法

まとめ:ReactNative×Expoを使って環境構築する方法
まとめ:ReactNative×Expoを使って環境構築する方法

ここまでで【入門】ReactNative+Expo環境構築|firebaseとの連携も解説について解説してきました。

本記事のまとめ
  • エンジニア初心者であればExpoを使うべき
  • ReactNative×Expoでの環境構築は比較的容易にできる
  • エラーで対応できない方は当サイトに相談しよう

当サイトではReactやReactNative、firebaseなどの情報を掲載しています。


React Native Expoユーザーにおすすめの記事


読者におすすめの記事

【入門】ReactNative+Expo環境構築|firebaseとの連携も解説

この記事が気に入ったら
フォローしてね!

記事の内容