Jetpack Compose State Practices

記事版
https://qiita.com/takahirom/items/862f3c607850ce524744
English version
https://medium.com/@takahirom/inside-jetpack-compose-2e971675e55e

Transcript

1. Jetpack Compose State
   Practices
   takahirom
   

   View Slide

2. ࣗ෼ʹ͍ͭͯɹ
   takahirom
   ● Takahiro Menju
   ● Androidʹؔ͢Δٕज़͕޷͖
   ● DroidKaigi co-organizer
   ● Google Developers Expert for Android
   ● CyberAgent.Inc ABEMA
   ● Twitter takahirom (@new_runnable)
   ● GitHub takahirom
   

   View Slide

3. ࠓ೔ͷࢿྉʹ͍ͭͯ
   ҎԼͷURLͰ΋֬ೝͰ͖·͢ɻ
   https://qiita.com/takahirom/items/862f3c607850ce524744 (೔ຊޠ)
   https://medium.com/@takahirom/jetpack-compose-state-guideline-494d467b6e76 (ӳޠ൛)
   https://d.android.com/jetpack/compose?hl=ja
   

   View Slide

4. Jetpack Composeͱ͸ʁ
   “Jetpack Compose ͸ɺωΠςΟϒ UI ΛϏϧυ͢ΔͨΊͷ Android ͷ࠷৽πʔϧΩοτ
   Ͱ͢ɻAndroid ͷ UI ։ൃΛ؆ૉԽ͠ɺՃ଎͠·͢ɻগͳ͍ίʔυɺύϫϑϧͳπʔϧɺ
   ௚ײతͳ Kotlin API Λ࢖༻ͯ͠ΞϓϦΛ͙͢ʹಈ͔͢͜ͱ͕Ͱ͖·͢ɻ”
   https://d.android.com/jetpack/compose?hl=ja
   

   View Slide

5. Jetpack ComposeΛগ͠ݟͯΈΔ
   @Composable
   fun HelloWorld(){
   Column {
   Text(text = "Hello")
   Text(text = "World")
   }
   }
   

   View Slide

6. ࣮ࡍͷΞϓϦέʔγϣϯ͸ɻɻʁ
   android/compose-samplesʹ͸
   ࢀߟʹͳΔJetpack Composeͷαϯϓϧ͕ͨ͘͞Μ͋Γ·͢
   https://github.com/android/compose-samples
   

   View Slide

7. ࣮ࡍͷΞϓϦέʔγϣϯ͸ɻɻʁ
   

   View Slide

8. ࣮ࡍͷΞϓϦέʔγϣϯ͸ɻɻʁ
   

   View Slide

9. ࣮ࡍͷΞϓϦέʔγϣϯ͸ɻɻʁ
   ViewModelͷStateΛݟΔ
   

   View Slide

10. ࣮ࡍͷΞϓϦέʔγϣϯ͸ɻɻʁ
    ViewModelͷStateΛݟΔ
    ComposableͷதͰStateΛอ࣋
    

    View Slide

11. ࣮ࡍͷΞϓϦέʔγϣϯ͸ɻɻʁ
    ViewModelͷStateΛݟΔ
    ComposableͷதͰStateΛอ࣋
    State = ঢ়ଶͱ͸ʁ “࣌ؒͱͱ΋ʹมԽ͢ΔՄೳੑ͕͋Δ஋͢΂ͯ”
    ࣮ࡍͷΞϓϦέʔγϣϯͰ͸ComposeͰͳͯ͘΋
    StateʹΑͬͯσʔλͷදࣔͳͲΛߦ͏
    https://developer.android.com/jetpack/compose/state?hl=ja
    

    View Slide

12. Jetpack ComposeΛ࣮ࡍʹಋೖ͍ͯͨ͘͠Ίʹ
    جຊతͳJetpack Composeͷॻ͖ํ͸ͳΜͱͳ͘෼͔͕ͬͨɺ࣮ࡍJetpack ComposeͰͲ͏ॻ͍
    ͍ͯͬͨΒ͍͍ͷ͔ʁ
    ԿΛ͢Δ΂͖ͰԿΛ͢Δ΂͖Ͱ͸ͳ͍ͷ͔ʁ
    

    View Slide

13. Jetpack ComposeΛ࣮ࡍʹಋೖ͍ͯͨ͘͠Ίʹ
    جຊతͳJetpack Composeͷॻ͖ํ͸ͳΜͱͳ͘෼͔͕ͬͨɺ࣮ࡍJetpack ComposeͰͲ͏ॻ͍
    ͍ͯͬͨΒ͍͍ͷ͔ʁ
    ԿΛ͢Δ΂͖ͰԿΛ͢Δ΂͖Ͱ͸ͳ͍ͷ͔ʁ
    Stateͷѻ͍ํʹ͍ͭͯ͜ͷAndroid Dev
    SummitͷηογϣϯͰ

    ͔ͳΓ·ͱ·͍ͬͯ·͕͢

    DO DON’TͷܗࣜͰ͸ͳ͘ɺ

    ͋·Γ޿·͍ͬͯͳ͍ͷͰɻ

    ͦΕΛϦετԽͯ͠঺հ͍͖ͯ͠·͢ɻ
    https://www.youtube.com/watch?v=rmv2ug-wW4U
    

    View Slide

14. Jetpack ComposeͷStateͷجຊ
    

    View Slide

15. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    

    View Slide

16. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ❌ DON’T (μϝͳྫ)
    

    View Slide

17. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ❌ DON’T (μϝͳྫ)
    

    View Slide

18. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ❌ DON’T (μϝͳྫ)
    Kotlinͷม਺Λએݴ
    

    View Slide

19. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ❌ DON’T (μϝͳྫ)
    Kotlinͷม਺Λએݴ
    ͦͷม਺Λ࢖ͬͯSwitchΛදࣔ
    

    View Slide

20. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ❌ DON’T (μϝͳྫ)
    Kotlinͷม਺Λએݴ
    ͦͷม਺Λ࢖ͬͯSwitchΛදࣔ
    ม਺Λมߋ
    

    View Slide

21. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ❌ DON’T
    มߋ͕൓ө͞ΕͣɻεΠονͱͯ͠ಈ࡞͠ͳ͍ 😭
    

    View Slide

22. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ❌ DON’T
    มߋ͕൓ө͞ΕͣɻεΠονͱͯ͠ಈ࡞͠ͳ͍ 😭
    

    View Slide

23. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ❌ DON’T ⭕ DO
    

    View Slide

24. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ❌ DON’T ⭕ DO
    

    View Slide

25. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ❌ DON’T ⭕ DO
    MutableStateͰ஋Λอ͍࣋ͯ͠Δ
    

    View Slide

26. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ❌ DON’T ⭕ DO
    MutableStateͰ஋Λอ͍࣋ͯ͠Δ
    MutableStateͷvalueʹΞΫηε
    

    View Slide

27. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ❌ DON’T ⭕ DO
    MutableStateͰ஋Λอ͍࣋ͯ͠Δ
    MutableStateͷvalueʹΞΫηε
    MutableStateͷvalueΛมߋ
    

    View Slide

28. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ⭕ DO
    

    View Slide

29. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ⭕ DO
    

    View Slide

30. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ⭕ DO
    ͳͥ͏·͘ಈ͘ͷ͔ʁ
    

    View Slide

31. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ͳͥDOͷྫ͸͏·͘ಈ͘ͷ͔ʁ
    println()Λ௥Ճͯ֬͠ೝͯ͠ΈΔ
    ⭕ DO + println()
    

    View Slide

32. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ͳͥDOͷྫ͸͏·͘ಈ͘ͷ͔ʁ
    DOͷྫͰ͸MySwitch()͕΋͏Ұ౓ಈ͔͘Β൓ө͞Ε͍ͯΔɻ
    ⭕ DO + println()
    

    View Slide

33. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ͳͥDOͷྫ͸͏·͘ಈ͘ͷ͔ʁ
    DOͷྫͰ͸MySwitch()͕΋͏Ұ౓ಈ͔͘Β൓ө͞Ε͍ͯΔɻ
    ⭕ DO + println()
    

    View Slide

34. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ͳͥDOͷྫ͸͏·͘ಈ͘ͷ͔ʁ
    DOͷྫͰ͸MySwitch()͕΋͏Ұ౓ಈ͔͘Β൓ө͞Ε͍ͯΔɻ
    ͳͥMySwitch()͸΋͏Ұ౓ಈ͘ͷ͔ʁ
    ⭕ DO + println()
    

    View Slide

35. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ͳͥMySwitch()͸΋͏Ұ౓ಈ͘ͷ͔ʁ
    ΄Μͷগ͚ͩ͠ίʔυΛݟͯΈ·͠ΐ͏
    MutableStateͷ࣮૷
    

    View Slide

36. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ͳͥMySwitch()͸΋͏Ұ౓ಈ͘ͷ͔ʁ
    ΄Μͷগ͚ͩ͠ίʔυΛݟͯΈ·͠ΐ͏
    MutableStateͷ࣮૷
    Ͳ͏΍ΒΧελϜήολʔ͕

    ࣮૷͞Ε͍ͯͦ͏ʁ🕵
    

    View Slide

37. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ͳͥMySwitch()͸΋͏Ұ౓ಈ͘ͷ͔ʁ ࣮͸Jetpack ComposeͰ͸StateͷಡΈࠐΈ͕
    ؂ࢹ͞Ε͓ͯΓɺ
    

    View Slide

38. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ͳͥMySwitch()͸΋͏Ұ౓ಈ͘ͷ͔ʁ ࣮͸Jetpack ComposeͰ͸StateͷಡΈࠐΈ͕
    ؂ࢹ͞Ε͓ͯΓɺ
    Jetpack Compose͸MutableStateʹ

    ରͯ͠ಡΈࠐΈͨ͠Composableؔ਺
    Λอ͍࣋ͯ͠ΔͨΊɺ
    

    View Slide

39. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ͳͥMySwitch()͸΋͏Ұ౓ಈ͘ͷ͔ʁ ࣮͸Jetpack ComposeͰ͸StateͷಡΈࠐΈ͕
    ؂ࢹ͞Ε͓ͯΓɺ
    Jetpack Compose͸MutableStateʹ

    ରͯ͠ಡΈࠐΈͨ͠Composableؔ਺
    Λอ͍࣋ͯ͠ΔͨΊɺ
    Compose͸MutableState͕มߋ͞Εͨͱ͖ʹ
    StateΛಡΈࠐΜͰ͍ΔComposableؔ਺Λݺͼ
    ग़͠·͢ɻ(ྫ֎͕͋Γগ͠ਖ਼֬Ͱ͸ͳ͍ͷͰ͕͢େମͦ͏Ͱ͢)
    

    View Slide

40. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ͳͥMySwitch()͸΋͏Ұ౓ಈ͘ͷ͔ʁ ࣮͸Jetpack ComposeͰ͸StateͷಡΈࠐΈ͕
    ؂ࢹ͞Ε͓ͯΓɺ
    Compose͸MySwitch()͕MutableState.valueΛಡΜͩ͜ͱΛ஌͍ͬͯΔਤ
    Jetpack Compose͸MutableStateʹ

    ରͯ͠ಡΈࠐΈͨ͠Composableؔ਺
    Λอ͍࣋ͯ͠ΔͨΊɺ
    Compose͸MutableState͕มߋ͞Εͨͱ͖ʹ
    StateΛಡΈࠐΜͰ͍ΔComposableؔ਺Λݺͼ
    ग़͠·͢ɻ(ྫ֎͕͋Γগ͠ਖ਼֬Ͱ͸ͳ͍ͷͰ͕͢େମͦ͏Ͱ͢)
    

    View Slide

41. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ͭ·ΓͲ͏͢Ε͹͍͍ͷ͔ʁ
    ⭕ DO
    

    View Slide

42. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ
    ͞ΕΔΑ͏ʹ͢Δ
    ͭ·ΓͲ͏͢Ε͹͍͍ͷ͔ʁ
    ⭕ DO
    ComposeͰ͸MutableStateͳͲͷ
    ComposeͷStateΛ࢖͏͜ͱʹΑΓ
    ComposeʹΑͬͯStateͷมߋΛ

    ؍ଌͰ͖ΔΑ͏ʹ͠Α͏
    

    View Slide

43. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    

    View Slide

44. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    ❌ DON’T ⭕ DO
    

    View Slide

45. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    ❌ DON’T ⭕ DO
    remember{}Λ࢖͍ͬͯΔ
    

    View Slide

46. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    ❌ DON’T ⭕ DO
    remember{}Λ࢖͍ͬͯΔ
    remember{}Λ࢖͍ͬͯͳ͍
    

    View Slide

47. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    ❌ DON’T ⭕ DO
    DON’TͰ͸ಉ༷ʹMutableState࢖͍ͬͯΔͷʹಈ͔ͳ͍ʂͳͥʁʁ
    

    View Slide

48. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    ❌ DON’T ⭕ DO
    DON’TͰ͸ಉ༷ʹMutableState࢖͍ͬͯΔͷʹಈ͔ͳ͍ʂͳͥʁʁ
    

    View Slide

49. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    ❌ DON’T
    ಉ༷ʹprintln()Λ௥Ճͯ֬͠ೝΈΔ
    

    View Slide

50. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    ❌ DON’T
    ͪΌΜͱλοϓͷλΠϛϯάͰMySwitch()͕

    Ͳ͏΍Βಈ͍ͯ͸͍ͦ͏ʁʁͳͥಈ͔ͳ͍ʁʁ
    

    View Slide

51. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    ❌ DON’T
    ͪΌΜͱλοϓͷλΠϛϯάͰMySwitch()͕

    Ͳ͏΍Βಈ͍ͯ͸͍ͦ͏ʁʁͳͥಈ͔ͳ͍ʁʁ
    

    View Slide

52. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    ❌ DON’T
    Ͳ͏΍ΒMySwitch͕ݺͼग़͞Ε௚ͨ͢ͼʹ
    MutableStateͷΠϯελϯε͕࡞Γ௚͞Ε͍ͯͦ͏ʂ
    

    View Slide

53. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    Ͳ͏΍Βremember{}͢ΔͱͲ͔͜ʹอଘ͞ΕΔΒ͍͕͠Ͳ͜ʹอଘ͞ΕΔͷ͔ʁ
    

    View Slide

54. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    Ͳ͏΍Βremember{}͢ΔͱͲ͔͜ʹอଘ͞ΕΔΒ͍͕͠Ͳ͜ʹอଘ͞ΕΔͷ͔ʁ
    Compositionʹอ࣋͞ΕΔ
    

    View Slide

55. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    Ͳ͏΍Βremember{}͢ΔͱͲ͔͜ʹอଘ͞ΕΔΒ͍͕͠Ͳ͜ʹอଘ͞ΕΔͷ͔ʁ
    Compositionʹอ࣋͞ΕΔ
    Compositionͱ͸ͳʹ͔ʁʁ
    

    View Slide

56. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    Ͳ͏΍Βremember{}͢ΔͱͲ͔͜ʹอଘ͞ΕΔΒ͍͕͠Ͳ͜ʹอଘ͞ΕΔͷ͔ʁ
    “Composition”Λཧղ͠Α͏
    Composableؔ਺
    https://developer.android.com/jetpack/compose/lifecycle?hl=en#composition-anatomy
    

    View Slide

57. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    Ͳ͏΍Βremember{}͢ΔͱͲ͔͜ʹอଘ͞ΕΔΒ͍͕͠Ͳ͜ʹอଘ͞ΕΔͷ͔ʁ
    “Composition”Λཧղ͠Α͏
    Composableؔ਺
    https://developer.android.com/jetpack/compose/lifecycle?hl=en#composition-anatomy
    

    View Slide

58. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    Ͳ͏΍Βremember{}͢ΔͱͲ͔͜ʹอଘ͞ΕΔΒ͍͕͠Ͳ͜ʹอଘ͞ΕΔͷ͔ʁ
    “Composition”Λཧղ͠Α͏
    Composition
    Composableؔ਺
    https://developer.android.com/jetpack/compose/lifecycle?hl=en#composition-anatomy
    

    View Slide

59. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    Ͳ͏΍Βremember{}͢ΔͱͲ͔͜ʹอଘ͞ΕΔΒ͍͕͠Ͳ͜ʹอଘ͞ΕΔͷ͔ʁ
    “Composition”Λཧղ͠Α͏
    Compose͸࣮ߦ࣌ʹComposableؔ਺Λ࣮ߦ͢Δ͜ͱʹΑͬͯɺ

    “Composition”Λߏ੒͢Δʂ
    Composition
    Composableؔ਺
    https://developer.android.com/jetpack/compose/lifecycle?hl=en#composition-anatomy
    

    View Slide

60. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    Ͳ͏΍Βremember{}͢ΔͱͲ͔͜ʹอଘ͞ΕΔΒ͍͕͠Ͳ͜ʹอଘ͞ΕΔͷ͔ʁ
    “Composition”Λཧղ͠Α͏
    ❌ DON’T
    

    View Slide

61. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    Ͳ͏΍Βremember{}͢ΔͱͲ͔͜ʹอଘ͞ΕΔΒ͍͕͠Ͳ͜ʹอଘ͞ΕΔͷ͔ʁ
    “Composition”Λཧղ͠Α͏
    Composition
    ❌ DON’T
    remember͍ͯ͠ͳ͍ͷͰɺ
    CompositionͰMutableState͕อ࣋͞Ε͍ͯͳ͍
    

    View Slide

62. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    Ͳ͏΍Βremember{}͢ΔͱͲ͔͜ʹอଘ͞ΕΔΒ͍͕͠Ͳ͜ʹอଘ͞ΕΔͷ͔ʁ
    “Composition”Λཧղ͠Α͏
    ⭕ DO
    

    View Slide

63. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    Ͳ͏΍Βremember{}͢ΔͱͲ͔͜ʹอଘ͞ΕΔΒ͍͕͠Ͳ͜ʹอଘ͞ΕΔͷ͔ʁ
    “Composition”Λཧղ͠Α͏
    Composition
    CompositionͰMutableState͕อ࣋͞ΕΔ
    ⭕ DO
    

    View Slide

64. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    remember͸࣮ࡍԿΛߦ͏ͷ͔ʁ
    A value computed by remember is stored in the Composition during initial
    composition, and the stored value is returned during recomposition.
    https://d.android.com/jetpack/compose/state#state-in-composables
    remember{}ͷ஋͸Compositionʹอ࣋͞ΕɺͦΕ͕࣍ͷݺͼग़͠Ͱ࢖ΘΕΔ
    

    View Slide

65. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    ❌ DON’T ⭕ DO
    ͭ·ΓͲ͏͢Ε͹͍͍ͷ͔ʁ
    

    View Slide

66. Practice2: ComposableͷதͰ࡞ΒΕͨState͸
    remember͞Εͳ͚Ε͹ͳΒͳ͍
    ❌ DON’T ⭕ DO
    MutableState͕CompositionͰอ࣋͞ΕΔΑ͏ʹrememberΛ࢖͓͏
    ͭ·ΓͲ͏͢Ε͹͍͍ͷ͔ʁ
    

    View Slide

67. Practice3: State΁ͷΞΫηε͸KotlinͷDelegated
    PropertyΛ࢖͓͏
    

    View Slide

68. Practice3: State΁ͷΞΫηε͸KotlinͷDelegated
    PropertyΛ࢖͓͏
    ❌ DON’T ⭕ DO
    

    View Slide

69. Practice3: State΁ͷΞΫηε͸KotlinͷDelegated
    PropertyΛ࢖͓͏
    ❌ DON’T ⭕ DO
    KotlinͷDelegated Propertyͷ“by”Λ࢖͍ͬͯΔ
    

    View Slide

70. Practice3: State΁ͷΞΫηε͸KotlinͷDelegated
    PropertyΛ࢖͓͏
    ❌ DON’T ⭕ DO
    KotlinͷDelegated Propertyͷ“by”Λ࢖͍ͬͯΔ
    valͰ͸ͳ͘มߋՄೳͳvarΛ࢖͍ͬͯΔ
    

    View Slide

71. Practice3: State΁ͷΞΫηε͸KotlinͷDelegated
    PropertyΛ࢖͓͏
    ❌ DON’T ⭕ DO
    KotlinͷDelegated Propertyͷ“by”Λ࢖͍ͬͯΔ
    “.value”Λ࢖Θͣͱ΋valueʹΞΫηεͰ͖Δ
    valͰ͸ͳ͘มߋՄೳͳvarΛ࢖͍ͬͯΔ
    

    View Slide

72. Practice3: State΁ͷΞΫηε͸KotlinͷDelegated
    PropertyΛ࢖͓͏
    ⭕ DO
    

    View Slide

73. Practice3: State΁ͷΞΫηε͸KotlinͷDelegated
    PropertyΛ࢖͓͏
    ⭕ DO
    ͳͥʁ
    ୯७ʹStateͷvalue΁ͷΞΫηεΛ

    ҙࣝ͠ͳͯ͘ྑ͘ͳΔͨΊɻ
    

    View Slide

74. Practice3: State΁ͷΞΫηε͸KotlinͷDelegated
    PropertyΛ࢖͓͏
    ⭕ DO
    ͳͥʁ
    ୯७ʹStateͷvalue΁ͷΞΫηεΛ

    ҙࣝ͠ͳͯ͘ྑ͘ͳΔͨΊɻ
    ஫ҙ఺⚠
    ҎԼͷimport͕ͳ͍ͱಈ͔ͳ͍ͷͰ஫ҙʂ
    import androidx.compose.runtime.getValue
    import androidx.compose.runtime.setValue
    

    View Slide

75. Practice4: Stateͷมߋ͸Composableؔ਺ͷείʔϓ಺
    Ͱߦͬͯ͸ͳΒͳ͍
    

    View Slide

76. Practice4: Stateͷมߋ͸Composableؔ਺ͷείʔϓ಺
    Ͱߦͬͯ͸ͳΒͳ͍
    ⭕ DO
    ❌ DON’T
    

    View Slide

77. Practice4: Stateͷมߋ͸Composableؔ਺ͷείʔϓ಺
    Ͱߦͬͯ͸ͳΒͳ͍
    ⭕ DO
    ❌ DON’T
    Composableؔ਺಺ͰMutableStateͷมߋʂ
    

    View Slide

78. Practice4: Stateͷมߋ͸Composableؔ਺ͷείʔϓ಺
    Ͱߦͬͯ͸ͳΒͳ͍
    ⭕ DO
    ❌ DON’T
    มߋ࣌ʹMySwitch()͕ݺͼग़͞ΕΔͷͰɺMySwitch()͕

    ແݶʹݺͼग़͠௚͞Εͯ͠·͏ɻ😂
    

    View Slide

79. Practice4: Stateͷมߋ͸Composableؔ਺ͷείʔϓ಺
    Ͱߦͬͯ͸ͳΒͳ͍
    ❌ DON’T
    ͭ·ΓͲ͏͢Ε͹͍͍ͷ͔ʁ
    https://d.android.com/jetpack/compose/side-effects
    

    View Slide

80. Practice4: Stateͷมߋ͸Composableؔ਺ͷείʔϓ಺
    Ͱߦͬͯ͸ͳΒͳ͍
    ❌ DON’T
    λΠτϧͷ··”Stateͷมߋ͸Composableؔ਺ͷείʔϓ
    ಺Ͱߦͬͯ͸ͳΒͳ͍”
    ͭ·ΓͲ͏͢Ε͹͍͍ͷ͔ʁ
    https://d.android.com/jetpack/compose/side-effects
    

    View Slide

81. Practice4: Stateͷมߋ͸Composableؔ਺ͷείʔϓ಺
    Ͱߦͬͯ͸ͳΒͳ͍
    ❌ DON’T
    λΠτϧͷ··”Stateͷมߋ͸Composableؔ਺ͷείʔϓ
    ಺Ͱߦͬͯ͸ͳΒͳ͍”
    `onCheckedChange`ʹ౉͍ͯ͠ΔϥϜμ͸Composableؔ
    ਺Ͱ͸ͳ͍ͷͰComposableؔ਺ͷείʔϓ֎ͷͨΊɺมߋ
    ͯ͠΋҆શͰ͢ɻ
    ͭ·ΓͲ͏͢Ε͹͍͍ͷ͔ʁ
    https://d.android.com/jetpack/compose/side-effects
    

    View Slide

82. Practice4: Stateͷมߋ͸Composableؔ਺ͷείʔϓ಺
    Ͱߦͬͯ͸ͳΒͳ͍
    ❌ DON’T
    λΠτϧͷ··”Stateͷมߋ͸Composableؔ਺ͷείʔϓ
    ಺Ͱߦͬͯ͸ͳΒͳ͍”
    `onCheckedChange`ʹ౉͍ͯ͠ΔϥϜμ͸Composableؔ
    ਺Ͱ͸ͳ͍ͷͰComposableؔ਺ͷείʔϓ֎ͷͨΊɺมߋ
    ͯ͠΋҆શͰ͢ɻ
    `MySwitch()`͕Compositionʹೖͬͨͱ͖΍ग़ͨͱ͖ʹState
    Λมߋ͍ͨ͠৔߹͸ɺLaunchedEffectͳͲͷSideEffectͷؔ
    ਺ͷར༻Λݕ౼͠·͠ΐ͏ɻ
    ͭ·ΓͲ͏͢Ε͹͍͍ͷ͔ʁ
    https://d.android.com/jetpack/compose/side-effects
    

    View Slide

83. Jetpack ComposeͷStateͷجຊ·ͱΊ
    දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ͞ΕΔΑ͏ʹ͢Δ
    ComposableͷதͰ࡞ΒΕͨState͸remember͞Εͳ͚Ε͹ͳΒͳ͍
    State΁ͷΞΫηε͸KotlinͷDelegated PropertyΛ࢖͓͏
    Stateͷมߋ͸Composableؔ਺ͷείʔϓ಺Ͱߦͬͯ͸ͳΒͳ͍
    01
    02
    03
    04
    

    View Slide

84. Jetpack ComposeͷState؅ཧͷϓϥΫςΟε
    

    View Slide

85. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ
    ೳͰςετՄೳʹ͠Α͏
    

    View Slide

86. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ
    ೳͰςετՄೳʹ͠Α͏
    ⭕ DO
    ❌ DON’T
    

    View Slide

87. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ
    ೳͰςετՄೳʹ͠Α͏
    ⭕ DO
    ❌ DON’T
    DON’T͸Ҿ਺ͳ͠
    

    View Slide

88. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ
    ೳͰςετՄೳʹ͠Α͏
    ⭕ DO
    ❌ DON’T
    DON’T͸Ҿ਺ͳ͠
    ݺͼग़͠ઌͰ

    StateΛ͍࣋ͬͯΔ
    

    View Slide

89. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ
    ೳͰςετՄೳʹ͠Α͏
    ⭕ DO
    ❌ DON’T
    DON’T͸Ҿ਺ͳ͠
    DO͸Ҿ਺Λ౉ͯ͠ɺ
    ϥϜμ΋౉͢
    ݺͼग़͠ઌͰ

    StateΛ͍࣋ͬͯΔ
    

    View Slide

90. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ
    ೳͰςετՄೳʹ͠Α͏
    ⭕ DO
    ❌ DON’T
    DON’T͸Ҿ਺ͳ͠
    DO͸Ҿ਺Λ౉ͯ͠ɺ
    ϥϜμ΋౉͢
    ݺͼग़͠ݩͰ

    StateΛ͍࣋ͬͯΔ
    ݺͼग़͠ઌͰ

    StateΛ͍࣋ͬͯΔ
    

    View Slide

91. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ
    ೳͰςετՄೳʹ͠Α͏
    ⭕ DO
    ❌ DON’T
    

    View Slide

92. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ
    ೳͰςετՄೳʹ͠Α͏
    ⭕ DO
    ❌ DON’T
    DON’TͰ΋ಈ͘͠ྑ͍ͷͰ͸ʁʁͦ΋ͦ΋State hoistingͱ͸ʁʁ
    

    View Slide

93. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ
    ೳͰςετՄೳʹ͠Α͏
    ⭕ DO State hoistingͱ͸ʁ
    StateΛ্ʹ্͛Δ͜ͱͰɺίϯϙʔωϯτ
    ΛStatelessʹ͢Δύλʔϯ

    

    View Slide

94. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ
    ೳͰςετՄೳʹ͠Α͏
    ⭕ DO State hoistingͱ͸ʁ
    StateΛ্ʹ্͛Δ͜ͱͰɺίϯϙʔωϯτ
    ΛStatelessʹ͢Δύλʔϯ

    Composableؔ਺ʹదԠ͢Δ৔߹͸͍͍ͩͨ
    ҎԼ2ͭͷҾ਺Λಋೖ͢Δ͜ͱΛҙຯ͢Δ
    value: T දࣔ͢Δσʔλ
    onValueChange: (T) -> Unit ஋ͷมߋΛཁ
    ٻ͢ΔΠϕϯτ
    

    View Slide

95. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ
    ೳͰςετՄೳʹ͠Α͏
    ⭕ DO State hoistingͱ͸ʁ
    StateΛ্ʹ্͛Δ͜ͱͰɺίϯϙʔωϯτ
    ΛStatelessʹ͢Δύλʔϯ

    DON’TͰ΋ಈ͘͠ྑ͍ͷͰ͸ʁʁ
    Composableؔ਺ʹదԠ͢Δ৔߹͸͍͍ͩͨ
    ҎԼ2ͭͷҾ਺Λಋೖ͢Δ͜ͱΛҙຯ͢Δ
    value: T දࣔ͢Δσʔλ
    onValueChange: (T) -> Unit ஋ͷมߋΛཁ
    ٻ͢ΔΠϕϯτ
    

    View Slide

96. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ
    ೳͰςετՄೳʹ͠Α͏
    ྫ͑͹ɺ͜Ε͕ઃఆը໘ͩͬͨΒɺ
    ࠓͷอଘ͞Ε͍ͯΔઃఆΛ౉ͤΔඞཁ͕͋
    Γ·͕͢ɺ
    Ҿ਺͕ͳ͍ͱ౉ͤͳ͍Ͱ͢ΑͶʁʁ
    ಉ༷ʹ಺෦ʹঢ়ଶΛ࣋ͭͷͰɺ

    ςετ΋೉͘͠ͳΓ·͢ɻ
    DON’Tͷॻ͖ํͰ΋ಈ͘͠ྑ͍ͷͰ͸ʁʁ
    ❌ DON’T
    

    View Slide

97. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ
    ೳͰςετՄೳʹ͠Α͏
    ྫ͑͹ɺ͜Ε͕ઃఆը໘ͩͬͨΒɺ
    ࠓͷอଘ͞Ε͍ͯΔઃఆΛ౉ͤΔඞཁ͕͋
    Γ·͕͢ɺ
    Ҿ਺͕ͳ͍ͱ౉ͤͳ͍Ͱ͢ΑͶʁʁ
    ಉ༷ʹ಺෦ʹঢ়ଶΛ࣋ͭͷͰɺ

    ςετ΋೉͘͠ͳΓ·͢ɻ
    DON’Tͷॻ͖ํͰ΋ಈ͘͠ྑ͍ͷͰ͸ʁʁ
    ❌ DON’T
    

    View Slide

98. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
    hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
    

    View Slide

99. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
    hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
    ӈʹ”on”ɺ”off”ͷTextΛ௥Ճ͢ΔྫͰઆ໌͠·͢ɻ
    

    View Slide

100. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ӈʹ”on”ɺ”off”ͷTextΛ௥Ճ͢ΔྫͰઆ໌͠·͢ɻ
     

     View Slide

101. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ⭕ DO
     ❌ DON’T
     

     View Slide

102. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ⭕ DO
     ❌ DON’T
     

     View Slide

103. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ⭕ DO
     ❌ DON’T
     DOͷྫͰ͸ઌఔͱಉ༷ʹ
     State hoistingͰ࣮૷͍ͯ͠ΔΈ͍ͨ
     

     View Slide

104. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ⭕ DO
     ❌ DON’T
     DOͷྫͰ͸ઌఔͱಉ༷ʹ
     State hoistingͰ࣮૷͍ͯ͠ΔΈ͍ͨ
     ਌͚ͩͰStateΛ͍࣋ͬͯΔ🙆
     

     View Slide

105. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ⭕ DO
     ❌ DON’T
     

     View Slide

106. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ⭕ DO
     ❌ DON’T
     ॳظ஋ͷinitialCheckedΛ
     ౉͍ͯ͠Δ
     

     View Slide

107. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ⭕ DO
     ❌ DON’T
     ॳظ஋ͷinitialCheckedΛ
     ౉͍ͯ͠Δ
     ਌Ͱ΋ࣗ෼Ͱ΋StateΛ
     ؅ཧ͍ͯ͠Δɻ
     

     View Slide

108. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ⭕ DO
     ❌ DON’T
     ॳظ஋ͷinitialCheckedΛ
     ౉͍ͯ͠Δ
     ਌Ͱ΋ࣗ෼Ͱ΋StateΛ
     ؅ཧ͍ͯ͠Δɻ
     ͜ΕͳΒ࠶ར༻Ͱ͖ͯ

     ςετͰ͖ͦ͏͡Όͳ͍ʁʁ🤔
     

     View Slide

109. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ❌ DON’T
     ࣮͸DON’Tͷྫ͸όά͍ͬͯΔ
     ϥϕϧΛԡͯ͠΋εΠονͷঢ়ଶ͕
     ੾Γସ͑Βͳ͍όά͕͋Δ
     ͜͏͍͏όάΛ๷͍͗ͨ😂
     

     View Slide

110. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ❌ DON’T
     ࣮͸DON’Tͷྫ͸όά͍ͬͯΔ
     ϥϕϧΛԡͯ͠΋εΠονͷঢ়ଶ͕
     ੾Γସ͑Βͳ͍όά͕͋Δ
     ͜͏͍͏όάΛ๷͍͗ͨ😂
     

     View Slide

111. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ͳͥState hoisting͢Δͷ͔ʁ
     λΠτϧʹ΋ॻ͍ͯ͋Δͱ͓ΓSingle source of truthʹͰ͖Δͨ
     ΊͰ͢ɻ

     ࠓճͷྫ΋ؤுΕ͹όάΛͳͤ͘Δͱࢥ͍·͕͢ࠓճͷΑ͏ͳ
     όάΛ๷͙ͨΊʹ͸
     

     ⭕ DO
     

     View Slide

112. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ͳͥState hoisting͢Δͷ͔ʁ
     λΠτϧʹ΋ॻ͍ͯ͋Δͱ͓ΓSingle source of truthʹͰ͖Δͨ
     ΊͰ͢ɻ

     ࠓճͷྫ΋ؤுΕ͹όάΛͳͤ͘Δͱࢥ͍·͕͢ࠓճͷΑ͏ͳ
     όάΛ๷͙ͨΊʹ͸
     

     ⭕ DO
     Stateͷෳ੡Λ๷͗ɺStateͷมߋՕॴΛ1ͭʹ͢Δ
     

     View Slide

113. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ͳͥState hoisting͢Δͷ͔ʁ
     λΠτϧʹ΋ॻ͍ͯ͋Δͱ͓ΓSingle source of truthʹͰ͖Δͨ
     ΊͰ͢ɻ

     ࠓճͷྫ΋ؤுΕ͹όάΛͳͤ͘Δͱࢥ͍·͕͢ࠓճͷΑ͏ͳ
     όάΛ๷͙ͨΊʹ͸
     

     ⭕ DO
     Stateͷෳ੡Λ๷͗ɺStateͷมߋՕॴΛ1ͭʹ͢Δ
     มߋෆՄೳ(immutable)ͳStateΛྲྀ͍ͯ͘͠
     

     View Slide

114. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ͳͥState hoisting͢Δͷ͔ʁ
     λΠτϧʹ΋ॻ͍ͯ͋Δͱ͓ΓSingle source of truthʹͰ͖Δͨ
     ΊͰ͢ɻ

     ࠓճͷྫ΋ؤுΕ͹όάΛͳͤ͘Δͱࢥ͍·͕͢ࠓճͷΑ͏ͳ
     όάΛ๷͙ͨΊʹ͸
     

     ⭕ DO
     ͦΕ͕Single source of truthͱݺ͹ΕΔߏ଄Խͷํ๏Ͱ͢ɻ

     ͜ΕΛState hoisting͸Մೳʹ͠·͢ɻ
     Stateͷෳ੡Λ๷͗ɺStateͷมߋՕॴΛ1ͭʹ͢Δ
     มߋෆՄೳ(immutable)ͳStateΛྲྀ͍ͯ͘͠
     

     View Slide

115. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     “গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨
     ͷ਌”ͱ͸Կ͔ʁ
     ⭕ DO
     

     View Slide

116. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState
     hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     “গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨
     ͷ਌”ͱ͸Կ͔ʁ
     ⭕ DO
     ͳͥ“গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌”ʁ
     Single source of truth͕೉͔ͬͨ͠ΓɺͰ͖ͳ͔ͬͨΓ͢ΔͨΊ
     

     View Slide

117. Practice7: ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏
     

     View Slide

118. Practice7: ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏
     ❌ DON’T
     

     View Slide

119. Practice7: ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏
     ❌ DON’T
     ViewModelͷ஋ΛcllectAsStateΛ࢖ͬͯݟ͍ͯΔ
     (ͭ·ΓComposeͷStateΛ࢖͍ͬͯΔ)
     

     View Slide

120. Practice7: ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏
     ⭕ DO
     ❌ DON’T
     

     View Slide

121. Practice7: ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏
     ⭕ DO
     ❌ DON’T
     

     View Slide

122. Practice7: ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏
     ⭕ DO
     ❌ DON’T
     StatefulͱStatelessͰ
     SettingScreenΛ෼͚͍ͯΔɻ
     

     View Slide

123. Practice7: ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏
     ⭕ DO
     ❌ DON’T
     StatefulͱStatelessͰ
     SettingScreenΛ෼͚͍ͯΔɻ
     ͳͥʁ
     

     View Slide

124. Practice7: ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏
     ⭕ DO
     

     View Slide

125. Practice7: ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏
     ⭕ DO
     ͳͥʁ
     

     View Slide

126. Practice7: ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏
     ⭕ DO
     ɾStatelessͷComposableʹ
     ରͯ͠ϓϨϏϡʔ΍ςετ
     Λ͔ΜͨΜʹͰ͖Δ
     ͳͥʁ
     

     View Slide

127. Practice7: ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏
     ⭕ DO
     ɾStatelessͷComposableʹ
     ରͯ͠ϓϨϏϡʔ΍ςετ
     Λ͔ΜͨΜʹͰ͖Δ
     ɾ࠶ར༻ʹ͢Δඞཁ͕͋Δ
     ͱ͖ʹ࠶ར༻͢Δ͜ͱ͕Ͱ
     ͖Δ
     ͳͥʁ
     

     View Slide

128. Practice7: ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏
     ⭕ DO
     ɾStatelessͷComposableʹ
     ରͯ͠ϓϨϏϡʔ΍ςετ
     Λ͔ΜͨΜʹͰ͖Δ
     ɾ࠶ར༻ʹ͢Δඞཁ͕͋Δ
     ͱ͖ʹ࠶ར༻͢Δ͜ͱ͕Ͱ
     ͖Δ
     ͳͥʁ
     

     View Slide

129. Practice8: Architecture ComponentͷViewModelʹ
     CompositionͰอ࣋͞Ε͍ͯΔঢ়ଶΛ౉͞ͳ͍Α͏ʹ͠Α͏
     

     View Slide

130. Practice8: Architecture ComponentͷViewModelʹ
     CompositionͰอ࣋͞Ε͍ͯΔঢ়ଶΛ౉͞ͳ͍Α͏ʹ͠Α͏
     ❌ DON’T
     

     View Slide

131. Practice8: Architecture ComponentͷViewModelʹ
     CompositionͰอ࣋͞Ε͍ͯΔঢ়ଶΛ౉͞ͳ͍Α͏ʹ͠Α͏
     ❌ DON’T
     Composition಺Ͱอ࣋
     

     View Slide

132. Practice8: Architecture ComponentͷViewModelʹ
     CompositionͰอ࣋͞Ε͍ͯΔঢ়ଶΛ౉͞ͳ͍Α͏ʹ͠Α͏
     ❌ DON’T
     Composition಺Ͱอ࣋
     ViewModel಺Ͱอ࣋
     

     View Slide

133. Practice8: Architecture ComponentͷViewModelʹ
     CompositionͰอ࣋͞Ε͍ͯΔঢ়ଶΛ౉͞ͳ͍Α͏ʹ͠Α͏
     ͳͥʁ
     ViewModelͱCompotionͰϥΠϑαΠΫϧ͕ҧ͍ɺViewModelͷ΄͏͕௕ੜ͖͢Δ
     ͷͨΊɻࠓճͰ͸scaffoldStateΛViewModelͰ͍࣋ͬͯΔͱݹ͍scaffoldStateΛ
     ViewModel͕࣋ͪଓ͚ͯϦʔΫ͢ΔͨΊɻ
     ❌ DON’T
     Composition಺Ͱอ࣋
     ViewModel಺Ͱอ࣋
     

     View Slide

134. Practice8: Architecture ComponentͷViewModelʹ
     CompositionͰอ࣋͞Ε͍ͯΔঢ়ଶΛ౉͞ͳ͍Α͏ʹ͠Α͏
     ❌ DON’T
     ViewModelʹॻ͚ͳ͍ͱɺComposableؔ਺ʹ

     scaffoldStateͱ͔͕ͨ͘͞Μग़͖ͯͯ

     UI(Composableؔ਺)ʹͨ͘͞ΜϩδοΫ͕ॻ͔ΕͪΌ͏ͷͰ͸ʁʁ🤔
     → ͦ͜Ͱ࣍ͷϓϥΫςΟε
     

     View Slide

135. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     

     View Slide

136. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     νΣοΫΛม͑ͨΒSnackbar(Լͷࠇ͍όʔ)Λ

     දࣔ͢ΔΑ͏ʹͯ͠Έͨͱ͠·͠ΐ͏ɻ
     ৄ͘͠͸ࠓճઆ໌͠·ͤΜ͕ɺ
     CoroutinesScope͕ग़͖ͯͨΓɺଟগෳࡶʹͳΓ·͢
     

     View Slide

137. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     νΣοΫΛม͑ͨΒSnackbar(Լͷࠇ͍όʔ)Λ

     දࣔ͢ΔΑ͏ʹͯ͠Έͨͱ͠·͠ΐ͏ɻ
     ৄ͘͠͸ࠓճઆ໌͠·ͤΜ͕ɺ
     CoroutinesScope͕ग़͖ͯͨΓɺଟগෳࡶʹͳΓ·͢
     

     View Slide

138. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     rememberScaffoldState()ɺ
     rememberCoroutineScope()ɺ
     settingViewModel.isDarkMode.collectAs
     State()
     ͳͲ͕
     Composableؔ਺ʹೖΓগ͠ෳࡶԽͯ͠
     ͖·ͨ͠ɻɻͲ͏෼͚͍ͯ͜͏ʁ
     ❌ DON’T
     

     View Slide

139. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ͲͷΑ͏ͳ੹຿Ͱ෼͚͍ͯ͘΂͖ͳͷ͔ʁ
     ࢀߟ: https://d.android.com/jetpack/compose/state#state-in-composables
     

     View Slide

140. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     State holder͸ҎԼͷΑ͏ʹґଘΛ࣋ͭ͜ͱ͕Ͱ͖·͢ɻ
     ͭ·ΓComosable͔Βར༻͞ΕΔΑ͏ʹͯ͠ɺViewModel΁ͷґଘΛ࣋ͬͯ΋ྑ͍

     ΋ͷͰ͢ɻ
     State holder
     https://developer.android.com/jetpack/compose/state#managing-state
     

     View Slide

141. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO State holderΛ࢖͏ଆͷίʔυ
     

     View Slide

142. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     ͜͜Ͱ

     SettingScreenState

     ( = State holder)Λ࡞ͬͯ
     Composition಺Ͱอ࣋͢Δ
     State holderΛ࢖͏ଆͷίʔυ
     

     View Slide

143. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     ͜͜Ͱ

     SettingScreenState

     ( = State holder)Λ࡞ͬͯ
     Composition಺Ͱอ࣋͢Δ
     SettingScreenStateͰอ͍࣋ͯ͠Δ
     ஋Λ࢖͏͚ͩ
     State holderΛ࢖͏ଆͷίʔυ
     

     View Slide

144. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     ❌ DON’T
     

     View Slide

145. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     State holderΛ࢖͏ଆ͸͜Ε͚ͩɻ͔ͳΓγϯϓϧʹɻ
     ❌ DON’T
     

     View Slide

146. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     State holderΛ࢖͏ଆ͸͜Ε͚ͩɻ͔ͳΓγϯϓϧʹɻ
     ❌ DON’T
     SettingScreenStateͷதΛݟ͍ͯ͜͏
     

     View Slide

147. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     SettingScreenState͕State holderͰ͢
     ૣ଎ݟͯΈ·͠ΐ͏
     

     View Slide

148. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     

     View Slide

149. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     SettingScreenState͸
     Կ΋ܧঝ͠ͳ͍ͨͩͷΫϥεɻ
     Compose֎ͷϥΠϑαΠΫϧʹ
     റΒΕͳ͍Α͏ʹ͍ͯ͠Δ
     

     View Slide

150. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     

     View Slide

151. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     ଞͷComposeͷStateΛ

     ࣋ͭ͜ͱ͕Ͱ͖Δ
     

     View Slide

152. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     

     View Slide

153. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     ϏδωεϩδοΫ΍ը໘ͷঢ়ଶʹ
     ΞΫηε͢ΔͨΊʹViewModelʹ
     ΋ґଘͰ͖Δ
     

     View Slide

154. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     

     View Slide

155. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     Composeͷঢ়ଶΛݟΔͨΊʹ

     ม਺ͳͲΛComposableؔ਺ʹ͢
     Δ͜ͱ͕Ͱ͖Δ
     

     View Slide

156. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     

     View Slide

157. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ⭕ DO
     remember{}Λ࢖ͬͯ Composition
     ಺ͰState holderΛอ࣋͢Δ
     

     View Slide

158. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ͦ΋ͦ΋Composeͷ։ൃͰViewModelͳ͠ͰɺState holder͚ͩͰྑ͍ͷͰ͸ʁʁ
     ݱঢ়ͰͷAndroidͷ։ൃͰ͸ඞཁ
     ը໘ճసͳͲͷConfiguration changeΛ௨ͯ͠ੜ͖࢒Δ
     Navigationͱͷ౷߹ʹΑͬͯόοΫελοΫͷը໘ͷ৘ใΛอ͓͚࣋ͯ͠Δ
     HiltͳͲͱ͍ͬͨJetpackϥΠϒϥϦͷ౷߹
     ࢀߟ: https://developer.android.com/jetpack/compose/state#viewmodel-state
     

     View Slide

159. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     ͳͥComposableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏ʹ͢Δ΂͖ͳͷ͔ʁ
     ؔ৺ࣄͷ෼཭ͯ͠ɺ
     ςετ΍ϓϨϏϡʔΛՄೳʹ͢ΔͨΊ
     ࢀߟ: https://developer.android.com/jetpack/compose/state#viewmodel-state
     

     View Slide

160. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏
     ʹ͠Α͏
     Ͳ͏͍ͯ͘͠΂͖ͳͷ͔ʁ
     State holder͸ෳࡶͳUIͷཁૉͷState؅ཧ͢Δ΋ͷɻ

     ෳࡶʹͳΕ͹ͳΔ΄ͲState holderͷඞཁੑ͕૿͍͑ͯ͘ͷͰɺ

     ෳࡶʹͳΕ͹ݕ౼ͯ͠ΈΑ͏ɻ
     ࢀߟ: https://d.android.com/jetpack/compose/state#state-in-composables
     

     View Slide

161. Jetpack ComposeͷState؅ཧͷϓϥΫςΟε·ͱΊ
     State hoistingͰComposableؔ਺Λ࠶ར༻ՄೳͰςετՄೳʹ͠Α͏
     State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState hoisting͸গ
     ͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ
     ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏
     Architecture ComponentͷViewModelʹCompositionͰอ࣋͞Ε͍ͯΔ
     ঢ়ଶΛ౉͞ͳ͍Α͏ʹ͠Α͏
     Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏ʹ͠Α͏
     05
     06

     07
     08

     09
     

     View Slide

162. ·ͱΊ
     ɾState = ঢ়ଶͱ͸ʁ “࣌ؒͱͱ΋ʹมԽ͢ΔՄೳੑ͕͋Δ஋͢΂ͯ”ɻ
     ɾJetpack ComposeͰStateΛ؅ཧ͍ͯͨ͘͠Ίͷ9ݸͷϓϥΫςΟεΛ
     ঺հ͠·ͨ͠ɻ
     ɾͪΌΜͱಈ͔͢ʹ͸Jetpack Compose΁ͷཧղ͕ඞཁɻ
     ɾߟ͑ํͷجຊͱͳΔ෦෼͸Single source of truth΍ؔ৺ࣄ
     ͷ෼཭ͳͲɻ஌͓ͬͯ͘ͱComposeҎ֎Ͱ΋໾ʹཱ͔ͭ΋͠
     Ε·ͤΜɻ
     

     View Slide