Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Google I/O 2023 - Debugging Jetpack Composeについて

Google I/O 2023 - Debugging Jetpack Composeについて

Google I/O 2023 に行われたセッション「Debugging Jetpack Compose」の内容 / 感想をまとめたものです。

Shun Miyazaki

June 08, 2023
Tweet

More Decks by Shun Miyazaki

Other Decks in Technology

Transcript

  1. Google I/O 2023
    Debugging Jetpack Compose
    について
    宮﨑 瞬

    View full-size slide

  2. 本発表について
    本発表は以下のセッション内容から、
    個人的に気になった点をまとめたものです。
    Debugging Jetpack Compose - Youtube
    h6ps://youtu.be/Kp-aiSU8qCU

    View full-size slide

  3. セッション内容
    Jetpack Composeの開発で、遭遇する問題の解決方法について、
    解説してくれている。
    Common Issues(⭐が本発表で話すところ)
    ・ Why is this composable recomposing? ⭐
    ・Problem: Frequent Recomposition
    ・How do I know what's wrong with my UI on different form factors?
    ・Why am I seeing Jank?
    ・Where should I focus on optimising?

    View full-size slide

  4. Why is this composable
    recomposing?
    なぜ、このcomposableで、recomposeが実⾏されるのか?

    View full-size slide

  5. Recomposeには3種類ある
    1.Direct recomposition
    変更された変数を参照しているComposeの、Recomposeが⾛る
    2.Indirect recomposition
    変更された変数を直接参照していないが、
    変更された変数を、計算に使⽤している変数を参照しているComposableのRecomposeが⾛る
    3.Unskippable recomposition
    変更されていないが、
    Unstableで、immutable(不変)であることを担保できないため、Recomposeが⾛る

    View full-size slide

  6. Direct recomposition
    countが変更されると、TextのRecomposeが⾛る
    Debugging Jetpack Compose - Youtube
    https://youtu.be/Kp-aiSU8qCU

    View full-size slide

  7. Indirect recomposition
    countが変更されると、
    doubledが変更されて、MyTextのRecomposeが⾛る
    Debugging Jetpack Compose - Youtube
    h6ps://youtu.be/Kp-aiSU8qCU

    View full-size slide

  8. Unskippable recomposition
    countが変更されると、listは値が変わっていないが、
    Unstableなので、MyListのRecomposeが⾛る
    Debugging Jetpack Compose - Youtube
    h6ps://youtu.be/Kp-aiSU8qCU

    View full-size slide

  9. Recomposeが
    実⾏された理由をどうやって
    確かめるか?

    View full-size slide

  10. Compose state information in debugger
    Android Studio Hedgehogから、
    Compose state information in debuggerが使える
    hstate-in-debugger
    Debugging Jetpack Compose - Youtube
    https://youtu.be/Kp-aiSU8qCU
    検査したいところに、
    breakpointを設置して、debugする。
    Debuggerで、Recompositon Stateを見ることができる。

    View full-size slide

  11. Debuggerで検証できるもの
    Changed State
    ・Unchanged - 変数は変更されていない
    ・Changed - 変数は変更された
    ・Uncertain - 変数が変更されたかどうか、まだ評価中
    ・Static - 変数は絶対に変更されない
    ・Unstable - 変数はunstable type(不変性が担保できない)

    View full-size slide

  12. 使⽤例1
    isFollewedが変更されたので、Recomposeが実⾏
    Debugging Jetpack Compose - Youtube
    https://youtu.be/Kp-aiSU8qCU

    View full-size slide

  13. 使⽤例2
    podcastsがUnstableなので、Recomposeが実⾏
    Debugging Jetpack Compose - Youtube
    h6ps://youtu.be/Kp-aiSU8qCU

    View full-size slide

  14. まとめ
    ・Recomposeには3種類ある
    ・Android Studio Hedgehogで追加された、Compose state
    information in debuggerで、Recomposeの原因を検証できる

    View full-size slide