KitchHike Tech Blog

KitchHike Product, Design and Engineering Teams

RN Features 2021年4月号 - React Native製のプリンター制御SDK, Recoil 0.2.0 リリース, Sentryでパフォーマンス計測

はじめに

キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました!

React Native Japanコミュニティの近況

React Nativeアプリ 7つのベストプラクティス

javascript.plainenglish.io

7 Best Practices for React Native Applications

  1. Use a Design System : 一貫性のあるスタイリングルールと原則のセット
  2. Responsive Style Properties : 画面サイズの違うデバイスに対応するため
  3. Use TypeScript : 型チェックだけではなく、エディタの自動補完による恩恵も享受できる
  4. Static Image Resources : Imageの定義元は静的に定義する
  5. Use Platform Specific Styles : iOS / Android で適切なスタイルを使い分ける
  6. Create Aliases : babel-plugin-module-resolver パスをシンプルに
  7. Always Assign Unique Key to Each Element : Listコンポーネントなどに一意になる key を入れる

コメント
「Infinite Red社が運営しているReact Nativeのメーリングリストで紹介されていた記事」
「4番目については、公式ドキュメントにも書いてありました」
「過去のニュースレターも閲覧できるんですね!」

reactnative.cc

Sentryでパフォーマンス計測ができるようになった

blog.sentry.io

Trace, Transaction, Spanで計測

https://docs.sentry.io/static/8c84b017d72f40e2d14a2c070d906a4e/c1b63/diagram-transaction-example.png

Trace : 測定や追跡を行いたい操作全体の記録
Transaction : トレース内で呼び出されるサービスによる処理
Span : サービス内の関数を呼び出しや、別のサービス呼び出し

記事内ではPromiseをラップする関数を実装し、TransactionやSpanで計測するサンプルコードが紹介されています。

コメント
「コードサンプルは結構凝っていますね、とりあえず入れたら計測できるという感じではなさそう」
「ドキュメントを読んで、少なくともTrace, Transaction, Spanを理解しておく必要がありそうでした」
「ある程度調べたい箇所が検討ついてて、深掘りしたい時に使えそうですね」

Recoil 0.2.0 Release

recoiljs.org

Better Async Selectors

Selectors を再実装して、これまで対応できなかった以下のようなケースにも対応したとのこと

  • Selectors can now add dependencies at any point in their async execution.
  • Selectors now start over if their dependencies change while they're awaiting something.
  • Diamond dependency patterns now re-execute only the necessary selectors.
  • Recoil で async selectors を使用する際に、正しくない動作をする可能性が低くなったらしい

Scaling to Large Numbers of Atoms

  • パフォーマンスが改善した
  • Atom が 10,000 個以上あった場合、数百倍も速度が早くなったとのこと

Breaking Changes

  • waitForAny の挙動が変わった
  • 今までは引数に渡した処理がエラーを返すとエラーになっていた
  • 0.2.0 から waitForNone と同様にそれぞれに引数に対応した Loadable が返るようになった
  • 実装してみて理解できたので、参考にでもどうぞ↓

codesandbox.io

Logo

  • ようやく Recoil にもロゴができました
  • 個人的に気になっていたので、ちょっと嬉しかった

f:id:yamataku3831:20210414184719p:plain

コメント
「細かいエラーハンドリングができるようになったということですかね」
「Atom が 10,000 個以上ってかなり大規模なWebやアプリだけど、YouTubeにある公式の紹介動画をみるとFigmaのようなアプリケーションを想定しているみたい」
「Zennって確かRecoilを使っているんでしたっけ」

zenn.dev

Reactのベストプラクティスの提案をまとめた記事、Tao of React

alexkondov.com

全部だと長いので自分が気になったところをとってきました

  • 基礎的だけど大事なアドバイス
    • Function Component, Hooksを積極的に使うこと
    • ライブラリはラップして使用する
    • 絶対パスを使用する
  • <ErrorBoundary> コンポーネントを使う
    • 自身の子コンポーネントで発生した JavaScript エラーをキャッチ
    • クラッシュしたコンポーネントツリーの代わりにフォールバック用の UI を表示できる
    • 配下のツリー全体のレンダリング中、ライフサイクルメソッド内、およびコンストラクタ内で発生したエラーをキャッチできる

ja.reactjs.org

所感

  • シンプルさは正義
  • React, React Nativeはベストプラクティスが完全には固まっていないのでこういう記事はありがたい
  • 意見を表明することは議論にもつながる
  • React Native Japan でもディスカッションとかしたいですね

コメント
<ErrorBoundary> コンポーネントは使ったことないので勉強になった」
react-native-error-boundaryというライブラリもありました」
「ErrorBoundary, 一応Rootコンポーネントに配置して使ってました (エラーキャッチしたらexpo-updatesUpdates.reloadAsync()で再起動的な実装してました」
「Reactのベストプラクティス、2年前と今ではベストプラクティスが全然違うだろうし定期的にアップデートの必要がありますね」
「HooksのようなGame Changerも登場したしね」

www.npmjs.com

スター精密(株)がプリンター制御用SDKをRN向けに提供開始

www.nikkei.com

  • スター精密株式会社は東証一部上場企業で工作機械などのメーカー
  • React Nativeに対応したソフトウェア開発キット『StarXpand SDK for React Native』を、レシートプリンター業界において初めて作成した
  • SDKはGitHub上で公開されている

github.com

所感

  • ネイティブ開発でよくあるデリゲートプロトコルをJS (TS)で実装しているなど、SDKのコードを読んでみると興味深そう
  • JS層はネイティブの関数・メソッドを叩くラッパーに徹する、という設計だろうか

github.com

コメント
「アプリからプリンタを操作したりプリンタの情報を見たりできるということですね」
「モバイルPOS市場やフードデリバリー市場の動きを見ているのでUber Eatsなどの動きを見ている」
「クラッシュした時にエラーハンドリングしてエラー画面をプリンタで出力できそう」
「位置情報と連動して、ある座標に到達したら宝の地図が印刷されるとかできますね」

今月の React Native ライブラリ紹介

blog.bitsrc.io

React Native Hold Menu

明日から使えそうなライブラリ

enesozturk.github.io

f:id:yamataku3831:20210414183002g:plain

コメント
「iOSでテキストなどを長押ししたときに出てくるメニューのライブラリですね」
「Androidで似たような機能はあるのだろうか」
「React Native Reanimated v2 と Typescriptで書かれているんですね!しかもexpoで使えるのか」 「モダンなライブラリですね」
「独自実装しているっぽいのでiOS 13以前でも使えそうですね(ネイティブだとiOS 14で実装されたアクションですね)」

react-native-paper

  • マテリアルデザイン標準のコンポーネントを提供するオープンソースライブラリ
  • クロスプラットフォームであり、完全なテーマサポートが可能
  • デフォルトのテーマにはダークテーマもあり、2つのテーマをシームレスに切り替えることができる
  • テーマをカスタマイズした場合は、ReactNativeのAppearanceAPI を使用して、デバイスの設定に応じてテーマの切り替えを実装できる

reactnative.dev github.com

  • React Nativeのスワイパー、カルーセルコンポーネントであり、プレビュー、複数のレイアウト、視差画像、かなりの数のアイテムのパフォーマンス処理などを備えている
  • AndroidとiOSの両方に対応している
  • ライブラリは十分に文書化されており、パフォーマンスの最適化やその他の多くの機能に関するヒントやコツが含まれている

github.com

コメント
「どちらのライブラリもREADMEが充実していていいですね」
react-native-snap-carousel, 前に使っていました!」

さいごに

これからも社内で持ち寄った技術ネタを共有します!

We're Hiring

キッチハイクでは、React Native アプリエンジニアを募集中です!

www.wantedly.com www.wantedly.com www.wantedly.com