はじめに
キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！
- はじめに
- React v17.0 リリース 新機能「なし」
- Facebook風なアプリ起動時のプレースホルダーをReact Nativeで
- Skeleton UI がかっこいい
- Reanimated 2 を使用したインタラクティブUI
- Node.js v15, npm v7 リリース
- Google Chrome Labsの提供する ブラウザ用の便利な React hooks
- React Native 速度改善
- リクルートのWeb開発者によるReact Native 開発運用の事例
- さいごに
- We're Hiring
React v17.0 リリース 新機能「なし」
- 新機能は「なし」。今後のReactのバージョンアップをしやすくする「踏み台」となるリリースという位置付け。英語では “stepping stone” release という表現。
- アップグレード方式を “All or Nothing” 型から "Gradual Upgrades" 型へ
- React 18 やもっと将来のバージョンが来たとき、アップグレードの選択肢が増える。アプリ全体を一度にアップグレードするだけではなく、一部分ずつアップグレードすることが可能になる。
大きな変更点はイベントデリゲーションに関するもの
React 17 で イベントハンドラのアタッチ先を document レベルから React ツリーのルート DOM コンテナに変更された。
ツリー内に別バージョンの React で管理されているツリーを埋め込むことが、より安全に行えるようになる。
React 17 での破壊的変更は最小限に
非推奨化されたメソッドの削除はなし。比較的安全だった破壊的変更が少数行われた。
- ブラウザとの整合性向上
- イベントプーリングの廃止
- 副作用クリーンアップ関数が常に非同期的に実行
undefinedを返した場合の一貫性のあるエラー- ネイティブのコンポーネントスタック生成によりスタックトレースの利便性が向上
- プライベートなエクスポートの削除
React Native でのサポート
React Native 0.65 で React 17 をサポートして欲しいが、まだ 0.65 のリリースディスカッションが始まっていないので正確なバージョンはまだ未定。 https://github.com/react-native-community/releases/issues をウォッチするとディスカッションが追える。
コメント
「かなり大規模にReactを使っているプロジェクトに嬉しい変更ですね」
「公式ブログの中に "10万を超えるコンポーネント" でテストをした風に書いてあったけど、Facebook内部のことだろうか」
「これから0.64や0.65のリリースディスカッションには入るのかな」
「Gradual Updateっていうと、react-native-firebase も v7からは機能ごとに分割して個別でバージョンアップできるように変更していましたね」
「React 公式ブログの図がわかりやすいです」
Facebook風なアプリ起動時のプレースホルダーをReact Nativeで
上記記事より引用
コメント
「これはみんなやりたいやつですね！」
「Appleのガイドラインで、起動時にアプリのメインコンテンツにスムーズに繋がるように指示する内容が出てましたね」
「その対応で使えそう」
Skeleton UI がかっこいい
以前TwitterでExpoが以下のリツイートをしていた
Pretty https://t.co/e06wLz6Jal
— Expo (@expo) 2020年9月6日
最近YouTubeで似たようなUIを作成するチュートリアルが投稿されていたのを発見
コメント
「Skeleton UI や Skeleton Screen って呼ばれているみたいですね」
「上の記事だとライブラリだったけど、こっちはチュートリアルで実際に実装できるのか」
「WebのFacebookでも、このUIが使用されていますね」
「YouTubeも一時期からSkeleton UIになりましたよね〜」
Reanimated 2 を使用したインタラクティブUI
- Reanimated 2 の主にジェスチャーに対応する Event API について説明されている記事
- イラストも共にコードも共有されているでの、何ができるのかが非常にわかりやすい
コメント
「Reanimated 2は、react-nativeのアニメーション基盤ライブラリ」
「現在開発中で、アルファ版が公開されてます」
「具体例がGifとコードのセットで記載されていて参考になりますね」
Node.js v15, npm v7 リリース
- 新しくリリースされたNode.js v15 ではnpm v7が使用される
- npmの変更としては
peer dependencyを自動でインストールするように - Node v14が10月後半にLTS (
Long-term support, 長期リリース版) に昇格
Node.js のバージョニングについて
- Node.js は奇数番号は短期サポート、偶数番号は長期サポート
- リリース後6ヶ月は最新版でサポートされるが、6ヶ月後に奇数番号のリリースバージョンはサポートされなくなる
- 偶数番号のリリースバージョンは合計30ヶ月サポートされる
- そのため製品版アプリではActive LTS または Maintenance LTSのNodeを使用すべき
コメント
「NodeのLTSバージョンの決め方はJavaやUbuntuとは違うんだね」
「奇数版と偶数版で分けるのは他でも見たことあります、NginxやMongoDBでもそうですね」
Google Chrome Labsの提供する ブラウザ用の便利な React hooks
- Navigator APIからデバイスのさまざまな値を取得するユーティリティHooks
- ネットワークの回線速度ステータス取得
- メモリ、CPUの量の判定
- etc
コメント
「ブラウザ用なのでreact-nativeの文脈ではないですが、ブラウザから回線速度などを取得するHooks集です」
「クライアント側の回線速度やメモリ、CPUのコア数で動画の画質を変更するデモがあるね」
「Hookはモジュールとして切り出せるから、ライブラリ化して提供するのにもってこいの概念」
React Native 速度改善
useCallbackと、useMemoちゃんと使ったらめちゃくちゃ早くなった。render回数が減るとそのぶん速度圧倒的に変わる。
— 佐藤大生/Sato Daiki Interchao (@daiyanyanyan) 2020年10月16日
- 第5回 React Native Tech Blog LTの和田さんの資料
- レンダリングの回数を減らす方法は、Webで使ってるReactにも応用できる
コメント
「React Native Tech Blog LT から持ってきました」
「以前Expo座談会で来ていただいた和田さんの発表ですね！」
「関数のメモ化や更新対象のコンポーネントを減らすことがインパクトが大きかったらしい」
「実況とかのアプリはコメントによってコンポーネントがどんどん増えていくので、パフォーマンス問題が深刻になるんですかね」
「ちゃんとレンダリングが制御できているかを確認する必要がありますね」
リクルートのWeb開発者によるReact Native 開発運用の事例
- Web 版のAPIを再利用するため、Client Adapter Pattern を参考にBFF (Backends For Frontends) アーキテクチャを採用
- Web 版での開発スタイルを展開してノウハウが活用できるようにアプリにStorybook を導入
- TypeScript は活用事例をためるためアプリから導入
- 運用面ではApp Center, Sentry を導入
コメント
「Netflixの事例だと、デバイスの種類がとんでもなくあるのでClient Adapter Patternを使っているらしいですね」
「開発ライブラリの活用事例を横展開できるのはいいですね！」
「ライブラリもだし、開発スタイルも揃えられているいい事例」
「App CenterにもクラッシュレポートはあるけどSentryを使っているのか、JavaScript層のエラーはSentryで確認しているのかもね」
さいごに
これからも社内で持ち寄った技術ネタを共有します！
We're Hiring
キッチハイクでは、React Native アプリエンジニアを募集中です！
