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
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
180
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
330
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
720
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
CursorはMCPを使った方が良いぞ
taigakono
1
210
PipeCDのプラグイン化で目指すところ
warashi
1
230
Is Xcode slowly dying out in 2025?
uetyo
1
240
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
660
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
530
Benchmark
sysong
0
280
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
94
6.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Docker and Python
trallard
44
3.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
RailsConf 2023
tenderlove
30
1.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
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 サーバー ウェブ