KitchHike Tech Blog

KitchHike Product, Design and Engineering Teams

RN Features 2021年10月号 - React Native Matsuri 2021、React Native 0.66 リリースアナウンス、大きなプロジェクトでTypeScript化を進めるための8つのtips

はじめに

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

技術書典 11に共著で出展しました!キッチハイクアプリの事例も掲載されています。

React Nativeに支えられる企業

f:id:yamataku3831:20210728190522p:plain

React Native Japanコミュニティの1ヶ月

speakerdeck.com

React Native Matsuri 2021のまとめ記事

zenn.dev

www.youtube.com

コメント

「React Native Matsuri, すごく盛り上がりましたね!」
「リアクトネイチュウって考えたの誰なんだろう」
「USメルカリのような大きな会社がReact Nativeを使っているというのはすごく心強く思いました!」
「個人開発の方の発表で、自分たちと同じライブラリを使って素晴らしいアプリを作られていることがとても印象に残りました」
「当日参加できなかった方のために、Youtubeに配信のアーカイブがあります!」

React Native 0.66 リリースアナウンス

公式ブログより

reactnative.dev

ハイライト

  • Androidで親ビューの境界の外にレンダリングされた要素のタップをハンドルする
  • Androidにおける新しいBluetoothパーミッション
  • Apple Silicon、Xcode 13、iOS 15のサポート強化
  • Hermes 0.9.0
  • Nightly と Commitly リリース

一番上の「Androidで親ビューの境界の外にレンダリングされた要素のタップをハンドルする」についてはPRにgifが貼ってありました。

github.com

before after
https://user-images.githubusercontent.com/2937410/83610933-19079b00-a535-11ea-8add-22daae0191e1.gif https://user-images.githubusercontent.com/2937410/83610583-8830bf80-a534-11ea-97e2-71e180a70343.gif

Nightlyリリース

Nightlyリリースは nightlyタグでnpmに公開され、yarn upgrade react-native@nightly で使用できる。

f:id:yamataku3831:20211020185637p:plain

www.npmjs.com

www.npmjs.com

Commitlyリリース

React NativeはCIで、メインブランチとリリースブランチの各コミット、各PRに対してcommitliesを作成する。これらのcommitliesはnpmには公開されないが、CircleCIから直接ダウンロードすることができる。

https://d33wubrfki0l68.cloudfront.net/1d561890841024c9b3e3012814f577c50c77b6ce/d80dd/blog/assets/0.66-artifact.png

CircleCi ダッシュボード

コメント

「Androidの親ビューの件は、iOSでは元々できていたものなので今回で統一されたようです」
「Nightly リリースはFirefoxなどでもありましたね」
「Commitly リリースという概念は新しいですね...!」
「GitHubのReact Nativeリポジトリにある.circleciディレクトリに、Docker環境でのテストビルドコマンドが記載されているのでCommitlyリリースを手元でビルドしてみることもできますね」
「CircleCI上で、React Native内のテストアプリrn-testerが動いているんですね。E2EテストにはDetoxを使っています」

Shopify の複数アプリ間でのコード再利用について

shopify.engineering

  • Shopify は、多くのアプリを React Native で開発している
  • 基礎的なコードをモノレポで管理すること、複数アプリでコードを再利用している
  • パッケージやリポジトリのメンテナンスコストを削減
    • 全パッケージ・リポジトリで React Native のバージョンを統一している
    • TypeScript、Jest、ESLintなどの設定をルートレベルに抽出し、パッケージ全体で一貫させている
    • CIパイプラインは自動で生成されるので、全てのパッケージで標準化されている
    • 自動生成ドキュメントで書き忘れを防ぎ、どんな人でもスムーズに開発できる状態を維持している

コメント

「ひとつのモノレポから多くのアプリでコードを再利用しているということは、モノレポはアプリでありUIフレームワークみたいなものなのですかね」
「開発体験はExpoに近くなるかもですね」
「モノレポをアップグレードする際の影響範囲はかなり大きそう」

Expo 43 beta

blog.expo.dev

  • iOS 15サポート開始、iOS11のサポート終了
  • iOSにてHermesの実験的サポート(EASビルドなどの一部環境でのみ)
  • EASビルド、bare projectではXcode 13が必要になる
  • React Native 0.64.2, React 17を使用
  • expo-payments-stripe が削除、@stripe/stripe-react-nativeを使用するように

コメント

「Androidのビルドでエラーが発生するおそれがあるようなのでその点は注意とのことです」
「プロダクト開発ではExpoを使っていないので今度個人でなにか作ってみようと思います!」

大きなプロジェクトでTypeScript化を進めるための8つのtips

www.wix.engineering

  1. ハイブリッドJS / TSプロジェクト(徐々にTS化を進める)
  2. anyを許容する
  3. 型を再利用できる箇所を探す
  4. 正規表現やツールを使って一括リファクタリング(記事ではairbnb / ts-migrateが紹介されていた)
  5. 優先順位付け(Wixのケースだと、ライブラリなのでAPI部分を最優先とした)
  6. チームにチュートリアルを共有する(Wixでは https://typescript-exercises.github.io/ を使用)
  7. エラーを正しく読み取れるようになる (階層の深いエラーだとテキストがIDE/ターミナルに圧縮され読めなくなるケースがあるため)
  8. 過度なanyの使用に注意する

typescript-exercises.github.io

コメント

「typescript-exercisesはとても面白いですね!こういうゲーム感覚で学べるのはいいなあ」
「7番はとてもよくわかります...エラーの解読スキルは力を入れるべきってことですね」
「記事にはTypeScriptの公式ドキュメントのUnderstanding Errorsを読めと書いてありました」
「アプリ側にTSを導入した際も、いったんanyを許容して導入した過去がありますね。今後はanyをどんどん減らしていきたい!」

www.typescriptlang.org

NativeBase のご紹介

  • NativeBase はアンドロイド、iOS、ウェブで一貫したデザインシステムを構築するための、モバイルファーストでアクセスしやすいコンポーネントライブラリ

nativebase.io

github.com

コメント

「NativeBase, 色のグラデーションが変数化されているのはすごく使いやすそうですね!」
Kitchen SinkというNativeBaseのデモアプリがExpoで公開されているようです」

rn-css のご紹介

  • styled-componentsの拡張ライブラリ
  • styled-componentsで不足している機能 (メディアクエリ、px指定など) を補うことができる
  • React Native Web と React Native で共通の CSS を記述できる

www.npmjs.com

medium.com

コメント

「React NativeとReact Native Webの両方で開発しているプロジェクトにはかなり良さそうですね!」
「CSSから入った人にもとっつきやすいかもしれないです」

さいごに

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

We're Hiring

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

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