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
Compose Navigation実装の見通しを良くする
Search
hiro
March 15, 2025
Programming
0
260
Compose Navigation実装の見通しを良くする
DroidKaigi.collect { #17@Tokyo }で発表したセッションスライドです。
hiro
March 15, 2025
Tweet
Share
More Decks by hiro
See All by hiro
Compose UIテストを使った統合テスト
hiroaki404
0
260
Kotlin/Androidでテスト駆動開発をはじめよう
hiroaki404
1
890
Other Decks in Programming
See All in Programming
AIでLINEスタンプを作ってみた
eycjur
1
230
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
290
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
270
Laravel Boost 超入門
fire_arlo
2
210
Navigating Dependency Injection with Metro
zacsweers
2
190
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1.1k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
ProxyによるWindow間RPC機構の構築
syumai
3
1.1k
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
100
機能追加とリーダー業務の類似性
rinchoku
2
1.2k
OSS開発者という働き方
andpad
5
1.7k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
The World Runs on Bad Software
bkeepers
PRO
70
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
BBQ
matthewcrist
89
9.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Facilitating Awesome Meetings
lara
55
6.5k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Designing for Performance
lara
610
69k
Transcript
納庄 宏明 Nosho Hiroaki / hiro Compose Naviga-on実装の⾒通しを良くする 2025/3/14 DroidKaigi.collect
{ #17@Tokyo }
⾃⼰紹介 •Android Engineer •納庄 宏明 Nosho Hiroaki / hiro •最近の個⼈の活動
•OSS制作 •Compose Mul-pla/orm試したり 本⽇のサンプルコード
Naviga&onの実装が雑になってい ませんか?
悪い例
Naviga&onの⾒通しを良くしよう
発表でふれること •型安全なNaviga3on •良いNaviga3on Graphの構成 •トップバー・ボトムバー •ログ •覚書 •Naviga-on3というライブラリが ⽤意されている?🤔
型安全なNaviga&on
Compose Naviga-on Safe Args •ナビゲーションの型安全機能🚀 •routeや値渡しが型安全になる •不正な画⾯遷移による実⾏時エラーを防ぐ •保守性 ⬆ 可読性
⬆ •Compose Mul3pla;ormでも使える
従来 ルートを⽂字列で指定 argumentsで いろいろ設定 argumentsで いろいろ設定
Safe Args ルートをジェネリクスで指定 フィールドにアクセス 型を定義 値を渡す時
⽐較 従来 Safe Args
•プリミティブ型全般、Enum •Custome Typeを使えば、⾃作クラスも渡せるが、、 •CustomeTypeは乱⽤しないこと •Single Source Of Truthに従っているか?🤔 •画⾯遷移ではidなど最⼩限の情報だけ渡す •Repositoryに情報源を置き、リアクティブに情報を更新
値は何が渡せるのか?
Safe Argsのしくみ •Kotlin Serializa3onを使う •内部ではクラス名の⽂字列を⽣成 •⽂字列指定の⽅法と共存可能💡 •ということは、移⾏も楽 •⼀部の画⾯だけから置き換えられる •Kotlin Serializa3on機能⾊々使える
•⽣成されるルート⽂字列は@SerialNameで修正可能
良いNaviga&on Graphの構成
良いNavigation Graphの構成の観点 •⼀覧性:画⾯構成/画⾯関係の把握しやすさ •検索性:⾒つけやすさ •DRY:コードが重複しない •良くする⽅法を⾒ていきましょう
関連する画⾯を⼀つにまとめる 関数でまとめる グループ化/ 階層化される ⼀連のフローはNested Graphでも可
カプセル化する ルート定義とUI実装を カプセル化 呼び出し側で⼀覧性向上 ※navigate関数もカプセル化しています
ルートの定義を⾒つけやすくする Sealed Interfaceの 内部クラスとして定義 補完から⾒つけやすい
トップバー・ボトムバー
トップバー・ボトムバーをどこに置く? •Naviga3on Graphの外に置くか、中に置くか?🤔 •やり⽅を間違えるとコードの⾒通しが悪くなる •Good/Badを整理しながら1つずつ紹介します Nav Graph TopBar Screen1, Screen2...
Nav Graph Screen1, Screen2... TopBar
①トップバーをNaviga-on Graphの外に置く Good ⬆ • 記述が⼀回なのでシンプル Bad ⬇ • 画⾯ごとにトップバーを出し分けづ
らい(ボタンを変更する等) • 設定クラスを使って出し分ける • 出し分けの種類が増えると設定クラスが⼤ きくなってしまう⬇ • 出し分けが不要なボトムバーに👍 Nav Graph TopBar Screen1, Screen2... 設定クラス title = title = “〇〇画⾯” title =
Good ⬆ • 画⾯ごとの出し分けに柔軟 • 動的にUIを変えやすい (Bad ⬇) • トップバーを固定で出し続けられない
(あまり問題にはならない?) •毎回トップバーの記述が必要 できるだけトップバーの実装を共通化 させる ②トップバーを画⾯の中に置く Nav Graph Screen1, Screen2... TopBar
Good ⬆ • ①②のいいとこどり • 柔軟性を持たせたいときだけ内側の トップバーを使える Bad ⬇ •
アニメーションを調整する必要があ る ③画⾯ごとに外のトップバーを使うか判断する Nav Graph if (useOutsideBar) TopBar Screen1, Screen2... 設定クラス useOutsideBar = true false true 設定クラスは 表⽰・⾮表⽰だけ
Nav Graph ④ボトムバーのある画⾯をNested Naviga-onにする • Good ⬆ • 設定クラス等で隠す必要がない •
2つのNavHostのネストが必要 ※通常のNested Graphでは実現でき ない Bad ⬇ • navControlerが2つあり、使い分けが 必要 • deeplinkの動作に注意 Bottom Bar Nested Graph Screen1, Screen2... Screen3, Screen4... ボトムバーのある画⾯だけ ネストグラフにまとめる
ログ
BackStackをログにとる •デバッグ環境でBackStackを記録 •画⾯遷移の履歴、BackStackの積まれ⽅ •Crashly-csのクラッシュログに送る •Crashly3csに関してはAnaly3csのScreenViewを設定しておくとパ ンくずリストで⾒れる •ただし全画⾯で指定しておく必要がある BirdListView
まとめ
本⽇話したこと •型安全なNaviga3on •良いNaviga3on Graphの構成 •トップバー・ボトムバー •ログ •⾒通しのよいNaviga3on実装を⽬指しましょう