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
480
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
530
tech_hills 20220727
kou1127h
0
90
技育祭2022勉強会資料
kou1127h
0
200
Other Decks in Technology
See All in Technology
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
540
require(ESM)とECMAScript仕様
uhyo
3
780
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
480
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
260
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
200
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
370
Cypress or Playwright?
rainerhahnekamp
0
110
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.4k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
It's Worth the Effort
3n
180
27k
How to train your dragon (web standard)
notwaldorf
73
5.2k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
For a Future-Friendly Web
brad_frost
172
9k
Typedesign – Prime Four
hannesfritz
36
2.1k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
The Invisible Side of Design
smashingmag
294
49k
Infographics Made Easy
chrislema
238
18k
Six Lessons from altMBA
skipperchong
21
3k
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 ありがとうございました!!!