ゼロから始める React Native + Expo 入門
React Native とは
React を使って Android,iOS アプリを開発するためのツールです。
React Native は 開発者が JavaScript を書いて React Native を通すことで、ネイティブのコードで動作するという仕組みです。
Expo とは
Expo とは開発者が React Native 単体で開発した場合に意識しないといけなかったネイティブ部分を隠蔽して、アプリケーション本体の開発をより web アプリケーションは開発体験に近づけたものになります。
開発時も実機に Expo クライアントと呼ばれるアプリをインストールして、簡単にローカル環境と繋いでスムーズに動作確認ができます。まるで web アプリケーションを開発しているかのような開発体験です。
所感
普段 web アプリケーションは React、 iOS アプリケーションは Swift で書いていた著者が、少し触ったところの感想としては、
開発イメージ.jpg
良いところ
- Expo を使った開発体験がとってもスムーズ
- コンポーネントのレイアウトが CSS のように書けるのが最高
- 通信処理が JavaScript で書けるのが嬉しい
- ネイティブアプリ開発で React Hooks や TypeScript 使えるの最高
- Native Base という React Native 用 UI コンポーネント集が良い
- 開発中のアプリのホットリロード最高
- 今から Swift 書くぞという脳内のスイッチングコストがいらない
- コードを Expo のクラウド上でビルドして ipa ファイルや apk ファイルがダウンロードできる(らしい)
疑問・心配ごと
- Expo SDK の開発、React Native 本体への追従スピードは大丈夫?
- iOS 14 のサポート、React Native(0.63) や React Native for Web(0.13) の最新版 に追従した
Expo SDK 39
は 9/22 にリリース
- iOS 14 のサポート、React Native(0.63) や React Native for Web(0.13) の最新版 に追従した
- iOS/Android の OS アップデートに伴う各種コンポーネントで起きる不具合対応
- ネイティブ部分が遮蔽されているので、こればかりはやってみないと分からない
- Expo のサーバダウンしたらどこまで影響でる?
- 追々感じてみる
- アプリを審査を通さずにアップデートできる OTA アップデートってどうなってるの?
- Store からインストールされたときに ipa に同梱されている初版がインストールされる
- 該当バージョンで OTA アップデートした回数分アプリの再起動が必要
- 詳しくはこの記事が分かりやすい
プロジェクトに適用する場合
触った感触として、React Native + Expo をプロジェクトに適用する条件としては
- プロトタイプ的に効率的にアプリケーション開発を進めたい
- Expo,React Native なら開発スピードを優先しながら Android / iOS 開発が可能
- デザインや機能仕様がコントロールできるアプリケーション開発である
- Expo,React Native との技術的な制約とせめぎ合いが起きないような仕様
- アプリケーション開発・保守できるメンバーが JS エンジニアしかいない
- 開発自体は React 触れるならできるんじゃないかという印象、ネイティブ層で不具合が起きなければね(汗)
将来的にプロダクトの成長に伴ってネイティブコードへのアクセスがどうしても必要になるという場合は、Expo を eject して使うという方法もあるようです。
つまり Expo での高速開発の恩恵を受けつつプロダクト自体が成長したタイミングで、eject して運用。将来的にはネイティブアプリ運用に持っていくのもありなのかなと思います。(開発のスピード感が違うので一度味わうと、ネイティブに戻るのも腰が重くなりそうですが笑)
それでは前置きはこのくらいにして、 Expo を使ってアプリケーションを動かしてみましょう。
事前準備
Expo アカウントを登録
- 公式サイトでアカウントを登録しましょう
Expo Client をインストール
Expo クライアントを使うと実際に Expo で作ったアプリケーションを実機で確認することが簡単にできます。
お手元の iOS / Android の実機にインストールしてください。
Android
iOS
ローカル開発環境をつくる
Expo CLI をインストール
-
Expo CLI
をインストールするnpm install -g expo-cli
expo --version 3.28.5
インストール後に、バージョンが表示されれば OK です。
-
expo init
コマンドでプロジェクトの雛形を作成するexpo init ExpoExample ? Choose a template: ----- Managed workflow ----- blank a minimal app as clean as an empty canvas ❯ blank (TypeScript) same as blank but with TypeScript configuration tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript ----- Bare workflow ----- minimal bare and minimal, just the essentials to get you started minimal (TypeScript) same as minimal but with TypeScript configuration
workflow についての公式ドキュメントはこちらを参考ください。
今回は
Managed workflow + TypeScript
でいきたいと思います。✅ Your project is ready!
と表示されれば、インストール完了です。
(補足) Managed workflow と Bare workflow の比較表
赤枠部分がポイントになると思います。
- Expo らしい開発効率の恩恵を享受したい場合は
Managed workflow
を選択 - ネイティブコードまで触る可能性がある場合は
Bare workflow
を選択
なのかなと思います。
早速、動かしてみる
yarn start
yarn start
をすると、 package.json
に記述されている、expo start
コマンドが実行されます。
上記画像の Expo Developer Tools
が立ち上がれば成功です。
Expo Developer Tools
のポイント
-
画面左下の QRコードを Expo Client の QR リーダーで読み込むと、開発途中のアプリケーションの動作確認ができます
-
実機の Expo Client で Expo のアカウントにログインしておくと、 QR コード読み込まさなくても開発中のアプリケーションが一覧に同期されます
-
開発環境に繋がらない場合は、
CONNECTION
をTunnel
に変更すると良いと思います
- Xcode がインストールされていれば、
Run on iOS simulator
でシミュレーターが起動すると思います
それでは、準備ができましたので早速コードを書いてみましょう。
App.tsx を触ってみる
普段 React を使っている方であれば、ネイティブ感が全くないようなコードが入っていると思います。
container
のスタイルの背景を白から黒に反転させて、Text
に白色を当ててみましょう。
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text/* 追加 */}>Open up App.tsx to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000', // 追加 #fff -> #000
alignItems: 'center',
justifyContent: 'center',
},
text: { // 追加
color: '#fff' // 追加
} // 追加
});
このように変更すると、背景が黒になりましたね。
上記コードをエディターで保存すると分かると思いますが、ホットリロードが有効になっているため、実機やシミュレーターなどの結果が即時反映されます。
もちろん、 iOS / Android を二台手元に置いておけば同時に反映されます。
ネイティブコードで開発する場合は、都度コードをビルドしてアプリをインストールし直さないといけません。 React Native , Expo の場合はこのホットリロードがあるおかげで、 web アプリのように高速に開発できます。
コードを変更して動かすということが体験できましたので、次にディレクトリ構造を確認してみましょう。
初期ディレクトリを確認する
expo init
で作られた初期ディレクトリやファイルも確認しておきましょう。
画面の各コンポーネントをどうするか
React Native には標準コンポーネントも用意されていますが、iOS アプリに Material
っぽさを入れたくないので今のところ Native Base
というコンポーネント集が良いかなと思っています。
ドキュメントも充実しています。
React を使ったことのある方であれば、このドキュメントを見ただけでアプリが作れそうな気がするのではないでしょうか。
iOS アプリの開発をする際に、テーブルUIの表示を行う UITableView
や UICollectionView
といった部分の実装に非常に時間がかかるので、この部分が簡単に実装できるだけでも感動しています。
まとめ
触り始めというところもあって、かもしれない・ようだ的なまとめになりますが、
-
React
やJavaScript
の知見を生かした状態でネイティブアプリケーション開発するには、React Native + Expo
という組み合わせは多いにありかもしれない - 今回触れなかった ipa ファイルや apk ファイルのビルドは こちら を参考にすると良いと思います
-
Expo
の開発体験が超スムーズだった(単にまだハマっていないだけかもしれない)
この記事が気に入った方は、下のハートマークを押してもらえると嬉しいです。
Author And Source
この問題について(ゼロから始める React Native + Expo 入門), 我々は、より多くの情報をここで見つけました https://zenn.dev/izuchy/articles/6d6f7970a77aa203396c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol