tech_stand #8 2022.06.03

Transcript

1. 1 実録！React Native for Webでのアプリ開発！！！ menu株式会社　林晃一郎 (@yasahhi1127) Tech Stand #8 React Native & React
2. 2 自己紹介
3. • 林晃一郎（@yasahhi1127） • menu株式会社 ◦ モバイルアプリ開発 好きな食べ物 ボンディのカレー いやなこと Enterで送信しちゃうチャットサービス ▪自己紹介 3
4. ▪自己紹介 4 直近のツイート
5. ▪ menu? 5
6. ▪ menu? 6
7. ▪話すこと React Native for Web（RNWeb）でアプリ開発をした上での知見 • 前提 • RNWebとは • 実装について ◦ RNWebを使うことによる実装の再利用について ◦ つまづきポイント • 反省点とTODO
8. 8 前提
9. ▪前提1：menu本体の話 RN + TypeScript + Expoで作ってます
10. ▪前提2：RNWebで何を作ったか？
11. 当時の状況 • 事業的には非常に重要なので絶対やりたい！ • menu本体の開発もやることは山積み、、 限られたリソース ◦ 「au PAYミニアプリ版」開発期間は2ヶ月弱（QA含）、開発メンバーは2名 ▪「au PAYミニアプリ版」menuについて
12. ▪「au PAYミニアプリ版」menuについて 機能要件 • デリバリーはmenu本体と基本的に同じ体験 ◦ 開発/QAの負担軽減のため、＋αの体験となる一部機能（ガチャなど）は初動では カットする • au PAYアプリからwebviewで表示される ◦ menu本体とは仕様から見直す必要がある場合も...
13. ▪「au PAYミニアプリ版」menuについて 良いアプリを、楽に作りたい！！（煩悩）
14. 14 RNWebについて
15. ▪React Native for Webとは "React Native for Web" makes it possible to run React Native components and APIs on the web using React DOM. by https://github.com/necolas/react-native-web →React Nativeと同じインターフェースのWebコンポーネント＆API
16. ▪なにが嬉しい？ 1. RNでモバイルアプリ用に書かれたコードを流用できる 2. RNではおなじみの機能をWebでも使える menu本体のコードを再利用しながら menu本体での体験に近いものを作れる！
17. ▪なにが嬉しい？ 1. RNでモバイルアプリ用に書かれたコードを（大体）流用できる web RN(Web)
18. ▪なにが嬉しい？ 2 . RNではおなじみのAPI群をWebでも使える ex. https://necolas.github.io/react-native-web/docs/touchables/
19. 19 実装
20. ▪1：コード共有のしかた 1. menu本体の実装にweb用の実装を足す 2. menu本体とは基本的に分けて管理し、必要な部分だけ共有する 選択肢：
21. ▪1：コード共有のしかた 1. menu本体の実装にweb用の実装を足す 2. menu本体とは基本的に分けて管理し、必要な部分だけ共有する 選択肢：
22. ▪1：コード共有のしかた
23. ▪1：コード共有のしかた hoge/ ├── index.ts ├── hoge.android.tsx ├── hoge.expo.tsx（※Expo41で廃止） ├── hoge.ios.tsx └── hoge.web.tsx
24. ▪1：コード共有のしかた ややこしくなりそう・・・ menu本体の開発への影響も大きそう・・・
25. ▪1：コード共有のしかた 結局どうしたか
26. au PAYミニアプリ menu本体 ▪1：コード共有のしかた npm package (共通のUIなど) menu配達クルー
27. ▪2：RNWeb特有な点 同じStyleで見た目が変わることがたまにある （RNっぽい、flexベースの書き方をすると割と揃うとの噂も、、）
28. ▪2：RNWeb特有な点 RNのAPIは大体RNWebでも使えるけど、一部(怪しい || 動かない)もの が、、、 https://github.com/necolas/react-native-web/issues/2249
29. ▪2：RNWeb特有な点 （ちなみに暫く実装されなそう） https://github.com/necolas/react-native-web/pull/1305
30. 30 振り返り
31. ▪振り返り 🤷 • コードの共有はもっといい形でできそう（模索中） ◦ ちょっと昔の記事ですが、大枠の構成は結構理想形に近いかもしれない、、 ▪ https://qiita.com/Nkzn/items/8e31efe0ebafa8038bde 🙆 • 見込み通り、立ち上げ〜運用までかなり楽できている ◦ 1つのWebアプリにかかる維持コストとしてはかなりコスパがいい （もちろんRNの本体込で） • ベーシックなAPIはかなり安心して使える
32. 32 ありがとうございました！！！