React入門

【入門】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を中心に解説をしていきます。

Expoとは

Expoとは

Expoとは

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

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

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

注意点:Expoを使用する最初の設定としてXcodeやAndroid Studioは必要です。

ただ、Expoを活用する人であれば、最初だけ触ってその後は触る機会はほとんどないです。

 

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

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

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

おにちゃん
おにちゃん

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

 

Expoを使うメリット

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

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

おにちゃん
おにちゃん

僕は初心者のエンジニアですが、React Native×Expoにしたことで格段に成長できました。だから、私はExpoを強くおすすめしたいです。

 

【入門】ReactNative Expoの開発環境

【入門】ReactNative Expoの開発環境

【入門】ReactNative Expoの開発環境

おにちゃん塾では2021年4月の時点で下記で構築しました。

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

おにちゃん
おにちゃん

私はだいぶ環境構築で苦戦しました。エラーポイントに関しては最後にまとめておきます。スムーズに行かなかった場合は参考にしてください。

 

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

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

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

 

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

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

使うもの:ターミナル

npm install expo-cli –global

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

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

expo -V

//Vは小文字ではなく大文字

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

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

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

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

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

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

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

  • 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 startができると上記の画面に行きますので、「Run on iOS simulator」をクリックしてみてください。

これで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などの情報を掲載しています。

 

読者におすすめの記事

 

ABOUT ME
アバター
鬼澤龍平(20)
Twitterにて役立つ情報を掲載しております。
関連記事