- 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を一言で表すと、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の開発環境
当サイトでは2021年4月の時点で下記で構築しました。
- ・Node.jsインストール(必須)
- ・npmインストール
- ・Xcodeのインストール
手順①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
上記の入力が上手くいくと下記の画像のように表示されるはずです。
今回はblankを選択しましょう。
1分ほどでプロジェクトがインストールされます。
コマンドができていれば下記のファイルが作成されるはずです。
- App.jsファイル
- app.jsonファイル
- assetsフォルダ
- babel.confiig.jsファイル
- node_modulesフォルダ
- package-lock.jsonファイル
- package.jsonファイル
手順③Expoを使ってプロジェクトを立ち上げる
cd Oniproject
expo start
expo startができると上記の画面に行きますので、「Run on iOS simulator」をクリックしてみてください。
これでReactNative×Expoの環境構築入門は終わりです。
ここからはExpoを使ってできることを増やしていくだけです。
エラーポイントを解説
当サイトでのエラーポイントは2つほどでした。
- export PATH=$PATH:`npm bin -g`
- Xcodeをインストールしていなかった
大体がpathが通っていないことでエラーが起きているみたいです。
どうしてもエラーが対処できない方はTwitterなどで相談してください。
まとめ:ReactNative×Expoを使って環境構築する方法
ここまでで『【入門】ReactNative+Expo環境構築|firebaseとの連携も解説』について解説してきました。
- エンジニア初心者であればExpoを使うべき
- ReactNative×Expoでの環境構築は比較的容易にできる
- エラーで対応できない方は当サイトに相談しよう
当サイトではReactやReactNative、firebaseなどの情報を掲載しています。
React Native Expoユーザーにおすすめの記事
読者におすすめの記事