日時：2018/09/19(水) 19:00 〜 21:30
場所：ヤフー株式会社大阪グランフロントオフィス

ヤフーさん主催のMix Leapにはよくお世話になっていますが、今回は私が参加したことがある中でも参加者がかなり多く、React Nativeというテーマの関心の高さが伺えました。まだまだアップデートが頻繁に行われていてメンテナンスに手がかかるるなど、本格的に扱ううえでの課題はありそうですが、フレームワークとして熟れてきているのは感じました。

※メモの都合上Ract NativeをRNと略して表現してあります。RNと略すのが一般的かどうかはよくわかっていませんが。。

React Nativeでモバイルアプリ開発をはじめよう！

藤本卓哉（株式会社Gemcook）さん

遅刻してしまって途中から聞いたのでざっくりまとめます。

課題

バージョンを1つ上げただけでこける

メリット

一度にiOS/Androidの両方がビルドできる。リリースまでの時間短縮
学習コストが下がることで本来集中すべき作業に集中できる

デメリット

ネイティブ側のビルドでコケたらデバッグが大変
ネイティブで新しい機能が出た時にRNの対応待ちになる
- ブリッジ機能でネイティブコードを書けば動く

AirbnbのRN撤退宣言

⇒マイナス的な撤退ではない

当初は最高の選択肢だった
今はAirbnbの拡大がRNの成長を上回っただけ

まとめ

iOS/Android両方開発できる
たくさんの企業が採用
StartUpのようなスピード命の会社にとって最高の技術

WebエンジニアがReact Nativeで開発した気づき

言上和也（ヤフー株式会社）さん

※参考記事

qiita.com

プロダクト導入の経緯

訪日外国人向けの情報サイトのアプリ化
構造はシンプルでニュースサイト
期間は3〜4ヶ月
iOS/Android両方

困ったこと

本職はWebエンジニア
Androidは2.0以降触ってない
チームにアプリ開発のナレッジがない
React.jsは経験ある

リーダーに相談

React Nattiveが流行っている

最初の感想

聞いた時⇒クロスプラットフォームって遅いんじゃない？
React⇒書き方違うのでは？

採用の決め手

learn once, write anywhereの体現
他のクロスプラットフォームに比べてパフォーマンスが良い

開発の実績

1ヶ月で企画＋学習
＋1ヶ月半でiOSをリリース
＋1ヶ月でAndroidリリース

実装できた理由

lean once, write anywhereの体現
- React.jsと違うのは描画部分だけ
- ReactとRNはライフサイクルが同じ
  - iOSとAndroidの違いは裏側でよしなにやってくれる
  - 素晴らしいOSS
    - データフロー周り
    - 経験のあったreduxが使える
Web開発の知見がいかせた
- npmによるパッケージ管理
  - Cocoapodsとかgradleとか不要
  - スライリングがCSSライク、レイアウトがflexbox
OSSを使うことの開発効率の向上
- RNの足りない部分や簡単に使えるようにしてくれるライブラリが豊富
コードの共通化
- 体感的に7〜8割程度共通化

Webエンジニアから見たRN

良い点

Reactを経験しているとスムーズ
Web開発の知見が活かせる
想像以上にコード共通化
ホットリロード地味に便利

辛かった点

モバイルの知識は必須
- iOS/Androidの開発環境
- UXの違い
- モバイルアプリに必要なコンポーネント（カメラとか）
- deployまわり

実装周りの辛かった点

凝った開発をしよう思うとネイティブのカスタマイズが必要
version upの波が早い（2週間に一度）
OSSの更新が止まるリスク
iOSかAndroidかどちらかだけOSSがうまく出来ないリスク
deployまわりが辛い

環境周りの辛かった点

RNのアップグレード
ドキュメントがほぼ英語
ナレッジが少なくエラーログで検索しても出てこない
ある程度仕様をコントロールできないと詰む
FBにロックイン

RNに合う組織

Webエンジニアが強い
専門チームを持つほど組織が大きくない
Reactの実績がある
仕様のコントロールができる（自社サービスなど）

合うプロダクト

要件がシンプル
こだわり＜スピード
ミニマム機能ですばやくリリースしたい
iOS/Androidがターゲット
開発初期のプロトタイプ

Gemcookで使うReact Nativeで絶対使えるライブラリ

西野竣亮（株式会社Gemcook）さん

RNのライブラリ

ルーティング - React Navigation - Stack Navigator - Tab Navigator - DrawerNabvigator （開発途中で安定しない） - Fluid Transitions for React Navigation - かっこいい - react-native-router-flux - とりあえず試すならこれ - ネイティブ機能型 - react-native-splash-screen - React Native Camera - カメラはこれ一択 - react-native-maps - うまく動かずハマっている事例は多い - UI系 - NativeBase - Webで言うBootstrap的な立ち位置 - react-native-vector-icons - Font Awesome的なもの - react-native-lightbox - Lottie for React Native - Adobe After Effectsのプラグインで素材を作ってLottieに読み込ませる - react-native-app-intro - オンボーディング

自社のOSS紹介

eslint-config-gemcook
- ESLintの初期設定
- とりあえずESLintを動かせる
@gemcook/table
- テーブルの実装
@gemcook/pagenation
- ページネーション

ReactでToDoリストアプリを作ってみた

山崎好洋（ヤフー株式会社）さん

Jetbrains製の kotlin-reactで ToDoアプリを作ってみよう

ToDoアプリは以下を参考

qiita.com

（コードの解説は割愛）

無理やり感はない
Kotlinのモダンな言語仕様を利用してフロントが書ける
TypeSafeにフロントをかけるのはよい
サーバサイドも同じ言語で書けるようになる
反対にKotlinでReactの部分を書けるかも

VisualStudio2017でReactを使ってみる

つるまきさん

VSでReactが動くまで

VS2015
- Marketplaceでテンプレ入手
  - あとであれこれ入れるのが必要
- 個別にインストール
  - 手順が大変
VS2017
- 辛い環境変わらず
5ヶ月後にテンプレ更新
- 簡単に動くようになる
- Node.js入れてよというエラー
  - Nodeのバージョンが古い
  - Nodeだけ手動で入れ直すと動く