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
630
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
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
590
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
220
slog.Handlerのよくある実装ミス
sakiengineer
4
470
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
340
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
いま注目のAIエージェントを作ってみよう
supermarimobros
0
350
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
750
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Statistics for Hackers
jakevdp
799
220k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Fireside Chat
paigeccino
39
3.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Typedesign – Prime Four
hannesfritz
42
2.8k
4 Signs Your Business is Dying
shpigford
184
22k
How to Ace a Technical Interview
jacobian
279
23k
Building Applications with DynamoDB
mza
96
6.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
How to train your dragon (web standard)
notwaldorf
96
6.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
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 ありがとうございました!!!