個人開発でReact Native + Expo製アプリを作った話

TECH STAND #8 React Native & Reactにて登壇した際の資料です。

Transcript

1. 個人開発で React Native + Expo製アプリを 作った話 Ryo Nakae 2022/06/03 TECH STAND #8 React Native & React
2. 中江 亮 @ryo_dg brdr.jp ryonakae twitter link github 株式会社ディー・エヌ・エー デザイン本部サービスデザイン部第1グループ デザイナー・グループリーダー k 新規事業を中心にデザインとマネジメントをしていま’ k 個人開発ではWebサイト、アプリ、Figmaプラグインを作ったr k 趣味は飲酒とキーボードの自作で’ k 好きなプロ野球チームは横浜ベイスターズ Who am I 自己紹介
3. YOKOHAMA DeNA BAYSTARS TaxiBell Nakanohito Live and etc. Who am I 自己紹介
4. THEO AD:PIANO Qualum franky Fanfare and etc. Who am I 自己紹介
5. Team Library Component Browser EditText Run Plugin API Figma Plugin figma.com/@ryo_dg Who am I 自己紹介
6. Violet A Simple Tumblr Client App by React Native + Expo App Store Google Play
7. Libraries 利用している主なライブラリ
8. React Navigation v6 t リリース当初はv5だったが、後にアップグレーW t Native Stack Navigatorを使ってい@ t ネイティブAppと同じパフォーマンス（らしい t 通常のStack Navigatorよりカスタマイズ性は劣る reactnavigation.org Libraries 利用している主なライブラリ
9. Unstated Next F 非常にシンプルな状態管理ライブラS F シンプルなアプリなので十分事足りA F 今作り直すならZustandを使いた& F Providerでラップしなくていいのが便利 jamiebuilds/ unstated-next zustand-demo.pmnd.rs Libraries 利用している主なライブラリ
10. React Native Extended StyleSheet “ テーマによってスタイルを変えたかったので採d “ 実際は3種類から変更できて、デバイスの設定を無視す ることも出来るようにしていまc “ RN標準のStyle APIとほぼ変わらない書き‘ “ TypeScript対応が弱い（というか無いq “ Issueに型定義があるのでそれをコピーするといいでc “ “ 今作り直すならEmotionを使いたい github.com/vitalets/react-native-extended-stylesheet/issues/11s vitalets/ react-native-extended-stylesheet emotion.sh Libraries 利用している主なライブラリ
11. React Native Typography  iOS Human Interface Guidelines, Android Material Design Guidelinesに準拠した文字の設定をインポートでき6  文字サイズに合わせたスペーシング/カーニングが最初から 設定されているのがめちゃくちゃ良‘  それぞれのOS準拠の色も用意されている hectahertz/react-native-typography Libraries 利用している主なライブラリ
12. React Native Paper V Material Designに対応したコンポーネント
 ライブラE V スイッチなど、一部コンポーネントはiOS/Android の両方に対応してい' V Violetでは、Switch, Divider, RadioButton, TouchableRippleを使っています reactnativepaper.com Libraries 利用している主なライブラリ
13. React Native Reanimated v2 ƒ ネイティブスレッドでアニメーションを実行できd ƒ 非常に滑らかなアニメーションが可x ƒ コールバックでPromiseを返したい場合などはrunOnJSを使B ƒ 今作り直すならReanimated v2をラップしたMotiを使いた7 ƒ Framer Motionに似た書き‚ ƒ そろそろv3が出るかも ƒ blog.swmansion.com/announcing-reanimated-3-16167428c5f7 docs.swmansion.com/ react-native-reanimated moti.fyi Libraries 利用している主なライブラリ
14. expo-haptics b 触覚フィードバックが実装できるライブラD b ボタンのタップなどに利用していま4 b 一部Androidでは最小設定でもバイブレーションが大きすぎる ことがあったので、設定から無効にできるようにしている Haptics - Expo Libraries 利用している主なライブラリ
15. expo-localization + i18n-js p expo-localizationが、デバイスの言語, 地域, タイムゾーンなどを含 んだオブジェクトを返してくれP p Violetでは英語をデフォルト言語として、日本語にも対応していま4 p 例えばスマホの言語設定がスペイン語のとき、英語で表示される ようになP p App Store / Google Playへの提出も、デフォルト言語を英語にし ている Localization - Expo fnando/i18n-js Libraries 利用している主なライブラリ
16. expo-blur r ダッシュボード下部のUIの背景にブラーをかけたかったの で採Q r ナビゲーションバーはReact NavigationのheaderBlurEffect オプションでブラーをかけられま r 残念ながらiOSのみ対応（React Navigationも r Androidは半透明にフォールバックされる BlurView - Expo Libraries 利用している主なライブラリ
17. Expo w 開発がy w XcodeやAndroid Studioを使う必要がなl w (ReactNative) JSが書けたらアプリが開発できる、というのはWeb畑の人間にとっては嬉しl w 公式ドキュメントがとても分かりやすl w Expo SDKが充実しており、大抵のやりたいことは実現でき` w とはいえできないこともある（アプリ内課金とか）ので、その場合はEjectする必要はあ` w 後述するEAS (Expo Application Services)を使うと、ビルド→実機確認やストアへの提出がめちゃくちゃ楽
18. Hermes & Expo Application Services HermesとEAS (Expo Application Services)について
19. Hermes c ReactNative用に最適化されたオープンソースのJavaScript エンジq c 通常はJSC (JavaScriptCore)というエンジンが使われて いる（らしい& c 起動時間が短くなる、メモリ使用量が減る、バイナリサイズ も小さくなる → 天才5 c ファイルサイズはめちゃくちゃ小さくなりました Using Hermes Engine - Expo iOS Android 58.1 MB 15.0 MB 58.0 MB 29.1 MB Hermes & EAS HermesとEASについて
20. 2 設定方法は、app.configにjsEngine: 'hermes'を追記する だ 2 ただ、EAS Buildでアプリをビルドする必要があります Hermes & EAS HermesとEASについて
21. EAS Build Q EAS (Expo Application Services)はExpo向けのクラウドサービ5 Q EAS Buildはそのうちの1つの機( Q 従来のexpo buildに代わるビルドサービ5 Q expo buildは2023年1月4日以降利用できなくなります EAS Build - Expo Hermes & EAS HermesとEASについて
22. eas.json（の例） eas-cliをインストールして、ログイン&設定ファイルを作成
23. Internal Distribution ƒ eas.jsonで"distribution": "internal" にしておくと、Expoのサイトからアプリを実機に直接インストールで き3 ƒ 特にiOSでの実機確認が& ƒ 従来：
 ビルド → Expoのサイトからipaをダウンロード → TransporterでApp Store Connectにアップロード → 輸出コンプライアンス情報を提出 → TestFlightからアプリをインストー4 ƒ EAS Build：
 ビルド → Expoのサイトからアプリをインストール Internal Distribution - Expo Hermes & EAS HermesとEASについて
24. EAS Submit ˆ Expo経由でアプリをApp Store / Google Playに提出できる機D ˆ Androidは未設定だと「内部テスト/完全公開」の状態でアップ ロードされてしまq ˆ 内部テストはInternal Distributionで実機確認できているので 個人的には不 ˆ 右のようにすると、「製品版/下書き」でアップロードできます EAS Submit - Expo Hermes & EAS HermesとEASについて
25. Before EAS Submit 3 ビル‚ 3 (iOS) Expoのサイトに行って.ipaファイルをダウンロー‚ 3 (iOS) TransporterでApp Store Connectにアプリをアップロー‚ 3 (iOS) 輸出コンプライアンス情報を提' 3 (iOS) リリースノートを書いて申請 → 公R 3 (Android) Expoのサイトに行って.aabファイルをダウンロー‚ 3 (Android) Google Play Consoleに.aabファイルをアップロー‚ 3 (Android) リリースノートを書いて申請 → 公開 Hermes & EAS HermesとEASについて
26. After EAS Submit B ビルR B (iOS) 輸出コンプライアンス情報を提6 B (iOS) リリースノートを書いて申請 → 公 B (Android) リリースノートを書いて申請 → 公開 Hermes & EAS HermesとEASについて
27. EAS Update c アプリをストアに提出せずにアップデートできるサービj c いわゆるOTA (Over The Air) Updatw c 従来のexpo publishのEAS版˜ c ちなみに、EAS Build環境でもexpo publishは使える（のでEAS Updateの存在意義がよく分かっていない' c 2022年6月時点ではまだプレビューI c Production or Enterpriseプランでないと利用できません EAS Update - Expo Hermes & EAS HermesとEASについて
28. Thank You! ありがとうございました！