react native実践談
TRANSCRIPT
![Page 1: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/1.jpg)
ReactNa�ve実践談
ShareWis Inc.
@Kuchitama
Copyright @kuchitama, All rights reserved. 1
![Page 2: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/2.jpg)
自己紹介
@Kuchitama(国平清貴)(株)シェアウィズ チーフエンジニア
Scala忍者
最近Rubyばっかり1児の父
Copyright @kuchitama, All rights reserved. 2
![Page 3: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/3.jpg)
シェアウィズ大阪発 EdTech スタートアップ
Webサービス
ShareWis
ShareWisACT(近日ShareWisと統合)
その他
キャリアアップ研修
こういうのに興味がアレばご連絡ください https://goo.gl/amuTfMCopyright @kuchitama, All rights reserved. 3
![Page 4: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/4.jpg)
シェアウィズのサービス
ShareWisReactNa�ve製https://youtu.be/qPecv5iSVIY
Copyright @kuchitama, All rights reserved. 4
![Page 5: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/5.jpg)
質問
React使ったことあるひと?
Copyright @kuchitama, All rights reserved. 5
![Page 6: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/6.jpg)
質問
スマーフォンアプリ作ったことあるひと?
Copyright @kuchitama, All rights reserved. 6
![Page 7: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/7.jpg)
質問
ReactNa�ve使ったことあるひと?
Copyright @kuchitama, All rights reserved. 7
![Page 8: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/8.jpg)
質問
ReactNa�veでアプリ作ってみたいひと?
Copyright @kuchitama, All rights reserved. 8
![Page 9: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/9.jpg)
質問
ReactNa�veでアプリ作ってみたいひと?
やめておけ!!!!
Copyright @kuchitama, All rights reserved. 9
![Page 10: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/10.jpg)
おしながきReactNativeとは
ReactNativeのエコシステム
Pros/Cons
実際に困ったこと
何に向いているのか
ReactNative開発でコケないために
Copyright @kuchitama, All rights reserved. 10
![Page 11: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/11.jpg)
ReactNa�veとは
Copyright @kuchitama, All rights reserved. 11
![Page 12: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/12.jpg)
ReactNa�veとはFB製のiOS/Androidアプリ開発環境
Copyright @kuchitama, All rights reserved. 12
![Page 13: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/13.jpg)
ReactNa�veとはWrite once, Run everywhereここにいるみなさんには馴染み深いはず
Copyright @kuchitama, All rights reserved. 13
![Page 14: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/14.jpg)
ReactNa�veとはWrite once, Run everywhere
Learn once, Write everywhere
1度学べば何でも作れる
Copyright @kuchitama, All rights reserved. 14
![Page 15: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/15.jpg)
ReactNa�veとはLearn once, Write everywhereReactを学べば、Webだけでなくスマートフォンアプリ開発ができる
Copyright @kuchitama, All rights reserved. 15
![Page 16: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/16.jpg)
ReactNa�veとはLearn once Run everywhereReactを学べば、Webだけでなくスマートフォンアプリ開発ができる
Copyright @kuchitama, All rights reserved. 16
![Page 17: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/17.jpg)
ReactNa�veとは
ReactNative Showcase
Copyright @kuchitama, All rights reserved. 17
![Page 18: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/18.jpg)
ReactNa�veとは
ReactNative Showcase
Copyright @kuchitama, All rights reserved. 18
![Page 19: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/19.jpg)
ReactNa�veとは
ReactNative Showcase
Copyright @kuchitama, All rights reserved. 19
![Page 20: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/20.jpg)
ReactNa�veのエコシステム
Copyright @kuchitama, All rights reserved. 20
![Page 21: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/21.jpg)
ReactNa�veのエコシステム
Package Managernpm/yarn
yarnオススメ(実際、利用中)
詳しくは@tan_go238 さんの発表で
rnpm
ReactNativeライブラリ用のパッケージマネージャ
ネイティブライブラリのリンクをある程度自動でやってくれる
Copyright @kuchitama, All rights reserved. 21
![Page 22: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/22.jpg)
ReactNa�veのエコシステム
Con�nuous Integra�onシェアウィズ社の変遷
1. CircleCI
2. BuddyBuild
3. Jenkins
その他
MicroSoft Mobile CenterCopyright @kuchitama, All rights reserved. 22
![Page 23: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/23.jpg)
ReactNa�veのエコシステム
Distribu�onAppHub(利用中)
MicroSoft CodePush
※リリース済みのアプリに対して、ストアを通すこと無くバージョンアップできる※ReactNativeは内部にJSがバンドルされてるだけなので、それを差し替える
Copyright @kuchitama, All rights reserved. 23
![Page 24: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/24.jpg)
ReactNa�veのエコシステム
Librarieshttps://github.com/jondot/awesome-react-native
Copyright @kuchitama, All rights reserved. 24
![Page 25: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/25.jpg)
Pros/Cons
Copyright @kuchitama, All rights reserved. 25
![Page 26: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/26.jpg)
ProsReactのノウハウがそのまま使える
Reactの本読んだらReactNativeが書けた
Web技術でアプリが実装できる
ES2015/2016とか
ちょっと違うけどStyleSheetとか
1ソースでiOS/Android両方できる
画面によってOSごとにソースを分けることもできる
ネイティブパフォーマンス
Copyright @kuchitama, All rights reserved. 26
![Page 27: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/27.jpg)
Consとはいえ、Native知識は必要
バージョンアップ早すぎ
OS/端末のバージョンアップへの追従
人材確保(採用)
Copyright @kuchitama, All rights reserved. 27
![Page 28: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/28.jpg)
実際に困ったこと
Copyright @kuchitama, All rights reserved. 28
![Page 29: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/29.jpg)
実際に困ったことタブレット対応
スタイル崩れる崩れる
結局、端末解像度に応じて、パターンを用意することに
つらい
Copyright @kuchitama, All rights reserved. 29
![Page 30: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/30.jpg)
実際に困ったことバージョン設定の分散
package.json - ReactNativeアプリとしてのバージョン
Info.plist - iOSアプリとしてのバージョン
build.gradle - Androidアプリとしてのバージョン
つらい
Copyright @kuchitama, All rights reserved. 30
![Page 31: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/31.jpg)
実際に困ったことReactNative本体のバージョンアップ
1ヶ月ごとにリリース
破壊的変更が結構入る
特にスタイルは崩れやすい
外部ライブラリが追従してない
マイグレーションでネイティブコードの変更が上書きされる
つらすぎるCopyright @kuchitama, All rights reserved. 31
![Page 32: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/32.jpg)
実際に困ったこと
その他
Redux導入
いろいろライブラリはある
けど正直面倒
油断するとメモリを圧迫
テスト
Copyright @kuchitama, All rights reserved. 32
![Page 33: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/33.jpg)
ReactNa�ve開発でコケないために
Copyright @kuchitama, All rights reserved. 33
![Page 34: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/34.jpg)
ReactNa�ve開発でコケないために
開発着手前のライブラリ選定
開発が活発か?
リリースサイクルは?
Androidに対応しているか?
Copyright @kuchitama, All rights reserved. 34
![Page 35: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/35.jpg)
ReactNa�ve開発でコケないために
Na�veではダメですか?
iOS/Androidエンジニアが居ないと厳しい
タブレット対応するなら現状はネイティブが絶対楽
そもそもNativeの方が情報量が多い
てゆうか、メジャーリリースされてないツールを使うんですか?
Copyright @kuchitama, All rights reserved. 35
![Page 36: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/36.jpg)
ReactNa�ve開発でコケないために
Cordovaではダメですか?
Cordovaの方がまだ情報量が多い
React使えばいいんじゃない?
そこまでパフォーマンス重要ですか?
メジャーリリースされてないツールを使うんですか?
Copyright @kuchitama, All rights reserved. 36
![Page 37: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/37.jpg)
じゃぁ何に向いてるのさ
List(Webエンジニアしかいない(ヒト)
外部に依頼できない(主にカネ)
iOS/Android分けて作る余裕がない(ヒト、カネ、時間)
パフォーマンス必須
).forall突然のScala
Copyright @kuchitama, All rights reserved. 37
![Page 38: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/38.jpg)
最後に
Copyright @kuchitama, All rights reserved. 38
![Page 39: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/39.jpg)
早くメジャーリリースしてくださいよ!!
Copyright @kuchitama, All rights reserved. 39
![Page 40: React native実践談](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58ac3d991a28ab145e8b680f/html5/thumbnails/40.jpg)
補足資料http://artsy.github.io/blog/2016/08/15/React-Native-at-Artsy/
http://qiita.com/kiita312/items/8afed1d3cb47d097ac32
Copyright @kuchitama, All rights reserved. 40