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
670
tech_hills 20220727
kou1127h
0
110
技育祭2022勉強会資料
kou1127h
0
220
Other Decks in Technology
See All in Technology
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
440
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
3
230
2025年になってもまだMySQLが好き
yoku0825
8
4.5k
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
260
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
330
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
210
Language Update: Java
skrb
2
290
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.2k
KotlinConf 2025_イベントレポート
sony
1
110
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
280
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
130
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
A designer walks into a library…
pauljervisheath
207
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
187
55k
Automating Front-end Workflow
addyosmani
1370
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Writing Fast Ruby
sferik
628
62k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
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 ありがとうございました!!!