はじめに
キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！
- はじめに
- React Native Japanコミュニティの1ヶ月
- React Native 公式ブログより8月3つの記事が公開
- React Navigation v6.0 リリース
- Ｆ＆ＰジャパンがReact Nativeアプリをリリース
- レンダーがビジュアルでわかる記事
- 開発用アプリ、プロダクションアプリで異なる環境変数を管理
- Recoil 0.4 release
- React Native EU 2021
- Apple が iOSアプリ外での決済方法を提供
- date-fns のご紹介
- react-native-search-header のご紹介
- さいごに
- We're Hiring
- 技術書典 11に共著で出展しました！キッチハイクアプリの事例も掲載されています。 React Nativeに支えられる企業
React Native Japanコミュニティの1ヶ月
- stand.fm での放送
- 8/26 React Native Meetup #13 LT大会! が開催されました！
- React Native Matsuri 2021が10/02にオンライン開催されます！
- 弊社CTOの @shoken0x もLTにて登壇します
コメント
「れんさんは技術書展でも共著されていた人ですよね」
「BeatFitのエンジニアなんですね」
「React Native Matsuri も近づいてきていますね！」
「お祭りノベルティーBox付きチケットを予約しました！Tシャツが楽しみです〜！」
React Native 公式ブログより8月3つの記事が公開
8/17 React Native 0.65 のアナウンス
- Hermesの新しいバージョン v0.8.1にアップグレードされました。
- 新しいコンカレントガベージコレクタ "Hades". 一時停止時間を最大30倍短縮
- ECMAScript Internationalization API (ECMA-402, Intl)がAndroidのHermesに組み込まれ、デフォルトで有効に
- iOSのHermesはApple M1 MacとMac Catalystをサポート
- SMI (Small Integers) やポインタ圧縮を含むメモリの改善により、JSのヒープを30%縮小
- Function.prototype.toStringの変更
- アクセシビリティに関する修正・追加が行われました。
- iOSでハイコントラストな明暗の値を指定できるように
- AndroidにgetRecommendedTimeoutMillis APIを追加
- TalkBack/VoiceOverのUI状態に関する修正
- ライブラリのDependency Version のアップデートが行われました。
コメント
「ついに0.65ですね！はやくバージョンアップしたい！」
「キッチハイクアプリは0.64.2で、iOS/Android共にHermesが有効になっているのでどちらもパフォーマンス向上が期待されますね！」
「Hadesとはギリシャ神話の死者の神で、Hermesは神々の使者だそうです」
「半熟英雄に出てきたな〜」
8/19 React Native の2021年下半期
- コミュニティの育成
- ビジョンと状況の共有を行い、より安定したスケジュールにする
- 新しいアーキテクチャのオープンソースへの展開の開始
- 上半期に、FacebookアプリのすべてのReact Nativeモバイル製品へ新しいReact Nativeアーキテクチャを展開した
- 下半期ではOSSコミュニティに展開していく
- リリースプロセス、リポジトリの健全性の向上
- 技術の推進
- Oculusと提携し、VR方面への展開
コメント
「Facebook、VR会議室のアプリもベータ版でリリースしているのでVR事業に力を入れているみたいですね」
「ザッカーバーグは、6月のテックカンファレンスでもVR・ARの未来について登壇していたそうです」
8/26 React Native's Many Platform Vision
- React Nativeのリーチをモバイル以外にも広げるため、すでにFacebookのデスクトップやVRチームと提携してスタートしている。
- 各プラットフォームの制約を受け入れ、制度的な知識から学び、他のプレイヤーからインスピレーションを集める。
- そうすることで、エコシステムのすべてのプラットフォームに利益をもたらす。
- 最も重要なことは、そうすることで、React Native の指針に忠実でいられる。
コメント
「VRとの連携というのはびっくりしますね！」
「"各プラットフォームの制約を受け入れる"というのは、よりネイティブエンジニアの意見を吸収していくということだと解釈しました」
「RelayはGraphQLのクライアントで、Javascriptフレームワークなのですね」
「RelayもGraphQLもFacebookが開発しています」
「VRもGraphQLも気になります！」
「いま自分が使用している言語でモバイルアプリじゃないものまで作れると思うと、よりReact Nativeへのありがたみや愛情が湧きますね」
React Navigation v6.0 リリース
コメント
「キッチハイクは4系を使っているので早く上げたいです」
「一度調べたのですが、5系に上げるのが大変みたいです。時間を見つけてアップグレードしたいですね」
Ｆ＆ＰジャパンがReact Nativeアプリをリリース
コメント
「新しいアプリでもReact Nativeが選択肢になっていて素晴らしいですね！」
レンダーがビジュアルでわかる記事
コメント
「React.memo()を適切に使うことで不要なレンダリングを防げるということが視覚的にわかりやすい記事ですね！」
「パフォーマンス改善のときに使えそうですね！」
開発用アプリ、プロダクションアプリで異なる環境変数を管理
コメント
「キッチハイクも react-native-config を最近入れましたね。」
「今まで__DEV__で判定していたのですが、導入したことで条件分がなくなって見通しが良くなりました。」
「デバッグビルドとリリースビルドで参照する値が異なる変数を一覧で確認できるようになったのも嬉しかったです」
「最近セキュリティ周りでも環境変数に触れることが多いのでキャッチアップしておきます」
Recoil 0.4 release
Configurable selector caches
- selector が値を cache できるようになった
- これにより膨大な数の selector をもつアプリケーションにおいて、メモリ使用量を減らすことができるようになった。
- Recoil の実用性がより高くなったのではないかと思う。
- キャッシュ方式も3つから選べるとのこと。
- lru: キャッシュサイズが maxSize で指定したサイズを超過した場合、もっとも古い値・依存関係をキャッシュから削除する
- keep-all(default): 全ての値・依存関係をキャッシュする
- most-recent: 最近保存した値・依存関係だけをキャッシュする
Transactions with multiple atoms
- ひとつのトランザクションで複数の atom を更新する機能が改良された。
- 従来は useRecoilCallback を使用してスナップショットにアクセスするという方法で行っていた。
- しかし、スナップショットの作成にはオーバーヘッドがあるため、作成完了前の値を読み混んでしまって、意図しない不具合が発生するという欠点があった。
- useRecoilTransaction_UNSTABLE は、スナップショットから値を読み込まないので、これまでよりも簡単で、より効率的で、より安全に使用できる。
コメント
「useRecoilTransaction_UNSTABLE, まだ実験的な機能なのですね。ゆくゆくはUNSTABLEが取れるのかな」
「Figmaのようなコンポーネントが非常に多いWebアプリがターゲットみたいですね」
「大規模なWebアプリでも使えるよう、徐々にアップデートしているということですかね」
「0.2.0のリリース時にも、RN Featuresで取り上げてました」
React Native EU 2021
- React Nativeのみに焦点を当てたヨーロッパ初のコミュニティカンファレンス
- 今回で第5回目、オンライン開催は2回目
- 2021/9/1(水), 9/2(木) 日本時間 22:00から
- スピーカーはFacebook, Microsoft, Stripeなどの大企業からフリーランスまでさまざま
選者の特に気になるセッション
- IMPROVE ALL THE REPOS – exploring Microsoft’s DevExp
- Going 100% TDD with React Native Testing Library
コメント
「海外のカンファレンスで時差がありますが、最初の方は聴けそうですね！」
「去年 @Naturalclar さんが登壇されていたカンファレンスですね」
Apple が iOSアプリ外での決済方法を提供
- App Store小規模開発者に対する支援の文脈
- アプリ内課金回避可能を明文化
- 顧客の連絡方法(電子メールアドレス)収集が可能になった
- 顧客に直接連絡し、Appleへの決済手数料がかからないかたちでの決済が可能になった
- ほか手数料の引き下げの継続、アプリ内決済の支払い形態をより柔軟な形に変更など全7項目
コメント
「今後、大規模開発者がアプリ内課金回避の方向に動きそうですね」
「Epic Gamesとの抗争もありましたもんね」
date-fns のご紹介
- 日付操作を簡単にしてくれるライブラリ
- スポンサー企業が、1Passwordを初めたくさんいる
コメント
「YouTubeのクローンを作る記事で紹介されていたライブラリです」
「It's like Lodash for datesというのがわかりやすいですね！」
「これは豆知識ですが、Lodash.jsはUnderscore.jsから分離したライブラリですね」
react-native-search-header のご紹介
- マテリアルデザインパターンに基づいた、使いやすいReact Nativeの検索ヘッダーコンポーネント
- マテリアルデザインパターンに基づいていることもあり、汎用性は高そう
- 検索ヘッダーを使用するには、ファクトリ関数（１つのオブジェクトを返す関数）をインポートしてレンダリング可能なコンポーネントを作成するだけでできる
コメント
「確かに、汎用性がかなり高そうなライブラリですね！」
「リポジトリの更新が2019年で止まっていますね」
「他の検索ボックスのライブラリだとこういうのも見つけました」
さいごに
これからも社内で持ち寄った技術ネタを共有します！
We're Hiring
キッチハイクでは、React Native アプリエンジニアを募集中です！
