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
500
React Native におけるアクセシビリティ対策について
moriyuu
0
260
Reanimated v2 overview
moriyuu
1
380
Other Decks in Programming
See All in Programming
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.6k
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.6k
CSC509 Lecture 07
javiergs
PRO
0
250
Google Opalで使える37のライブラリ
mickey_kubo
3
150
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
650
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
NIKKEI Tech Talk#38
cipepser
0
250
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
930
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
430
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
KATA
mclloyd
PRO
32
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Gamification - CAS2011
davidbonilla
81
5.5k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
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 サーバー ウェブ