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
240
Compose Navigation実装の見通しを良くする
DroidKaigi.collect { #17@Tokyo }で発表したセッションスライドです。
hiro
March 15, 2025
Tweet
Share
More Decks by hiro
See All by hiro
Compose UIテストを使った統合テスト
hiroaki404
0
230
Kotlin/Androidでテスト駆動開発をはじめよう
hiroaki404
1
850
Other Decks in Programming
See All in Programming
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
140
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
490
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
0
300
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
NPOでのDevinの活用
codeforeveryone
0
720
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1k
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
270
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
710
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
580
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
3.5k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Navigating Team Friction
lara
187
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Gamification - CAS2011
davidbonilla
81
5.3k
Embracing the Ebb and Flow
colly
86
4.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Become a Pro
speakerdeck
PRO
28
5.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
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実装を⽬指しましょう