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
71
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
390
React Native におけるアクセシビリティ対策について
moriyuu
0
210
Reanimated v2 overview
moriyuu
1
310
Other Decks in Programming
See All in Programming
Folding Cheat Sheet #2
philipschwarz
PRO
0
110
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
本格ローグライク制作にEbitengineを選んでみた
nagainaganawa
0
290
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
150
エンターテイメント業界で利用されるAWS
demuyan
0
200
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
210
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
230
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
640
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
340
Folding Cheat Sheet #3
philipschwarz
PRO
0
110
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
3.1k
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
Featured
See All Featured
Optimizing for Happiness
mojombo
369
69k
The Power of CSS Pseudo Elements
geoffreycrofte
58
5k
The Cult of Friendly URLs
andyhume
73
5.7k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
RailsConf 2023
tenderlove
1
530
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Web Components: a chance to create the future
zenorocha
304
41k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Practical Orchestrator
shlominoach
181
9.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
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 サーバー ウェブ