Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Navigation v7 で導入される Static API / React N...
Search
Yuki Sato
June 14, 2024
Technology
0
48
React Navigation v7 で導入される Static API / React Navigation v7 Static API
React Native Meetup #16 の発表資料です。
Yuki Sato
June 14, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
次は君だ。~Japan AWS Jr. Champions 受賞までの奇跡~
fukuchiiinu
0
190
生成AIの活用パターンと継続的評価
asei
6
660
最新のAIツールは何を解決しようとしているのか - Python エンジニアが取り組むべき "越境" とは - / Python-Engineer-in-AI-Era
iktakahiro
1
110
APIs for AI: Have we failed?
zdne
0
140
自動テストの信頼性を高めるミューテーションテストの活用に向けて
tarappo
2
110
Why and Why not of enabling swap in Kubernetes
hwchiu
0
340
新入社員 オンボーディング改善プロジェクト - シンプルな仕組みで変革のきっかけを
enpipi
0
520
複数の外部サービスデータの統合と変換を実現する Railsのインポートアーキテクチャ / Rails import architecture for integration and transformation of multiple external service data
aiandrox
0
390
巨大企業でDX革新を起こすということ BTCONJP 2024
yamaken66
1
490
全部見せます! BigQueryのコスト削減の手法とその効果 / BigQuery Cost Reduction Methods
shiozaki
1
150
全社を巻き込んだ業務オペレーション改善と、それは事業成長に貢献しているのか?を実感した話
marroooon
0
160
Trusted Types API と Vue.js
lycorptech_jp
PRO
1
120
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Making Projects Easy
brettharned
115
5.9k
Navigating Team Friction
lara
183
14k
How to Ace a Technical Interview
jacobian
275
23k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
RailsConf 2023
tenderlove
28
870
The Cost Of JavaScript in 2023
addyosmani
44
5.9k
Unsuck your backbone
ammeep
668
57k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Transcript
1 Yuki Sato yyyy/mm/dd React Navigation v7 で導入される Static APIについて
React Native Meetup #16 ft. カンム
2 2 Engineering Manager at Kanmu, Inc. Yuki Sato GitHub
@yusato 自己紹介
3 3 プロダクト 誰でもすぐに作って買い物できるVisaプリカアプリ 手元の資産形成に活用できるクレジットカード
4 4 技術スタック TypeScript フロントエンド React Native バックエンド Go Python
インフラ AWS Terraform Datadog データ基盤 デザイン その他 BigQuery Redash Figma Storybook Github GitHub Actions
5 5 目次 背景 どう変わったのか どう実現されているのか まとめ INDEX 1 2
4 5
6 6 弊チームが抱えている課題 • バンドルカードアプリでは React Navigation を使っている • Dynamic
API が導入された v5 へのアップデート時にコンポーネントベースへ の書き換えを後回しにした • 互換性を保つための @react-navigation/compat を使用しているがすでに パッケージは削除されているので、後がなくなっていた 背景
7 7 Static API が来た • React Navigation 7 で新しい
Static API 追加される • Dynamic API の利点を活かしつ不評であったコードベースの簡素化のために 作られたもの • v4 以前の Static API とは別物だが、インターフェイスは似ている • 初期のプロトタイプはかなり前から開発されていたが、Blog が出たり、Deep Link 周りの機能が拡充されたタイミングだったので、使えるものなのかを見 てみた 背景
8 8 Dynamic APIの課題 • Navigatorの定義をコンポーネントベースで行うAPIにより、そもそも冗長な記 述となっていた • 動的な設定の変更が可能になった反面、TypeScriptの型定義とDeepLinkの設 定においても追加の多くの記述をしなければならなくなっていた
どう変わったのか
9 9 Navigatorの定義 どう変わったのか • createStackNavigator などの関数のオプションとして screens の設定を渡 せるようになった
• 構文だけ見てもでもだいぶシンプルに戻っている • 作成したNavigator を createStaticNavigation という関数に渡している
10 10 Navigatorの定義 どう変わったのか Dynamic Static
11 11 TypeScriptの型定義 • Dynamic API で パラメータの型定義は Navigator 定義とは別の場所で行う
• Static APIの場合だとNavigator定義そのものから型を生成できる どう変わったのか
12 12 TypeScriptの型定義 どう変わったのか Dynamic Static
13 13 Deep Link • Navigator作成時のオプションとして定義できるようになった ◦ TypeScriptの型定義と同様に、Screenとのマッピングの必要がなくなる • オプションにより、Deep
Linkのurlの設定が自動でできるようになった どう変わったのか
14 14 Deep Link どう変わったのか Dynamic Static
15 15 その他 • Navigatorの定義に条件を記述して認証付きの画面を宣言的に定義できるように なった • Static API をルートにしてDynamic
APIを使用したり、その逆も可能 ◦ 相互に変換するためのhelperが用意されている(後述) どう変わったのか
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 createStaticNavigation • この関数が起点になり、Static APIとしての設定を元に、 NavigationContainerを返したり、Linkingの設定を行っている どう実現されているのか 内部でNavigationContainerを返しているの で、アプリケーション側での呼び出しが不要
になっている
18 18 createComponentForStaticNavigation • Static APIの設定からNavigatorのコンポーネントを作成している • createStaticNavigation の内部で呼び出されているが、直接呼び出して使用 することもできる
どう実現されているのか 静的に設定したNavigation設定を元に NavigatorとScreenを返している
19 19 createPathConfigForStaticNavigation • Deep Link auto の設定もこの一連の処理で行われている • 素直にPascalCase
-> kebab-case に変換されている どう実現されているのか
20 20 旧Static APIからの移行 • Dynamic API は v5 移行時の課題の一つとして単純なコード量の増加で、コス
トがかかる部分 ◦ Static API の導入により置き換えのコストが大幅に減ることが見込める • また、@react-navigation/compat パッケージと異なり、共存するものであ ることから一定安心して使用できるはず まとめ
21 21 Expo Routerとの差分 • TypeScriptの観点だと… ◦ 自動生成された型がつく😥 • Deep
Linkの観点だと… ◦ こちらも自動生成される😥 正直なところ、優位性を持つほどの変更とはならない。 とはいえ純粋なネイティブアプリをターゲットとしたアプリを作成している状況な らば、差分は少し縮まった。 まとめ
22 22 さいごに We are hiring! カンム 採用 team.kanmu.co.jp
23 Thank you! ありがとうございました