ReactとReact Nativeを共通化させる試みの話 - FUKUOKA Engineers Day 2018 ~Autumn~

Transcript

1. React と React Native を 共通化させる試みの話 （序章） pixiv Inc. Yusuke Otawa @tawachan39 2018.6.5
2. 自己紹介 • 大多和 祐介（オオタワ ユウスケ） ◦ twitter: @tawachan39 • ピクシブ（pixiv） 福岡オフィス • 東京生まれ・埼玉育ち・福岡歴１年弱 2 tawachan
4. でやっていること 4 API Server Web/PWA iOS CDN
5. 普通につらい 5
6. iOSとWebの二重開発でスピード感に欠ける 6 6 API Server Web/PWA iOS CDN
7. どうにか一本化したい 7
9. iOSとWebの二重開発でスピード感に欠ける 9 9 API Server Web/PWA iOS CDN
10. • どうしたら React でいい感じに ウェブとアプリを作れるか • 今のところ一番良さそうな方法 • 実践登用したわけではないのでただの共有段階 • 前提： ◦ 最速で柔軟に試行錯誤できる（≒ 開発速度） ＞ 体験の細かな質の向上 ◦ 知見があればぜひ共有していただけると嬉しい！ 10 今日話すこと
11. • React / React Native ってどんなもの • React で create-react-app を使うべきか • React Native で Expo.io を使うべきか 11 今日話さないこと
12. 12 試したこと 1. React / React Native を同じリポジトリに置いてデータ周りを共通化する 2. React Native に React Native for Web を導入する 3. ReactXP でプロジェクトを作成する 4. React Native Dom を導入する
13. ① React / React Native を同じリポジトリに 置いてデータ周りを共通化する 13
14. • React と React Native のプロジェクトをそれぞれ作る • View はそれぞれの実装をして、Data 周りは共通化させる どういうこと？ 14 共通化
15. • React / React Native の独立し たプロジェクトを併存させる • redux など見た目に関わらない 部分を common に切り出す • 各プロジェクトから common 参 照する ディレクトリ構成 15 . ├── common │ ├── reducers │ └── actions ├── native │ ├── ios │ ├── android │ ├── src │ ├── package.json │ ├── tsconfig.json │ ├── tslint.json │ └── yarn.lock └── web ├── package.json ├── public ├── src ├── tsconfig.json ├── tslint.json ├── webpack.config.js └── yarn.lock
16. • ただのReact と React Native の プロジェクトなのでなんでもできる • Native / Web 特有の実装も問題 なくできる • データ周りを切り分けるモチベー ション 自由で良さそう 16 . ├── common │ ├── reducers │ └── actions ├── native │ ├── ios │ ├── android │ ├── src │ ├── package.json │ ├── tsconfig.json │ ├── tslint.json │ └── yarn.lock └── web ├── package.json ├── public ├── src ├── tsconfig.json ├── tslint.json ├── webpack.config.js └── yarn.lock
17. • package.json が２つ（３つ）ある • ほぼ内容が同じ tsconfig.json と tslint.json が生まれる • common 配下のファイルの責任 の所在が怪しい • そもそも開発早くなるのか？ 管理が複雑でつらい 17 . ├── common │ ├── reducers │ └── actions ├── native │ ├── ios │ ├── android │ ├── src │ ├── package.json │ ├── tsconfig.json │ ├── tslint.json │ └── yarn.lock └── web ├── package.json ├── public ├── src ├── tsconfig.json ├── tslint.json ├── webpack.config.js └── yarn.lock
18. ちょっと微妙 18
19. ② React Native に React Native for Web を導入する 19
20. • React Native のプロジェクトに後入れできる • React Native のコンポーネントを Web で使える形にトランスパイルしてくれる • React Native をそのままが使えるので View も共通化できる • （一部対応していないコンポーネントが現段階ではある） • React Dom もかける • https://github.com/necolas/react-native-web React Native for Web とは 20
21. import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; export default class WebApp extends React.Component { render() { return ( <View> <Text style={{fontSize: 20, color: 'blue'}}>ネイティブ</Text> <div style={{fontSize: 20, color: 'red'}}>ウェブ</div> </View> ); } } React Dom と React Native が共存できる 21
22. export default class App extends React.Component { render() { if (Platform.OS == 'web') { return ( <View style={styles.container}> <div style={{fontSize: 20, color: 'red'}}>ウェブ</div> </View> ); } else { return ( <View style={styles.container}> <Text style={{fontSize: 20, color: 'blue'}}>ネイティブ</Text> </View> ); } } } Platformによって出し分ければよさそう 22
24. 結構よさそう 24
25. • 純粋な React Native のプロジェクトに後から入れることができる • 複数のプロジェクトを飼いならさなくてよいから楽 • React Native コンポーネントを割といい感じに変換してくれる ◦ Vibration API も変換できていたりする ◦ 挙動が見れる：http://necolas.github.io/react-native-web/examples/ • Web 用にトランスパイルできなくても、 Web 用の実装をして出し分けることができる React Native for Web 25
26. 26 試したこと 1. React / React Native を同じリポジトリに置いてデータ周りを共通化する 2. React Native に React Native for Web を導入する 3. ReactXP でプロジェクトを作成する ◦ https://microsoft.github.io/reactxp 4. React Native Dom を導入する ◦ https://github.com/vincentriemer/react-native-dom
27. まとめ 27
28. 今回のまとめ • React と React Native を使って飼いならす方法は結構ある • 暫定的には React Native でアプリを開発して React Native for Web で Web を作るの が一番安定そう 28