Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
tech_stand #8 2022.06.03
Search
K.Hayashi
June 03, 2022
Technology
0
620
tech_stand #8 2022.06.03
K.Hayashi
June 03, 2022
Tweet
Share
More Decks by K.Hayashi
See All by K.Hayashi
React Native Matsuri2022
kou1127h
0
660
tech_hills 20220727
kou1127h
0
110
技育祭2022勉強会資料
kou1127h
0
220
Other Decks in Technology
See All in Technology
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
130
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
520
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
540
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
230
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
550
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
140
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
400
5min GuardDuty Extended Threat Detection EKS
takakuni
0
150
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
350
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Delegating the chores of authenticating users to Keycloak
ahus1
0
120
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Speed Design
sergeychernyshev
32
1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
It's Worth the Effort
3n
185
28k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
RailsConf 2023
tenderlove
30
1.1k
The Cult of Friendly URLs
andyhume
79
6.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
1 実録!React Native for Webでのアプリ開発!!! menu株式会社 林晃一郎 (@yasahhi1127) Tech Stand #8
React Native & React
2 自己紹介
• 林晃一郎(@yasahhi1127) • menu株式会社 ◦ モバイルアプリ開発 好きな食べ物 ボンディのカレー いやなこと Enterで送信しちゃうチャットサービス
▪自己紹介 3
▪自己紹介 4 直近のツイート
▪ menu? 5
▪ menu? 6
▪話すこと React Native for Web(RNWeb)でアプリ開発をした上での知見 • 前提 • RNWebとは •
実装について ◦ RNWebを使うことによる実装の再利用について ◦ つまづきポイント • 反省点とTODO
8 前提
▪前提1:menu本体の話 RN + TypeScript + Expoで作ってます
▪前提2:RNWebで何を作ったか?
当時の状況 • 事業的には非常に重要なので絶対やりたい! • menu本体の開発もやることは山積み、、 限られたリソース ◦ 「au PAYミニアプリ版」開発期間は2ヶ月弱(QA含)、開発メンバーは2名 ▪「au
PAYミニアプリ版」menuについて
▪「au PAYミニアプリ版」menuについて 機能要件 • デリバリーはmenu本体と基本的に同じ体験 ◦ 開発/QAの負担軽減のため、+αの体験となる一部機能(ガチャなど)は初動では カットする • au
PAYアプリからwebviewで表示される ◦ menu本体とは仕様から見直す必要がある場合も...
▪「au PAYミニアプリ版」menuについて 良いアプリを、楽に作りたい!!(煩悩)
14 RNWebについて
▪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
▪なにが嬉しい? 1. RNでモバイルアプリ用に書かれたコードを流用できる 2. RNではおなじみの機能をWebでも使える menu本体のコードを再利用しながら menu本体での体験に近いものを作れる!
▪なにが嬉しい? 1. RNでモバイルアプリ用に書かれたコードを(大体)流用できる web RN(Web)
▪なにが嬉しい? 2 . RNではおなじみのAPI群をWebでも使える ex. https://necolas.github.io/react-native-web/docs/touchables/
19 実装
▪1:コード共有のしかた 1. menu本体の実装にweb用の実装を足す 2. menu本体とは基本的に分けて管理し、必要な部分だけ共有する 選択肢:
▪1:コード共有のしかた 1. menu本体の実装にweb用の実装を足す 2. menu本体とは基本的に分けて管理し、必要な部分だけ共有する 選択肢:
▪1:コード共有のしかた
▪1:コード共有のしかた hoge/ ├── index.ts ├── hoge.android.tsx ├── hoge.expo.tsx(※Expo41で廃止) ├── hoge.ios.tsx
└── hoge.web.tsx
▪1:コード共有のしかた ややこしくなりそう・・・ menu本体の開発への影響も大きそう・・・
▪1:コード共有のしかた 結局どうしたか
au PAYミニアプリ menu本体 ▪1:コード共有のしかた npm package (共通のUIなど) menu配達クルー
▪2:RNWeb特有な点 同じStyleで見た目が変わることがたまにある (RNっぽい、flexベースの書き方をすると割と揃うとの噂も、、)
▪2:RNWeb特有な点 RNのAPIは大体RNWebでも使えるけど、一部(怪しい || 動かない)もの が、、、 https://github.com/necolas/react-native-web/issues/2249
▪2:RNWeb特有な点 (ちなみに暫く実装されなそう) https://github.com/necolas/react-native-web/pull/1305
30 振り返り
▪振り返り 🤷 • コードの共有はもっといい形でできそう(模索中) ◦ ちょっと昔の記事ですが、大枠の構成は結構理想形に近いかもしれない、、 ▪ https://qiita.com/Nkzn/items/8e31efe0ebafa8038bde 🙆 •
見込み通り、立ち上げ〜運用までかなり楽できている ◦ 1つのWebアプリにかかる維持コストとしてはかなりコスパがいい (もちろんRNの本体込で) • ベーシックなAPIはかなり安心して使える
32 ありがとうございました!!!