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
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
470
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
120
Reading Rails 1.0 Source Code
okuramasafumi
0
250
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
180
楽して成果を出すためのセルフリソース管理
clipnote
0
180
速いWebフレームワークを作る
yusukebe
5
1.7k
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
500
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Automating Front-end Workflow
addyosmani
1370
200k
The Cult of Friendly URLs
andyhume
79
6.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Rails Girls Zürich Keynote
gr2m
95
14k
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 サーバー ウェブ