ReactNativeとExpoを1ヶ月触ってみてわかったこと #ReactNativeJP

Transcript

1. React Native とExpo を １ヶ月触ってみてわかったこと ひじり（@hijiri408 ）
2. 自己紹介 名前 - ひじり Java でバックエンド開発を主にしています（していました） 昨年からフロントエンドの開発もやってます 登壇は初ではないですが、LT は初です
3. 今日話すこと React 経験者が初めてのアプリ開発にReact Native とExpo を1 ヶ月くらい使ってみて感じたこと
4. React Native とExpo に触れるきっかけ お仕事でアプリ開発をすることになり、React Native とExpo を使うことになった そのときの自分の状態は↓ アプリ開発経験は無し React の経験は1 年（たまに触る）
5. 1 ヶ月でやったこと 会社の教材で学習する React Native やExpo 、ライブラリのチュートリアルをやる & ドキュメントを読む React Native Japan のハンズオンイベントに参加する トライ＆エラーの繰り返し
6. 1 ヶ月間いろいろとやってみてわかったこと
7. React での開発経験をそのまま活かせる 当たり前だけどやっぱり一番インパクトがある React Native でのコンポーネント開発にはReact の知識をそのまま活かせるため、楽に書くことができた。 新しいことばかりで考えることもかなり多かったため、ある程度知っているものの上で開発できるというの は、気持ち的にもかなり楽だった。 最初にアプリのコードを見た時は「あ、React だ」と思った。 export default function App() { return ( <View style={styles.container}> <Text>Open up App.tsx to start working on your app!</Text> <StatusBar style="auto" /> </View> ); }
8. React で使っていたライブラリが使える（制限付き） React Query やReactHookForm のようなReact 用のライブラリを、React Native でも使うことができた。 ただ、ブラウザ依存の機能が使われていると使えなかったり、何かしらの制限はあったりする。 React Native で使えるかどうかは、ドキュメントに記載があったり誰かがIssue で聞いていたりする。 React Query の場合だと以下のように「開発用ツールを除いてすぐに使える」 とドキュメントに記載があり、 実際にまったく同じように使えたので、かなり助かった。 React Query is designed to work out of the box with React Native, with an exception to the devtools, which are only supported with React DOM at this time. Storybook なんかも使えるのかなと思って調べたりしたのだが、こちらは制限が多くてWeb と同じようには使 えなさそうだったので、踏み込むのはやめた。
9. JavaScript(TypeScript) でライブラリのコードが読める ライブラリについても、ネイティブのコンポーネントを使わない部分であればJavaScript （TypeScript ）で書 かれているため、気軽にコードを読むことができた。 おかげで、ライブラリのバージョンアップ時にバグを踏んだ時にもすぐに原因を特定できるときがあり、プル リクエストを送ったりもできた。 （このときはreact-native-elements をバージョンアップしたら表示が崩れた）
10. Expo を使うと実機で簡単に確認できる アプリ開発中に実機で確認するのってどうやるんだろうと思っていたら、Expo を使って簡単に確認すること ができて、体験がとても良かった。 1. Expo で起動 2. 表示されたQR コードを実機で読む（端末にはExpo Go をインストールしておく） 3. Expo Go が起動されてJavaScript などをロードしてくれる 4. 動作確認ができる （はじめて使ったときは思わず声が出た）
11. Expo だと起動が速い（使わないと遅い） 自分の端末だとReact Native CLI （Expo 無し）でiOS 用にビルドすると30 分くらいかかり、その間はマシンパ ワーが持っていかれて（ファンも全開）でほとんど作業できなくなってしまう。 一度起動するとFast Refresh でコード変更を即時反映してくれるが、たまにうまくいかなかったり、ライブラ リをいろいろと試しているときは使えなかったりした。 それに比べると、Expo での起動はかなり速く、検証時の効率がとてもよかった。
12. Expo とライブラリのバージョン関係に気をつける Expo ではライブラリの最新バージョンに対応しているわけではないので、単純に最新版を入れると動かなくな ったりもする。（実際にハマった） Expo のinstall コマンドを使うことで、使用しているExpo のバージョンと互換性のあるバージョンをインストー ルすることができるので、こちらを使うと余計なトラブルを避けられる。 ❌ ダメなときがある ⭕️ こっちが確実 ちなみに互換性がないバージョンを使っていると、Expo 起動時に警告メッセージを出してくれる。 npm install xxx expo install xxx
13. エラーメッセージからの原因特定が難しい 動作確認中にエラーが発生するとエラーメッセージと該当箇所のコード情報（スタックトレース）が出力され るが、大体が自分で書いたコードではなく内部のコードとメッセージが表示されたりもして、読んでも何が原 因なのかよく分からないことが多かった。 がんばって読むしかない。
14. バージョンアップがつらい Expo のBere Workflow で開発していたが、Expo をバージョンアップしたら次から次へとエラーが発生して、め ちゃくちゃつらかった。 Expo にはupgrade コマンドが用意されているがそれだけではうまく動かず、ググったりIssue を見ながらエラ ーを順番に解決していくことになった。（おかげでExpo の設定まわりについて理解は進んだが） React Native 自体もまだバージョンアップで破壊的変更が普通に発生するようなので、バージョンアップする ときはある程度の覚悟が必要になりそう。 （バージョンアップがつらかったとき、色々なIssue で「バージョンアップしたら動かなくなった！」みたいな のが出てくるので、みんな大変なんだなぁと思うとちょっと気持ちが安らいだ）
15. 日本語の情報はそれほど多くない（と感じた） うまく動かないときやこういうのどう実現するんだろうと思って調べたりすると、解決の糸口になるのはリポ ジトリのIssue や海外の記事であることが多かった。
16. まとめ
17. まとめ React 経験者であれば、アプリ開発でReact Native はかなり魅力的な選択肢 Expo は便利だったので、使えない理由が無いなら使った方がいい バージョンアップする時はがんばる
18. ご清聴ありがとうございました