React Native for Web をはじめよう

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 サーバーウェブ

React Native for Web をはじめよう

React Native for Web をはじめよう

moriyuu

More Decks by moriyuu

Other Decks in Programming

Featured

Transcript