React チームより幾つかのお知らせがあります！

1. 次のメジャーバージョンとなる React 18 リリースに向けての作業を開始しました。
2. コミュニティが React 18 の新機能を段階的に導入できるようにするため、ワーキンググループを作成しました。
3. ライブラリの作者が試用してフィードバックを送れるようにするため、React 18 のアルファ版を公開しました。

7/28時点での最新版

www.npmjs.com

React 18 alpha版発表まとめ

- アップグレードの簡単さ
- Concurrent Rendering
- Automatic Batching
- SSR と Suspense
- Concurrent Rendering 関係
- ReactDOM.render に対する変更
- StrictMode での useEffect の挙動の変化
- Built-in Suspense Cache

コメント
「前回に引き続き、React 18 の情報をキャッチアップしておきましょう」
「React 17は「新機能なし」を謳っていましたね、今回も引き続きアップグレードをしやすくする路線のようですね」
「早く追いつきたい！」

React Nativeでのエラーハンドリング

medium.com

ja.reactjs.org

error boundary は自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチし、エラーを記録し、クラッシュしたコンポーネントツリーの代わりにフォールバック用の UI を表示する React コンポーネントです。

static getDerivedStateFromError() か componentDidCatch() のいずれか（または両方）を使う。

コメント
「異常系の処理なので優先度は下がりがちだが、品質担保として大事なので取り組みたい」
「エラーハンドリングをしないと、真っ白な画面が表示されてしまうことを「死のホワイトスクリーン」と表現しているんですね」
「WindowsのBSOD(Blue Screen Of Death)をオマージュしたのかな」

Azure Notification HubsでReact Nativeを使用してサンプルを作成できるようになった

codezine.jp

devblogs.microsoft.com

コメント
「react-native-windowsといい、WindowsはけっこうReact Nativeを気に入ってますよね」
「Azure Notification Hubsというのは、プッシュ通知を送るためのクラウドサービスのよう。Firebase Cloud Messagingと近い」

azure.microsoft.com

AWS Amplify がフルスタック CI/CD 機能をローンチ

aws.amazon.com

AWS Amplify がフルスタック CI/CD 機能を新たにローンチ。
Amplify を使用して自動的にビルド・デプロイするが可能になった。
公式のブログなどに React Native の記述はないが、GitHub にワークショップのサンプルディレクトリがあった

github.com

コメント
「先日GitHub Actionsを導入したところですが、AWS Amplifyも試してみたいですね！」
「Amplify, 似たような名前でAmplitudeというクラッシュレポートライブラリがありますね。間違えないように注意。」

Re.Pack: Webpackベースのビルドツール

github.com

WebpackベースのReact Native用バンドル・ビルドを行うツール
Metroからの移行先候補
Webpack のエコシステムを使用できる
対象ユーザーとしてはWebpackを使い慣れているユーザー向け
比較
- Metroは、Webpackと比較してオーバーヘッドが少なくわずかに高速
- Webpackは詳細なオプションとエコシステムがあるためより詳細な設定ができる

github.com

コメント
「callstackはreact-native-testing-libraryも作っているところ」
「がっつり React & Webpack を触っていたフロントエンドエンジニアとしてはかなりとっつきやすいのではないでしょうか」
「馴染みある技術が使えるとWebからも入りやすいですね」

Expo 42

blog.expo.io

目玉機能

custom development clients: EASビルドとの組み合わせでExpo SDK外のライブラリも使えるようになった
EAS(Expo Application Services)ビルドとは
- Expoが提供するクラウドでビルドができるサービス
- Expo SDK全体ではなくプロジェクトにインストールされているネイティブライブラリのみをビルドするので従来よりサイズが少なく済む
- https://blog.expo.dev/eas-build-april-preview-update-ebd7dff9dd25
- 現在プレビュー中
Stripe の公式ライブラリをサポート
Android にて Hermesが実験的に使用できるようになった
custom development clientsについての補足

blog.expo.dev

コメント
「キッチハイクではreact-native-unimodulesを入れてExpoライブラリを使っていますね」
「Expoの開発スピード、ライブラリのサポートの速度は本当に速いよね」

React Native Expoを使用して、スクリーンショット機能を無効にする

セットアップ完了後、usePreventScreenCapture を App.js に記述するとスクリーンショットを無効にすることができる

ninza7.medium.com

コメント
「スクリーンショットを制御したい場面はありそうですが、気をつけないとUXを損ねることにはなりそう」
「以前にNetflixのスクリーンショットを取った時、真っ黒な画面になって撮影できなかったことがあるのですが近い実装なのですかね」
「現在iOS側はOS側の問題で使えないそうです...」
「ソースコードを見ると、iOS側では画面と同じサイズのCGFloatを作成して防ごうとしてますね。うまく動かないのかな。」

react-native-mapsのご紹介

react-native-mapsによるポケモンGOクローンの記事のご紹介

github.com

anlee914.medium.com

コメント
「react-native-mapsはキッチハイクでも使用していますね」
「昔はAIRMapというAirbnbがメンテナンスするライブラリだったけど、React Nativeコミュニティに移管されて現在はコミュニティがメンテナンスしてくれている」
「自分が知っているアプリをクローンしてみるというのはとても勉強になりそうですね！」