Compose Navigation実装の見通しを良くする

Slide 1

Slide 1 text

納庄宏明 Nosho Hiroaki / hiro Compose Naviga-on実装の⾒通しを良くする 2025/3/14 DroidKaigi.collect { #17@Tokyo }

Slide 2

Slide 2 text

⾃⼰紹介 •Android Engineer •納庄宏明 Nosho Hiroaki / hiro •最近の個⼈の活動 •OSS制作 •Compose Mul-pla/orm試したり本⽇のサンプルコード

Slide 3

Slide 3 text

Naviga&onの実装が雑になっていませんか？

Slide 4

Slide 4 text

悪い例

Slide 5

Slide 5 text

Naviga&onの⾒通しを良くしよう

Slide 6

Slide 6 text

発表でふれること •型安全なNaviga3on •良いNaviga3on Graphの構成 •トップバー・ボトムバー •ログ •覚書 •Naviga-on3というライブラリが⽤意されている？🤔

Slide 7

Slide 7 text

型安全なNaviga&on

Slide 8

Slide 8 text

Compose Naviga-on Safe Args •ナビゲーションの型安全機能🚀 •routeや値渡しが型安全になる •不正な画⾯遷移による実⾏時エラーを防ぐ •保守性 ⬆ 可読性 ⬆ •Compose Mul3pla;ormでも使える

Slide 9

Slide 9 text

従来ルートを⽂字列で指定 argumentsでいろいろ設定 argumentsでいろいろ設定

Slide 10

Slide 10 text

Safe Args ルートをジェネリクスで指定フィールドにアクセス型を定義値を渡す時

Slide 11

Slide 11 text

⽐較従来 Safe Args

Slide 12

Slide 12 text

•プリミティブ型全般、Enum •Custome Typeを使えば、⾃作クラスも渡せるが、、 •CustomeTypeは乱⽤しないこと •Single Source Of Truthに従っているか？🤔 •画⾯遷移ではidなど最⼩限の情報だけ渡す •Repositoryに情報源を置き、リアクティブに情報を更新値は何が渡せるのか？

Slide 13

Slide 13 text

Safe Argsのしくみ •Kotlin Serializa3onを使う •内部ではクラス名の⽂字列を⽣成 •⽂字列指定の⽅法と共存可能💡 •ということは、移⾏も楽 •⼀部の画⾯だけから置き換えられる •Kotlin Serializa3on機能⾊々使える •⽣成されるルート⽂字列は@SerialNameで修正可能

Slide 14

Slide 14 text

良いNaviga&on Graphの構成

Slide 15

Slide 15 text

良いNavigation Graphの構成の観点 •⼀覧性：画⾯構成/画⾯関係の把握しやすさ •検索性：⾒つけやすさ •DRY：コードが重複しない •良くする⽅法を⾒ていきましょう

Slide 16

Slide 16 text

関連する画⾯を⼀つにまとめる関数でまとめるグループ化/ 階層化される⼀連のフローはNested Graphでも可

Slide 17

Slide 17 text

カプセル化するルート定義とUI実装をカプセル化呼び出し側で⼀覧性向上 ※navigate関数もカプセル化しています

Slide 18

Slide 18 text

ルートの定義を⾒つけやすくする Sealed Interfaceの内部クラスとして定義補完から⾒つけやすい

Slide 19

Slide 19 text

トップバー・ボトムバー

Slide 20

Slide 20 text

トップバー・ボトムバーをどこに置く？ •Naviga3on Graphの外に置くか、中に置くか？🤔 •やり⽅を間違えるとコードの⾒通しが悪くなる •Good/Badを整理しながら１つずつ紹介します Nav Graph TopBar Screen1, Screen2... Nav Graph Screen1, Screen2... TopBar

Slide 21

Slide 21 text

①トップバーをNaviga-on Graphの外に置く Good ⬆ • 記述が⼀回なのでシンプル Bad ⬇ • 画⾯ごとにトップバーを出し分けづらい(ボタンを変更する等) • 設定クラスを使って出し分ける • 出し分けの種類が増えると設定クラスが⼤きくなってしまう⬇ • 出し分けが不要なボトムバーに👍 Nav Graph TopBar Screen1, Screen2... 設定クラス title = title = “〇〇画⾯” title =

Slide 22

Slide 22 text

Good ⬆ • 画⾯ごとの出し分けに柔軟 • 動的にUIを変えやすい (Bad ⬇) • トップバーを固定で出し続けられない (あまり問題にはならない？) •毎回トップバーの記述が必要できるだけトップバーの実装を共通化させる ②トップバーを画⾯の中に置く Nav Graph Screen1, Screen2... TopBar

Slide 23

Slide 23 text

Good ⬆ • ①②のいいとこどり • 柔軟性を持たせたいときだけ内側のトップバーを使える Bad ⬇ • アニメーションを調整する必要がある ③画⾯ごとに外のトップバーを使うか判断する Nav Graph if (useOutsideBar) TopBar Screen1, Screen2... 設定クラス useOutsideBar = true false true 設定クラスは表⽰・⾮表⽰だけ

Slide 24

Slide 24 text

Nav Graph ④ボトムバーのある画⾯をNested Naviga-onにする • Good ⬆ • 設定クラス等で隠す必要がない • 2つのNavHostのネストが必要 ※通常のNested Graphでは実現できない Bad ⬇ • navControlerが２つあり、使い分けが必要 • deeplinkの動作に注意 Bottom Bar Nested Graph Screen1, Screen2... Screen3, Screen4... ボトムバーのある画⾯だけネストグラフにまとめる

Slide 25

Slide 25 text

ログ

Slide 26

Slide 26 text

BackStackをログにとる •デバッグ環境でBackStackを記録 •画⾯遷移の履歴、BackStackの積まれ⽅ •Crashly-csのクラッシュログに送る •Crashly3csに関してはAnaly3csのScreenViewを設定しておくとパンくずリストで⾒れる •ただし全画⾯で指定しておく必要がある BirdListView

Slide 27

Slide 27 text

まとめ

Slide 28

Slide 28 text

本⽇話したこと •型安全なNaviga3on •良いNaviga3on Graphの構成 •トップバー・ボトムバー •ログ •⾒通しのよいNaviga3on実装を⽬指しましょう