$30 off During Our Annual Pro Sale. View Details »

React Native for Web をはじめよう

React Native for Web をはじめよう

moriyuu

July 21, 2020
Tweet

More Decks by moriyuu

Other Decks in Programming

Transcript

  1. React Native for Web をはじめよう 2020/07/21 隅田川.js#2 (オンライン) stand.fm, Inc.

    Yuta Mori
  2. Yuta Mori Twitter: @moriyuu__ GitHub: @moriyuu

  3. 音声配信プラットフォーム

  4. 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 サーバー ウェブ
  5. React Native for Web - 2017年くらいから開発開始 - 2017/09 くらいには Twitter

    Lite に導入 - 先月 v0.13 リリース
  6. 実際なんなのか React Native が提供しているコンポーネント(View, Text, FlatList 等)を web でレンダリングできるように、全く同じ 使用感(インターフェース)で再現したもの

    → React Native の顔をした React のコンポーネント集
  7. 基本的な使い方 import .... from ‘react-native’ import .... from ‘react-native-web’ -

    Webpack か babel 等で となってる箇所を と書き換えるだけ → React Native を使っていなくても   React Native for Web だけ使う、というのが可能
  8. 実戦投入していこう ・導入するのにおすすめの環境 ・web と app のコードの共有 ・semantic な HTML にできるか?

  9. 導入するのにおすすめの環境 1. React Native のプロジェクトが元々ある 2. storybook と組み合わせる - アプリで使用するコンポーネントを一覧するドキュメントを

    作れる - Visual Regression Test 3. web アプリを react-native-web 前提で作ってしまう - Twitter Lite がそう
  10. web と app のコードの共有 「コンポーネントの使い回し」がメインの用途 → 現状、エンジニアが3人で iOS, Android, Web,

    Server を書い てるのでかなり実装減らせている
  11. ある web のページで component を import してきている箇所。半分くらいは app から import

    している
  12. semantic な HTML にできるか? - 何も気にしないと、すべてが div になる - aria-label,

    role などの属性は accessibilityLabel, accessibilityRole などの props で対応してるので、適切に 指定してあげれば、良い感じにしてくれる
  13. semantic な HTML にできるか? https://necolas.github.io/react-native-web/docs/?path=/docs/guides-accessibility--page

  14. h t t p s : / / c o

    r p . s t a n d . f m / r e c r u i t メ ンバ ー 募 集 中
  15. 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 サーバー ウェブ