はじめに
キッチハイクのエンジニアメンバーで React Native の気になるニュースを持ち寄ってみました！
RN Features 初のリモート編集号です！
- はじめに
- クラッシュレポートライブラリ Bugsnag
- React Native Bubble Select
- React NativeでApp StateとEvent Listenerを使う
- React NativeでAndroid、iOS、Webを1つのプロジェクトで共存させてみた
- AsyncStorageでデータを保存するならデータ量よりもアクセス回数を気にしよう
- React カンファレンス、 React Summitがリモート開催
- Hermesがインストールサイズを120MB -> 18MBにした
- Expo SDK v37 が利用可能に
- さいごに
- We're Hiring
クラッシュレポートライブラリ Bugsnag
- キャッチコピー
- Effortless React Native crash reporting
- Comprehensive React Native error reports
- Production ready React Native error reporting
JavaScript、iOS、およびAndroidのスタックトレースをすべて1か所に表示。 https://www.bugsnag.com/platforms/react-native-error-reporting
Bugsnag 自体は昔からあって、検索すると Rails , JS , PHP で使っている記事が出てくる
Rails のエラー通知を fluentd 経由で Bugsnag に送る | feedforce Engineers' blog
- ドキュメント がしっかりしている
- オープンソース
- React Native サポートを打ち出している
- ダッシュボードなどの管理機能が強そう
Bugsnagダッシュボードでのエラー管理機能の特徴
- ルールを作って詳細にエラーを管理できる
- エラーのグルーピングやフィルタ機能
- エラーに担当者アサインやコメントできる
- Slack や GitHub などの外部サービスとの連携
- 監視ルールを設定できる（例: 一定時間内に何回発生するまで無視する）
コメント
「他の競合との違いがドキュメントにまとめられている」
「このドキュメントをみた人がすごいと感じるか、いやらしいと感じるか」
「Sentry との違いは気になるなぁ」
「Rails も React Native も一個のツールでみたい時がありますよね〜」
「CloudWatch Logs 並に設定できそう」
「クラッシュレポート専門でやってきている感がすごい」
「Sentry を個人的に使ってみたけど、導入は簡単でした」
「クラッシュレポートの選択肢が Sentry か Firebase だったけど、そこに Bugsnag が入ってきた」
React Native Bubble Select
使うシーンは思いつかないけど、楽しそう。
https://github.com/jesster2k10/react-native-bubble-select
コメント
「どこで使おうか迷いますね」
「前にも似たようなものが流行りましたね」
「今後 React Native でゲームを作るということがありそうですね」
「すでに jondot/awesome-react-native にあるかもしれないですよ」
「お〜」
「 React Native 数独というのがすであった」
React NativeでApp StateとEvent Listenerを使う
- Working with App State and Event Listeners in React Native
アプリが active, inactive, background になるのをトリガーにしたユースケースが Hooks ( useEffect() ) を使って解説されている。App State と Timer を使った実装も解説されている。
目次
- How to Use App State
- When AppState changes happen
- Notice how some apps blur their screens in app switcher?
- Using Refs with Event Listeners to Access True State Values
- What about getting current HTML / JSX element state within event listeners?
- How does this apply to AppState?
- Working with a Timer and AppState
- Defining the Timer class
- Wrapping Timer in a Context Provider
- Controlling a Timer with AppState
- In Summary
サマリーの意訳
イベントリスナーで最新の状態にアクセスする必要がある場合は、refを使用してそれらの特定の状態値を指すことができます。 DOM要素を参照する必要がある場合は、React.createRef APIとuseRef APIを一緒に使用して、同じ結果を得ることができます。
また、Timerクラスを介してクラスを操作する場合の使用例についても説明しました。ユーザーがアプリの外側（または内側）にとどまる時間を計測したり、アプリが非アクティブになったときに特定のアクティビティを一時停止したり、フォアグラウンドに戻ったときに再開したりできると便利です。
コメント
「Hooks を使った内容が書かれているので、勉強になりそう」
「実装パターンも紹介されていて、面白いかもしれないですね。」
「 アプリをバックグラウンドに移すときにぼかすとかの処理も行えるようだね」
React NativeでAndroid、iOS、Webを1つのプロジェクトで共存させてみた
Tutorial: How to share code between iOS, Android & Web using React Native, react-native-web and monorepo @brunolemos さん
- react-native-web を使えば React Native のコードをブラウザでレンダリングすることができる
- フォルダ構造を Monorepo にすることで、複数プロジェクトを1つのリポジトリで管理できるようにする
- Monorepo とは npmで管理する複数のpackageを、まとめて一つのgitリポジトリで管理すること？
- 引用: Monorepoについて
コメント
「ひとつのリポジトリで複数のプロジェクトを管理するのか」
「勉強会で話題になってたこともありますね」
「どこまで共通化するのがいいのは迷いどころですね〜」
「https://blog.nkzn.info/entry/2018/05/29/210030 の記事は参考になりそうですね」
「necolas/react-native-web 以外にも vincentriemer/react-native-dom というのもあるんですね」
AsyncStorageでデータを保存するならデータ量よりもアクセス回数を気にしよう
【AsyncStorageで実験】Object格納とKeyValue格納どっちが速いの？ @nitaking さん
- データを KeyValue で格納するのと Obejct で格納するのはどっちが早いのか
- （例）KeyValue: ユーザの名前と年齢を KeyValue でそれぞれ格納する
- （例）Object: ユーザの名前と年齢を含んだ Object を String にして格納する
- データが大きくてもアクセス回数減らしたほうが速い。
- データの入出力には時間がかかるので当然のような気もする <= 著者も書いている
- データの大きさに関する検証も必要そう <= 著者も書いている
コメント
「キッチハイクでは Object 格納をよくやっているけど、KeyValue 格納ってみんなどうやっているのだろう」
「公式ドキュメントを見ると KeyValue で格納するサンプルしかなかった気がする」
「Object で格納するというのを思いつかないかもね」
「ネイティブの実装に慣れていると KeyValue で格納したくなりそうです」
React カンファレンス、 React Summitがリモート開催
React Summit Remote Edition https://medium.com/@ReactAmsterdam/9-reasons-to-attend-react-summit-remote-edition-7ab5eafc1a0
- React Summitが日本時間の 4/17(金) 22:00 〜 26:00にリモートで開催される
- セッションを聞くだけなら無料
- フルアクセスチケットを買うと、質問ができたりする
- 個人的に気になっているセッション
- Scalable React Development for Large Projects
- Styles and Theming with Restyle in React Native
コメント
「ヨーロッパで開催されるカンファレンスを見つけました」
「セッションを聞くだけならリモートで無料参加できるらしいです〜」
「よくみつけたねw」
「@natural_clar さんのツイートを見るとよいかも！」
「海外の React Native の情報がキャッチできますよ〜」
「Microsoft が react-native-for-windows を作っている」
「 Styles and Theming with Restyle in React Native は Shopify のエンジニアによるセッションなんですね」
「 Shopify は React Native に意欲的」
Hermesがインストールサイズを120MB -> 18MBにした
Hermesがインストールサイズを120MB -> 18MBにした
- https://github.com/facebook/hermes/commit/284ae5e70d6bb2c7d98e859e74907c68ae6abae0
hermes-engineとhermes-engine-cliに分割hermes-engine: 本体hermes-engine-cli: 開発やテスト用に使うツールのバイナリ
- Hermes 0.5.0で反映される
コメント
「0.63.0 以降で React Native の本体に取り込まれるのかな？」
「Lean Core プロジェクトとして、今後も進んでいきそうですね」
「 Hermes の npm のサイズが小さくなったということですね」
「開発やテストように使うツールのサイズがかなり大きかったんですね」
Expo SDK v37 が利用可能に
Expo SDK 37 is now available - Exposition @esamelson さん
- 4月1日にExpo SDK v37.0.0 (内部はReact Native v0.61) がアナウンスされた
- SDK のリリース時期が予期できるよう、4半期に一度のリリースになる予定
- ExpoKit が非推奨に、Bare Workflow が推奨に
- Bare workflow が
Updates,SplashScreen,Notificationsをサポートし、ExpoKit を完全に置き換える - SDK 38 がExpoKit の最終アップデートとなる
- (補足) Expo でeject する際、
BareとExpoKitという選択肢があった
- Bare workflow が
- Managed workflow でFirebase Analytics が利用可能に
- Firebase Authentication の電話番号認証のためのreCAPTCHA 実装のパッケージを追加 (
expo-firebase-recaptcha) - Expo Web の機能追加・改善
- Apple により非推奨となっているUIWebView の削除
- AR モジュールが非推奨に
コメント
「バンドルされている React Native のバージョンが 0.61 系になっていて割と新しい」
「ようやく待望の Firebase を使った分析ができるようになるようです！」
「たしかに待っていた人は多そうですね〜」
「 AR モジュールがあったんですねw」
「Expo をやめたくなった後の選択肢が増えそうで、いいですね〜」
「Expo を使う人と使わない人の垣根がなくなりつつあるような雰囲気」
さいごに
これからも社内で持ち寄った技術ネタを共有します！
We're Hiring
キッチハイクでは、React Native アプリエンジニアを募集中です！
