React native実践談

ReactNa�ve実践談

ShareWis Inc.

@Kuchitama

Copyright @kuchitama, All rights reserved. 1

自己紹介

@Kuchitama(国平清貴)(株)シェアウィズチーフエンジニア

Scala忍者

最近Rubyばっかり1児の父


シェアウィズ大阪発 EdTech スタートアップ

Webサービス

ShareWis

ShareWisACT(近日ShareWisと統合)

その他

キャリアアップ研修

こういうのに興味がアレばご連絡ください https://goo.gl/amuTfMCopyright @kuchitama, All rights reserved. 3

https://goo.gl/amuTfM

シェアウィズのサービス

ShareWisReactNa�ve製https://youtu.be/qPecv5iSVIY


https://youtu.be/qPecv5iSVIY

質問

React使ったことあるひと？


質問

スマーフォンアプリ作ったことあるひと？


質問

ReactNa�ve使ったことあるひと？


質問

ReactNa�veでアプリ作ってみたいひと？


質問

ReactNa�veでアプリ作ってみたいひと？

やめておけ！！！！


おしながきReactNativeとは

ReactNativeのエコシステム

Pros/Cons

実際に困ったこと

何に向いているのか

ReactNative開発でコケないために


ReactNa�veとは


ReactNa�veとはFB製のiOS/Androidアプリ開発環境


ReactNa�veとはWrite once, Run everywhereここにいるみなさんには馴染み深いはず


ReactNa�veとはWrite once, Run everywhere

Learn once, Write everywhere

1度学べば何でも作れる


ReactNa�veとはLearn once, Write everywhereReactを学べば、Webだけでなくスマートフォンアプリ開発ができる


ReactNa�veとはLearn once Run everywhereReactを学べば、Webだけでなくスマートフォンアプリ開発ができる


ReactNa�veとは

ReactNative Showcase


https://facebook.github.io/react-native/showcase.html

ReactNa�veとは




ReactNa�veとは




ReactNa�veのエコシステム



Package Managernpm/yarn

yarnオススメ(実際、利用中)

詳しくは@tan_go238 さんの発表で

rnpm

ReactNativeライブラリ用のパッケージマネージャ

ネイティブライブラリのリンクをある程度自動でやってくれる



Con�nuous Integra�onシェアウィズ社の変遷

1. CircleCI

2. BuddyBuild

3. Jenkins

その他

MicroSoft Mobile CenterCopyright @kuchitama, All rights reserved. 22


Distribu�onAppHub(利用中)

MicroSoft CodePush

※リリース済みのアプリに対して、ストアを通すこと無くバージョンアップできる※ReactNativeは内部にJSがバンドルされてるだけなので、それを差し替える



Librarieshttps://github.com/jondot/awesome-react-native


https://github.com/jondot/awesome-react-native

Pros/Cons


ProsReactのノウハウがそのまま使える

Reactの本読んだらReactNativeが書けた

Web技術でアプリが実装できる

ES2015/2016とか

ちょっと違うけどStyleSheetとか

1ソースでiOS/Android両方できる

画面によってOSごとにソースを分けることもできる

ネイティブパフォーマンス


Consとはいえ、Native知識は必要

バージョンアップ早すぎ

OS/端末のバージョンアップへの追従

人材確保(採用)




実際に困ったことタブレット対応

スタイル崩れる崩れる

結局、端末解像度に応じて、パターンを用意することに

つらい


実際に困ったことバージョン設定の分散

package.json - ReactNativeアプリとしてのバージョン

Info.plist - iOSアプリとしてのバージョン

build.gradle - Androidアプリとしてのバージョン

つらい


実際に困ったことReactNative本体のバージョンアップ

1ヶ月ごとにリリース

破壊的変更が結構入る

特にスタイルは崩れやすい

外部ライブラリが追従してない

マイグレーションでネイティブコードの変更が上書きされる

つらすぎるCopyright @kuchitama, All rights reserved. 31


その他

Redux導入

いろいろライブラリはある

けど正直面倒

油断するとメモリを圧迫

テスト


ReactNa�ve開発でコケないために



開発着手前のライブラリ選定

開発が活発か？

リリースサイクルは？

Androidに対応しているか？



Na�veではダメですか？

iOS/Androidエンジニアが居ないと厳しい

タブレット対応するなら現状はネイティブが絶対楽

そもそもNativeの方が情報量が多い

てゆうか、メジャーリリースされてないツールを使うんですか？



Cordovaではダメですか？

Cordovaの方がまだ情報量が多い

React使えばいいんじゃない？

そこまでパフォーマンス重要ですか？

メジャーリリースされてないツールを使うんですか？


じゃぁ何に向いてるのさ

List(Webエンジニアしかいない(ヒト)

外部に依頼できない(主にカネ)

iOS/Android分けて作る余裕がない(ヒト、カネ、時間)

パフォーマンス必須

).forall突然のScala


最後に


早くメジャーリリースしてくださいよ！！


補足資料http://artsy.github.io/blog/2016/08/15/React-Native-at-Artsy/

http://qiita.com/kiita312/items/8afed1d3cb47d097ac32


http://artsy.github.io/blog/2016/08/15/React-Native-at-Artsy/

http://qiita.com/kiita312/items/8afed1d3cb47d097ac32

Technology

React native実践談