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
React Native for Web をはじめよう
Search
moriyuu
July 21, 2020
Programming
0
80
React Native for Web をはじめよう
https://sumidagawajs.connpass.com/event/179311/
moriyuu
July 21, 2020
Tweet
Share
More Decks by moriyuu
See All by moriyuu
マイクロインタラクション with React Native
moriyuu
0
490
React Native におけるアクセシビリティ対策について
moriyuu
0
250
Reanimated v2 overview
moriyuu
1
380
Other Decks in Programming
See All in Programming
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
400
CSC305 Lecture 03
javiergs
PRO
0
240
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
150
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
明日から始めるリファクタリング
ryounasso
0
130
CSC509 Lecture 03
javiergs
PRO
0
330
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
230
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.6k
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
690
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
730
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
75
5k
How GitHub (no longer) Works
holman
315
140k
We Have a Design System, Now What?
morganepeng
53
7.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Rails Girls Zürich Keynote
gr2m
95
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Faster Mobile Websites
deanohume
310
31k
Navigating Team Friction
lara
190
15k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Transcript
React Native for Web をはじめよう 2020/07/21 隅田川.js#2 (オンライン) stand.fm, Inc.
Yuta Mori
Yuta Mori Twitter: @moriyuu__ GitHub: @moriyuu
音声配信プラットフォーム
stand.fm 技術スタック アプリ - React Native - Flow - Redux
- Objective-C - Swift - Java - Node.js - express - bull - MongoDB - Redis - Google Kubernetes Engine - React - React Native for Web - Flow - Redux サーバー ウェブ
React Native for Web - 2017年くらいから開発開始 - 2017/09 くらいには Twitter
Lite に導入 - 先月 v0.13 リリース
実際なんなのか React Native が提供しているコンポーネント(View, Text, FlatList 等)を web でレンダリングできるように、全く同じ 使用感(インターフェース)で再現したもの
→ React Native の顔をした React のコンポーネント集
基本的な使い方 import .... from ‘react-native’ import .... from ‘react-native-web’ -
Webpack か babel 等で となってる箇所を と書き換えるだけ → React Native を使っていなくても React Native for Web だけ使う、というのが可能
実戦投入していこう ・導入するのにおすすめの環境 ・web と app のコードの共有 ・semantic な HTML にできるか?
導入するのにおすすめの環境 1. React Native のプロジェクトが元々ある 2. storybook と組み合わせる - アプリで使用するコンポーネントを一覧するドキュメントを
作れる - Visual Regression Test 3. web アプリを react-native-web 前提で作ってしまう - Twitter Lite がそう
web と app のコードの共有 「コンポーネントの使い回し」がメインの用途 → 現状、エンジニアが3人で iOS, Android, Web,
Server を書い てるのでかなり実装減らせている
ある web のページで component を import してきている箇所。半分くらいは app から import
している
semantic な HTML にできるか? - 何も気にしないと、すべてが div になる - aria-label,
role などの属性は accessibilityLabel, accessibilityRole などの props で対応してるので、適切に 指定してあげれば、良い感じにしてくれる
semantic な HTML にできるか? https://necolas.github.io/react-native-web/docs/?path=/docs/guides-accessibility--page
h t t p s : / / c o
r p . s t a n d . f m / r e c r u i t メ ンバ ー 募 集 中
stand.fm 技術スタック アプリ - React Native - Flow - Redux
- Objective-C - Swift - Java - Node.js - express - bull - MongoDB - Redis - Google Kubernetes Engine - React - React Native for Web - Flow - Redux サーバー ウェブ