雑な感想とメモ【React Native Meetup #5】 20170519 @mercari

勉強会 JavaScript

React Native Meetup #5に参加したので簡単な感想とメモを備忘録的に残しておく。

当日のビデオが公開されている。詳しく知りたい方は見ることができる。

Reactを業務でやっているけど、Reactでも活かせそうな知見もあった。 ReactNativeでなにか作ってリリースしてみたい！という気持ちの盛り上がりを感じた

  1. Why not React Native
    いきなり英語セッションで面食らう。
    ただ、始まったらゆっくりだし、内容は基本的にReactNativeのモチベーティング系の話だったのでスッと聞けた。
    すでにReact Nativeを触っている自分としてはそんなに目新しいことはなかったが、Maya-Kaiというツールは触ってみようかなと思った。
    日本語資料も後悔してくださっていたのでリンクはそれを張っている。

  2. Our choice in ReactNative
    Electronの入門本を書いてらっしゃる方で、この本は僕も読んでいたので一気に親近感(恐れ多いけど)。
    Native Bridge系の話を中心に話されていた印象だったので、Native連携は考えたことがなかった僕にとっては、なるほどこういうこともできるのか、という感じ。
    今回のミートアップで全体的にNative Bridgeのことが多く語られた気がするので、大きいアプリを作ることになったら考えよう。
    リリースの時の話もリリースする時になったらここに帰ってこよう。

  3. async/await 構文を使った Android とのブリッジ
    まず、async/awaitをReactでも使ったことがないんだが…
    というのは置いておいてReact NatveでNative連携をasync/awaitで書く話。
    まとめとしてはPromiseで統一した方がよいという話になっていて、書いて見ないとなんとも感。

  4. Introduction to React Native Animated Animated入門
    某SIer所属！趣味でReact Nativeやられているとは、すごい(僕も趣味だが、業務でReactやってるのでちょっと違う)
    Animated APIの話をされていて、僕も4月に行われたReact&React Native入門者の会 #2で話したが、さらに深掘りされていてためになった。
    ちなみに僕の発表資料は以下
    React Nativeでお絵描きしてみた

  5. react-navigation について
    セコンさんの発表。Rebuildfmなどで名前は知っていたが、ちゃんとにんしきしたのは初めてだった。
    react-navigationについて話されていたが、3月末くらいに触り始めた僕にとってReactNativeのルーティングライブラリはまだ正式ではないものの、公式にあったreact-navigationだったので、最近できたと聞いてそうだったのか、と思った。
    ReduxとMobXの話もちらっとされてて、会場の興味的にこちらの方を喋って欲しい感を感じた。
    僕は業務でReduxを触っていて、最近インターネットでReduxが複雑を助長していてよくないみたいなことでdisられているのを聞いて悲しい。
    MobXを使って見て、Reduxを使う理由を主張しようかなと画策するなど。

  6. ReactNativeで9個アプリを作って、1個リリースして、使ったおすすめツールを紹介
    React Native関連でいろんなツールを紹介。
    まとまっていて参考になるやつ。

  7. Web開発者がReact Nativeで開発から運用までして辛かった事
    最後で押していたからか、かなり足早に説明されていた印象。
    コンパクトにまとまっていた感があって聞きやすかった。
    Web感覚で開発できるというのはそれだけで完全に良いことだと思った。
    会場で挙手のアンケートをしていたのだが、Rubyを業務でやってらっしゃる方がかなりいて、Webで仕事をしていてNativeも触りたいという人の簡単な入り口になるというのは作られた目的の一つが達成されている感があるなあと思った。
    しかしなんでこんなにRuby経験者が多かったのだろうか？

懇親会
1人目に話されていたmercariの中の人に話を聞くことができた。
聞いたこととしては、以下

  • mercari appではどのくらいの割合でReact Nativeが使われているのか
    • 20%程度
  • 型判定のライブラリは使っているのか
    • プロジェクトにもよるが、typescriptとflowの両方を部分的に使っている
  • ReduxとMobXではどっちが好きか
    • MobX、やっぱりReduxは複雑になりがち

以下メモ

React Native Meetup #5

Why not React Native @dotPKG

英語セッション!

React Nativeを導入すると考えたときに条件がある

  • 既存アプリとの連携
  • 最良のプログラミング言語
  • 最高の開発体験
  • 習得の氏やすさ
  • 最高のQA体験
  • 最強の監視ツール
  • 盛んなコミュニティ(※現在48kのgithubスター)

2015年はまだ使うべきじゃなかった

要件

  • 既存アプリ上に構築できるコト
  • 敏速性の高さ
  • 最高なQA体験
  • 最強の監視ツール
  • 最大級のコード共有

ローンチした後

クラッシュリポーティング

Exponent + Maya-Kaiで最高の開発体験が得られる

Maya-Kaiがbrowser-sync的に働いてReact Nativeで作ったアプリのQAの工数削減としてすばらしいツールになった @sota1235さんが作ってる？

Mercariアプリの技術スタック

  • React
  • MobX
  • React Navigation
  • ES6
  • clarifai

2017年はReact Nativeを始めるのに十分良い JavaScriptでアプリ開発を始めよう

Our choice in ReactNative @joe_re

freeeの人 Electron本の作者

交通費精算アプリをReactNativeで作ってリリースした

注意(Android向け)

How was ReactNative

  • 開発期間3ヶ月
  • 2名(フロントとサーバサイド) + インターン
  • モバイルエンジニアなし

やっぱりNativeの知識は必要

Nativeの試算を活かしたい場面ではNativeコードを書くことができる

開発体制的に、正解だった

モバイルエンジニアが近くにいるとよい

NativeLayerの試算を活かす方法

  • NFCタグを読み取り使用履歴に変換 Android SDKはNFCを読み込む操作を提供 NFCAdapterをwrapしたものをReactのライフサイクルメソッドから呼ぶ componentDidMountで呼び出す

簡単にAndroid SDKを呼び出せる

JS Layerのミドルウェア

  • redux-thunk
  • redux-promise-middleware
  • redux-logger

redux-promise-middlewareを選択した理由

Promiseの状態に従ってアクションの発行を自動化してくれる

payloadにpromiseを渡す→promiseのstateの遷移に従ってactionが自動でdispatchされる

NativeアプリケーションとReduxStateとの相性は良い

Router = react-native-router-fluxを使っているが…

個人的にはreact-navigationが良いっぽい？

HOCの活用

  • ログイン必須ページのログイン要求
  • flex-boxだけでは対応の難しい画面サイズ
  • Indicatorの表示

リリースのためにやったこと

Crashlyticsを導入 ReactNative向けにreact-native-fabricというモジュールがあるのでいれておくとよい　

不要な権限を消す(Android)

デバッグツールのために要求されているのでmanifestを書く Androidのgradleスクリプトではディレクトリの規約によりリリース時のManifestを選択できる

YarnのLicense表記

package.jsonの依存定義からLicense表記を生成するコマンドがある ※ あくまでも雛形

AsyncStorageREPL

AsyncStorageをNodeのREPLから見ることができる(使ってみたい！)

質問

flexbox使わなかったらAndroid確かに大変そう

async/await 構文を使った Android とのブリッジ @nullpoo

mercari フロントエンド

Androidのインテントを使って、処理結果を受け取りたい

なぜ？ 音声入力をもとに表示内容を切り替え 音声入力ダイアログを呼び出したい Android開発の知見があるので、Androidのブリッジを使ってできそう

what インテント

アプリ間連携のためのメッセージングオブジェクト

Androidでインテント遷移先の結果をハンドリング

ReactNaiveでブリッジするには

1.Android側でJS側に公開するメソッドを作成"@ReactMethod"を付与するとReact native側で付与したメソッドを呼ぶことができる 2.React Native側に公開するパッケージを作成&登録 3.JS側で公開されているメソッドを呼び出す

async/awaitを使って結果を受け取る

ReactMethodでPromiseを扱うことができる 引数にPromiseを追加するとReactNative側でPromiseとして受け取ってくれる

しかし、async/awaitを使えばPromiseより直感的に扱うことができる

まとめ

  • Callbackを渡す方法やAndroid→JSのブリッジを使うこともできる
  • しかしPromiseをasync/awaitでハンドリングするほうがスマート
  • 同期処理でない処理を行うブリッジはPromiseで統一したほうが引数もスッキリして良さそう

Introduction to React Native Animated Animated入門 @nolick1219

某SIerで介護評価検索サービスの立ち上げ 普段はRuby on Rails

React Nativeにおけるアニメーション

  • Animated
  • LayoutAnimation 簡易的

アニメーションの流れ

  1. アニメにより変化する値を定義
  2. 変数にCSSプロパティを紐付け
  3. 変数をAnimated.timing()などに渡す
  4. 変数の値の変化にあわせて変化させる

Animated.Value()

変数とは別レンジでCSSプロパティを紐付けたい

interpolate()

連続するアニメーション

  • Animated.parallel()
  • Animated.sequence()
  • Animated.stagger()

今後試したいこと

Animated.Value同士を足したり書けたりできる Animated.event()でユーザーのジェスチャーによってValueを変えることができる

react-navigation について @hotchpotch

セコンさん WAmazing CTO not flux → Mobx

navigationライブラリの必要性

画面構成数が少なければ必要ない

  • タブ型
  • スタック型
  • タブ+スタック型

ナビゲーションを実装するにあたり、必要な要素

画面を構成する部分を決定

  • stackならナビゲーションバー
    • タイトルや戻るボタン、その他ボタン
    • おもにヘッダに実装される

何を表示するかを決める部分

  • Router + state管理
    • stackならstack管理
    • タブならツリー構造管理
  • deeplinkからの復元
    • appname://search/キーなどでどのように表示するか

どうアプリにナビゲーションを組み込むか

  • 自前
  • 既存のライブラリ いろんなものが有る

PureJS と Native実装両方

react-navigation

2017初頭に登場 4月末に1.0.0betaをリリース

pureJS - ネイティブの気持ちを考えなくて良い - JSが分かれば自前でどうにかできる

例)examples/NavigationPlayground

良いデモ!!

クラスと実装

  • Routerクラス
    • TabRouter / StackRouter

内部状態ツリーを理解すると簡単

reduxやmobxではstateを管理する必要がある

Reduxの場合

公式ドキュメント()がある

MobXの場合

react-navigation-mobxサンプルがある

MobX

Hello, MobX? https://leader22.github—hogehoge

実アプリで乾燥

stateをどう扱うか意識できるところまで理解できると思った通り動くようになる タブとスタックの実装を考えることが重要

まとめ

素のRNならすんなり使える

PureJSは楽 ReduxやMobXの場合はコストが掛かる

  • まだ気楽に使える形では無い
  • 今後エコシステムの改善が見込まれる

※ MobXの選定基準 非同期処理の扱い方がfluxよりもシンプル Observable

ReactNativeで9個アプリを作って、1個リリースして、使ったおすすめツールを紹介 @mat_aki

SonicGarden CTO

Remoty

why ReactNative

少人数でおおきな成果 RailsでのWeb開発がベース learn once, write anywhere. webが中心でデータの参照が楽

使っておくべきツール・機能を紹介

どういうものを使ってるのかが、まだまだ

Webっぽいやつ

cmd + d

React Native Debuggeer

Reduxのステート コンポーネントの構造 デバッガがまとまっている

Firebase

Native SDKとのやり取りが簡単 - プッシュ通知 - アクセス解析 - エラー検知

CodePush

Storeの審査無しにアプリをバージョンアップできる JSの部分のみ変えることができる

Bugsnag

エラー検知サービス SourceMap に対応

React Native Router Flux

ナビゲーションコンポーネント

Redux

redux-persist redux-logger reduxsauce redux-saga ducks

Expo

Qiitaに記事あり

fastlane

pem PUSHの証明をコマンドで作る

Web開発者がReact Nativeで開発から運用までして辛かった事 @DotEarl

Toggetter

技術的な話はしない 辛かった話をする

ToggeterはReactNativeで作り直してリリース!

広告SDKの組み込み

Facebook広告を組み込みたい いい感じのパッケージが見つからない 結局じぶんで　Bridgeを書いた

JSだけでかけると言ってもネイティブ側のコードも必要な時がある

RN本体のアップグレード

react-native-git-update だいたい落ちる

本体のバージョンはこまめに追従しないとダメ ライブラリの作者がやめることもある

エラーはIssue検索すれば代替見つかる

アップグレードは気合

  • プッシュ通知
  • WebView

安定しなかったので自分たちで直した

嬉しいこと

  • Web感覚
  • 公開されてる機能でだいたいなんでもできる

まとめ

  • 難しいことするならネイティブは必要
  • バージョンアップはこまめに
  • モジュールの選定は重要

スポンサーLT

シューマツワーカー

CureApp

Mercari