Osaka Mix Leap Study #23 - React Native 勉強会に参加してきました
9月19日に Yahoo! JAPAN の大阪オフィスで開催された Osaka Mix Leap Study #23 - React Native 勉強会に参加しました。
確か台風の影響かなんかで振替開催された勉強会です。
参加してみて
正直今の段階で React Native を使うのはちょっとこわいなーって感じがしました。
主にそう感じた部分は以下の点。
- ネイティブ側のビルドでこけたらデバッグがめちゃめちゃつらい
- ネイティブ側の実装を触りたい場合はブリッジという機能を使うらしいが、 ネイティブ側のプログラミングができる人じゃないときつい
- React Native はネイティブ実装と同等のことを実現するのが難しい場合がある(React Native パッケージの API の都合)
- ある程度仕様をコントロールできる案件でないときつい
自分はネイティブのプログラムはあまりやったこと無いので、ネイティブ側でコケた場合は確実にハマる自信がある。
社内でネイティブエンジニアがいる場合は相談とかできるしいいかもしれないですね。
あと一番重要だと思ったのは、仕様をコントロールできる案件でないときついというところ。
今自分が働いてる職場でも React Native で制作しているアプリ案件があるのですが、仕様のコントロールが完全に先方なのでかなり苦労してました。
先方)ここの機能追加してくれー → 弊社)React Native で実装するのきついなぁ → 先方)知らんやん、やれ → 絶望
上記みたいなパターンのやりとりが弊社でも発生しててほんとしんどそうでした。
実際、ネイティブエンジニア総出でやってたりしてたのできつそうなイメージしかなかったです。
結果
Web サービスの体験を良くするためにアプリとして作りたいというなら採用してもいいかもと思いました。
たとえばシンプルなアプリ(ニュースアプリや掲示板アプリ)とか。反面、ネイティブの機能をよく使うアプリはどうかなと思います。カメラアプリとか。
WEBエンジニアの知識で iOS/Android の開発ができるところはとても魅力的ですが、 React Native の頻度の高いバージョンアップへの対応と、採用しているプラグインのバージョンアップ対応が追いつかなかったりするところが採用にブレーキをかけてしまう原因となってます。
ネイティブ周りの人材が豊富な企業などはネイティブでアプリ制作するのが無難かなーと思いました。
議事録
19:05-19:25 「React Nativeでモバイルアプリ開発をはじめよう!」 藤本 卓哉(株式会社Gemcook)
- 代表兼エンジニア
AWS大好き
対象の人
- Reactわからん
- ReactNativeが難しそうで取っ付けない人
- 最近入門した人
ゴール
- ReactNative でアプリ作りたいって思わせる
React復習
- ReactNativeとは
- RN = ReactNativeのことだよ
- ネイティブモバイルを構築するためのJSライブラリ
- インスタ/スカイプ/ピンタレスト/ウーバーが使ってるよ
- iOS/Android 一度にかけることが激アツ
- ReactNative 使えばエンジニアの人材不足を回避できるよ〜
- フロントエンド無双できるよ〜フルスタックなれるよ〜
- ライバル
- angular + native script
- vue + weax
- なんで ReactNative 選んだか
- airbnb のソース見るとかなり勉強になるしわかりやすいよ〜
- airbnb の撤退はマイナス的な撤退じゃないよ
- RNの選択肢は最高だった
- airbnbの成長がReactNativeの成長を上回っただけ
- 人材確保の面などをふくめて
19:25-19:45 「WebエンジニアがReact Nativeで開発した気づき」 言上 和也(ヤフー株式会社)
- アジェンダ
- 導入の経緯
実装できた理由・辛かったとこ
- 自分が優秀だったから実装できたわけではない
- ポイント
- learn once,write anywhere の体現
WEBの知見がいかせる
OSSを使った効率向上
WEBエンジニアから見たReactnative
- 想像以上にコードの共通化できる
- ホットリロードが便利
- web知見活かせる
- react知ってるとだいたいできる
- 手放しにおすすめはできません
- はまるとやばい、抜け出せない
- モバイルの知見は必須(ネイティブ皮がもってる昨日など)
- 各モバイルの開発環境は必要
- deploy周り(React の知識では補えない)
- UXの違い
- 凝った開発するとネイティブすぐさわらなあかん
- バージョンアップがすごいはやい間隔でされる
- 公式のバージョンアップでライブラリ開発者がおいつけずOSSの更新とまっちゃう
- OSSライブラリでiOSちゃんと動いてるけどAndroidが弱かったり、その逆もしかり。。。ということがようある
- とにかく deploy まわりがつらすぎた
- ReactNativeのバージョンアップがつらすぎる
- ドキュメントが英語
- エラーログで探しても情報が出てこない
- ある程度仕様をコントロールできないとつらい、代理店様様ではやばい
- ReactNativeに合う案件
19:45-20:05 「Gemcookで使うReact Nativeで絶対使えるライブラリ」 西野 竣亮(株式会社Gemcook)
- アジェンダ
- ライブラリとは・何ができる?どこまでできるの?部分
- React単体では動かないからCreateReactAppを実行するよ
- Reactを立ち上げるための準備を一通りしてくれるよ
- 自分らがつくってるものはライブラリの寄せ集め
- React単体では動かないからCreateReactAppを実行するよ
- 使えるライブラリ
- ReactNativeのライブラリの特徴
- ルーティング(画面制御系)
- ReactNavigation
- 細かいとこまで作り込めるよ
- StackNavigator
- 画面の重なりを表現するルーティング、iOSでよくあるやつ
- TabNavigator
- よくあるやつ、ただのタブ
- DrawerNavigator
- 開発途中で安定してないので今は使わないほうが良いよ
- Fluid Transitions for React Navigation
- かっこええ演出つくれそうやで
- react-native-router-flux
- めちゃめちゃ簡単やからひとまずルーティングしたいだけならこれも使えるよ(案件ではおすすめできないかも)
- ReactNavigation
- Native機能系(カメラとか)
- react-native-splash-screen
- componentdidmountでスプラッシュスクリーンの制御できる、簡単に使えるよ
- react native camera
- カメラ使いたい時はとりあえずこれ
- 写真・動画・顔認証・バーコードスキャン機能あるよ
- react-native-maps
- propsを流し込むだけで、Mapを表示できる
- 導入部分で挫折する人多いけど、高機能だからとてもおすすめだよ
- MAP使ったアプリを作る時はおすすめ
- テーマも選択できるよ(ダークとか)
- react-native-splash-screen
- UI系(今回紹介するのは簡単なやつやで)
- NativeBase
- ReactNative界のBootstrap
- Androidはマテリアル
- react-native-vector-icons
- とりあえずいれとけ
- react native blur
- 画像系?
- react-native-lightbox
- ページ遷移なしで画像拡大機能あるよ
- lottie for react native
- adobe after effects のプラグインを使って素材を作ってlottieに読み込ませるとリッチなアニメーションの実装ができるよ
- react-native-app-intro
- オンボーディングを構築できるライブラリ
- 鬼簡単に実装できる
- おすすめやで
- NativeBase
- ルーティング(画面制御系)
- ReactNativeのライブラリの特徴
- 自社OSSの紹介(githubでも公開してるよ)
- ESLint-config-gemcook
- gemcook/table
- gemcook/pagination
- ライブラリとは・何ができる?どこまでできるの?部分