ログインのすべて

React Native Tech Blogの運営

ログイン

実装が大変、いきなり挫折しがち

実装方法

バックエンド言語＋フレームワーク

メールアドレスログイン

匿名ログイン

電話番号ログイン

captcha.htmlの用意

DEPLOY

実装

Facebookログイン

expo-facebook が用意している

Googleログイン

expo-google-app-auth を用意している

How I became part of React Native Community

React Nativeコミュニティに入ったきっかけ

NodeJSコラボレーターが退職した

自分もメインコントリビューターになってみたい

React Nativeが得意だったのでそれに尽力してみたい

問題

good first issue

肥大化している

コアパッケージとして機能を切り出していく

Issueで切ったは良いけど着手されていないコンポーネントが合った

そこにコントリビュートしてみようと思った

Add LeanCore Extracted Badge to README

eslint, prettierを付け加えていった

バージョンでのdiffを取れるような機能

メンテをする

Facebookの中の人に連携を取っていった

リリースする権限ももらえた

React Native自体はFacebook

React Nativeコミュニティは別の企業などでも運営

特典

コントリビューターのDiscordチャンネルに入れてもらえる

React Nativeの最新機能について追える

リリースプロセス

ペアプロでやる

rc2リリースのときに pdxproj がxcodeのディレクトリでコンフリクトしていた

Facebookの中の人が助けてくれた

SnapmartにおけるCameraRollから写真の複数枚アップロードの実装

取締役CTO

仕様の紹介

カメラロールから複数選択・アップロードする

BottomNavigation の出品アイコンでスクリーン表示

カメラロール内の以下の項目を取得

最近の項目

お気に入り

存在するアルバムすべて

フォルダ選択画面ですべての写真

降順表示

複数洗濯、アップロード

試してみたこと・問題点

アルバム選択画面を削って1万件にした

機能縮小で既存ユーザーが混乱

カメラロールに1万件以上保存しているユーザー

問い合わせが増えて

アップロード率低下

10万件にした

ソートすると画面が真っ白

CPUリソースが増える

端末が熱くなる

ImagePickerを使う

写真の複数選択ができなかった

実装したこと

アルバム選択機能を実装

アルバムだけ抽出するAPIはない

10万件の写真をループしてアルバム名を取得してキャッシュに乗せる

CameraRollでがんばる

写真をぶん回す

ソートはできないが group_name の指定ができる

写真の表示速度が高速化されてるっぽく見える

「最近の項目」選択するとまだ処理は重い

〇〇〇でExpoを死守！

Expoで開発したい

メリット

JSで完結

ホットリロード

アプデの際のapp storeを通さずに済む

リソースの少ないチームの味方

高度の機能のためには脱Expoの危機

動画比較機能

expo-avのライブラリが一部破損

動画キャプチャへの書き込み

React Nativeの Canvas が不安定

react-native-cliからExpoへ移行できない

どう死守したか

WebView をフル活用した

URLパラメタで動画ソースを指定

WebViewとのやりとり

WebViewを埋め込んだページ

画面表示

動画のロード開始・終了

動画の画面サイズ取得

WebViewの大きさ変更

ドラッグ開始して終了するまで信号でスクロールしないようにする

メリット

Web技術を利用できる

Webとコードの共通化

デメリット

コードの煩雑化

ネイティブ機能が使えない

Android動画

開発しづらい

キャッシュなど

ページ表示速度が遅くなる

Gatsbyなのでまだマシだが

SSRするものだと遅くなりそう

効きそうな所

静的ページ

動画系

Canvas

3D

高度なアニメーション

グラフ

React Nativeの Native Module の作り方

React Native向けのSDKプラグインを公開した

Native Module

React Nativeは多くのネイティブの機能が利用できる

例：アラート Alert.alert'(...)

標準でないネイティブの機能を利用したい

同じ用にJSから利用できるようにしたい

CLIツール

オススメは create-react-native-module

bob はLinterやFormatterの初期設定がある

Auto Linking

0.60 より導入された

react-native config で得られるProjectのメタ情報を利用してLinkする

デフォルトのconfigに一致

*.podspec がProject直下にある

変更する場合は react-native.config.js

Tips

importでパスが確認できずエラー

example/ios/example.xcworkspace を開く

pop install してから

Sync modules

ios/ や android/ を変更して毎回yarn installする

対象のコードのみ差し替える

node_modules を直接更新するスクリプト

パネルディスカッション

どうやって学んだ？勉強してる？

Udemyで勉強

ソースコードをちゃんと見る

書籍でReact.jsから勉強する、そこからReact Native

作りたいものを作りながらやっていく

本人の出来もあるが、別言語経験があれば2〜3ヶ月くらいで習得できそう

旅のアプリの有料note買って学んだ

チュートリアルを見る

モバイルの知識をつける

トラブルシューティングにつよくなる

React Nativeは実際どう？現場レベルでどう？

良いと思う

Shopifyも移行

Microsoftも好印象

Expoじゃないとビルド大変そうだったが

0.60 より改善された

ここからやるには良いのでは？

速度改善

ネイティブを知らない、少ないチームであれば良さそう

swiftとか分かる人がいればそっちでもいい

できないことはまずない

脱却しなくてもよさそう

非エンジニア側の理解が必要

一旦リリースしてみようの精神

「本当に」かゆいところに手が届かない

canvas、動画まわり

SNSのシェアボタン

カレンダー、DatePickerはつらい

react-native-gesture-hundler などでスワイプ周りは改善した

エンジニアが大きくなったら離れても良い？

10人〜とか？

JSerばっかりならいいんじゃないのかな（CureApp）

モバイルのコアな機能を使う場合は無理しない・テストする

写真

動画

パフォーマンス的にシビアなところ

センサー

ユーザー行動計測について

Expoだと一択

React Nativeエンジニア採用できるか

なかなか見つからない

React.jsができる、JavaScriptができる人

なにかしらの言語を知っていればOK

Webの方も触っていてほしい

設計はガッツリ触っている人がほしい

外部顧問？

まだ成熟していないのでforkを切って自分たちでなんとか育てる気概が必要

Flutterとの比較

出たばっかなので比較しづらい

メリット

JSなのでそのアーキテクチャを流用できる

FlutterはDartを学ばないといけない

JSやってなかったらいいのではないか