Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

E58501f623cc1706b66097e7a9628a3b?s=128

Ryo Nakae

June 03, 2022
Tweet

More Decks by Ryo Nakae

Other Decks in Programming

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! ありがとうございました!