React Navigation v7 で導入される Static API / React Navigation v7 Static API

React Native Meetup #16 の発表資料です。

Transcript

1. 1 Yuki Sato yyyy/mm/dd React Navigation v7 で導入される Static APIについて React Native Meetup #16 ft. カンム
2. 2 2 Engineering Manager at Kanmu, Inc. Yuki Sato GitHub @yusato 自己紹介
3. 3 3 プロダクト 誰でもすぐに作って買い物できるVisaプリカアプリ 手元の資産形成に活用できるクレジットカード
4. 4 4 技術スタック TypeScript フロントエンド React Native バックエンド Go Python インフラ AWS Terraform Datadog データ基盤 デザイン その他 BigQuery Redash Figma Storybook Github GitHub Actions
5. 5 5 目次 背景 どう変わったのか どう実現されているのか まとめ INDEX 1 2 4 5
6. 6 6 弊チームが抱えている課題 • バンドルカードアプリでは React Navigation を使っている • Dynamic API が導入された v5 へのアップデート時にコンポーネントベースへ の書き換えを後回しにした • 互換性を保つための @react-navigation/compat を使用しているがすでに パッケージは削除されているので、後がなくなっていた 背景
7. 7 7 Static API が来た • React Navigation 7 で新しい Static API 追加される • Dynamic API の利点を活かしつ不評であったコードベースの簡素化のために 作られたもの • v4 以前の Static API とは別物だが、インターフェイスは似ている • 初期のプロトタイプはかなり前から開発されていたが、Blog が出たり、Deep Link 周りの機能が拡充されたタイミングだったので、使えるものなのかを見 てみた 背景
8. 8 8 Dynamic APIの課題 • Navigatorの定義をコンポーネントベースで行うAPIにより、そもそも冗長な記 述となっていた • 動的な設定の変更が可能になった反面、TypeScriptの型定義とDeepLinkの設 定においても追加の多くの記述をしなければならなくなっていた どう変わったのか
9. 9 9 Navigatorの定義 どう変わったのか • createStackNavigator などの関数のオプションとして screens の設定を渡 せるようになった • 構文だけ見てもでもだいぶシンプルに戻っている • 作成したNavigator を createStaticNavigation という関数に渡している
10. 10 10 Navigatorの定義 どう変わったのか Dynamic Static
11. 11 11 TypeScriptの型定義 • Dynamic API で パラメータの型定義は Navigator 定義とは別の場所で行う • Static APIの場合だとNavigator定義そのものから型を生成できる どう変わったのか
12. 12 12 TypeScriptの型定義 どう変わったのか Dynamic Static
13. 13 13 Deep Link • Navigator作成時のオプションとして定義できるようになった ◦ TypeScriptの型定義と同様に、Screenとのマッピングの必要がなくなる • オプションにより、Deep Linkのurlの設定が自動でできるようになった どう変わったのか
14. 14 14 Deep Link どう変わったのか Dynamic Static
15. 15 15 その他 • Navigatorの定義に条件を記述して認証付きの画面を宣言的に定義できるように なった • Static API をルートにしてDynamic APIを使用したり、その逆も可能 ◦ 相互に変換するためのhelperが用意されている（後述） どう変わったのか
16. 16 16 コンポーネントへの変換 • Static API は Dynamic APIを置き換えるものではなくDynamic APIの上に実 装されている > The static API it’s an additional optional API. The dynamic API isn’t going away and will remain a first-class API of React Navigation. In fact, the static API is written entirely on top of the dynamic API. どう実現されているのか
17. 17 17 createStaticNavigation • この関数が起点になり、Static APIとしての設定を元に、 NavigationContainerを返したり、Linkingの設定を行っている どう実現されているのか 内部でNavigationContainerを返しているの で、アプリケーション側での呼び出しが不要 になっている
18. 18 18 createComponentForStaticNavigation • Static APIの設定からNavigatorのコンポーネントを作成している • createStaticNavigation の内部で呼び出されているが、直接呼び出して使用 することもできる どう実現されているのか 静的に設定したNavigation設定を元に NavigatorとScreenを返している
19. 19 19 createPathConfigForStaticNavigation • Deep Link auto の設定もこの一連の処理で行われている • 素直にPascalCase -> kebab-case に変換されている どう実現されているのか
20. 20 20 旧Static APIからの移行 • Dynamic API は v5 移行時の課題の一つとして単純なコード量の増加で、コス トがかかる部分 ◦ Static API の導入により置き換えのコストが大幅に減ることが見込める • また、@react-navigation/compat パッケージと異なり、共存するものであ ることから一定安心して使用できるはず まとめ
21. 21 21 Expo Routerとの差分 • TypeScriptの観点だと… ◦ 自動生成された型がつく😥 • Deep Linkの観点だと… ◦ こちらも自動生成される😥 正直なところ、優位性を持つほどの変更とはならない。 とはいえ純粋なネイティブアプリをターゲットとしたアプリを作成している状況な らば、差分は少し縮まった。 まとめ
22. 22 22 さいごに We are hiring! カンム　採用 team.kanmu.co.jp
23. 23 Thank you! ありがとうございました