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