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
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
140
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
230
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
300
ゼロからはじめる採用広報
yutadayo
3
990
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
560
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
470
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
180
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
240
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
180
AWS CDKの仕組み / how-aws-cdk-works
gotok365
8
300
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
300
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.5k
Featured
See All Featured
Navigating Team Friction
lara
187
15k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Gamification - CAS2011
davidbonilla
81
5.4k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
How GitHub (no longer) Works
holman
314
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Side Projects
sachag
455
42k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
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 ありがとうございました!!!