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

Jetpack Compose State Practices

7166bc2cbc462ab5fd1987a76d0fe709?s=47 takahirom
December 11, 2021

Jetpack Compose State Practices

7166bc2cbc462ab5fd1987a76d0fe709?s=128

takahirom

December 11, 2021
Tweet

Transcript

  1. Jetpack Compose State Practices takahirom

  2. ࣗ෼ʹ͍ͭͯɹ takahirom • Takahiro Menju • Androidʹؔ͢Δٕज़͕޷͖ • DroidKaigi co-organizer

    • Google Developers Expert for Android • CyberAgent.Inc ABEMA • Twitter takahirom (@new_runnable) • GitHub takahirom
  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

  4. Jetpack Composeͱ͸ʁ “Jetpack Compose ͸ɺωΠςΟϒ UI ΛϏϧυ͢ΔͨΊͷ Android ͷ࠷৽πʔϧΩοτ Ͱ͢ɻAndroid

    ͷ UI ։ൃΛ؆ૉԽ͠ɺՃ଎͠·͢ɻগͳ͍ίʔυɺύϫϑϧͳπʔϧɺ ௚ײతͳ Kotlin API Λ࢖༻ͯ͠ΞϓϦΛ͙͢ʹಈ͔͢͜ͱ͕Ͱ͖·͢ɻ” https://d.android.com/jetpack/compose?hl=ja
  5. Jetpack ComposeΛগ͠ݟͯΈΔ @Composable fun HelloWorld(){ Column { Text(text = "Hello")

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

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

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

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

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

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

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

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


    ͔ͳΓ·ͱ·͍ͬͯ·͕͢
 DO DON’TͷܗࣜͰ͸ͳ͘ɺ
 ͋·Γ޿·͍ͬͯͳ͍ͷͰɻ
 ͦΕΛϦετԽͯ͠঺հ͍͖ͯ͠·͢ɻ https://www.youtube.com/watch?v=rmv2ug-wW4U
  14. Jetpack ComposeͷStateͷجຊ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Λอ͍࣋ͯ͠ΔͨΊɺ Compose͸MutableState͕มߋ͞Εͨͱ͖ʹ StateΛಡΈࠐΜͰ͍ΔComposableؔ਺Λݺͼ ग़͠·͢ɻ(ྫ֎͕͋Γগ͠ਖ਼֬Ͱ͸ͳ͍ͷͰ͕͢େମͦ͏Ͱ͢)
  40. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ ͞ΕΔΑ͏ʹ͢Δ ͳͥMySwitch()͸΋͏Ұ౓ಈ͘ͷ͔ʁ ࣮͸Jetpack ComposeͰ͸StateͷಡΈࠐΈ͕ ؂ࢹ͞Ε͓ͯΓɺ Compose͸MySwitch()͕MutableState.valueΛಡΜͩ͜ͱΛ஌͍ͬͯΔਤ Jetpack Compose͸MutableStateʹ


    ରͯ͠ಡΈࠐΈͨ͠Composableؔ਺ Λอ͍࣋ͯ͠ΔͨΊɺ Compose͸MutableState͕มߋ͞Εͨͱ͖ʹ StateΛಡΈࠐΜͰ͍ΔComposableؔ਺Λݺͼ ग़͠·͢ɻ(ྫ֎͕͋Γগ͠ਖ਼֬Ͱ͸ͳ͍ͷͰ͕͢େମͦ͏Ͱ͢)
  41. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ ͞ΕΔΑ͏ʹ͢Δ ͭ·ΓͲ͏͢Ε͹͍͍ͷ͔ʁ ⭕ DO

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  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ʹอ࣋͞ΕɺͦΕ͕࣍ͷݺͼग़͠Ͱ࢖ΘΕΔ
  65. Practice2: ComposableͷதͰ࡞ΒΕͨState͸ remember͞Εͳ͚Ε͹ͳΒͳ͍ ❌ DON’T ⭕ DO ͭ·ΓͲ͏͢Ε͹͍͍ͷ͔ʁ

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

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

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

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

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

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

    valͰ͸ͳ͘มߋՄೳͳvarΛ࢖͍ͬͯΔ
  72. Practice3: State΁ͷΞΫηε͸KotlinͷDelegated PropertyΛ࢖͓͏ ⭕ DO

  73. Practice3: State΁ͷΞΫηε͸KotlinͷDelegated PropertyΛ࢖͓͏ ⭕ DO ͳͥʁ ୯७ʹStateͷvalue΁ͷΞΫηεΛ
 ҙࣝ͠ͳͯ͘ྑ͘ͳΔͨΊɻ

  74. Practice3: State΁ͷΞΫηε͸KotlinͷDelegated PropertyΛ࢖͓͏ ⭕ DO ͳͥʁ ୯७ʹStateͷvalue΁ͷΞΫηεΛ
 ҙࣝ͠ͳͯ͘ྑ͘ͳΔͨΊɻ ஫ҙ఺⚠ ҎԼͷimport͕ͳ͍ͱಈ͔ͳ͍ͷͰ஫ҙʂ

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

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

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

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

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

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

  81. Practice4: Stateͷมߋ͸Composableؔ਺ͷείʔϓ಺ Ͱߦͬͯ͸ͳΒͳ͍ ❌ DON’T λΠτϧͷ··”Stateͷมߋ͸Composableؔ਺ͷείʔϓ ಺Ͱߦͬͯ͸ͳΒͳ͍” `onCheckedChange`ʹ౉͍ͯ͠ΔϥϜμ͸Composableؔ ਺Ͱ͸ͳ͍ͷͰComposableؔ਺ͷείʔϓ֎ͷͨΊɺมߋ ͯ͠΋҆શͰ͢ɻ

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

    `MySwitch()`͕Compositionʹೖͬͨͱ͖΍ग़ͨͱ͖ʹState Λมߋ͍ͨ͠৔߹͸ɺLaunchedEffectͳͲͷSideEffectͷؔ ਺ͷར༻Λݕ౼͠·͠ΐ͏ɻ ͭ·ΓͲ͏͢Ε͹͍͍ͷ͔ʁ https://d.android.com/jetpack/compose/side-effects
  83. Jetpack ComposeͷStateͷجຊ·ͱΊ දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ͞ΕΔΑ͏ʹ͢Δ ComposableͷதͰ࡞ΒΕͨState͸remember͞Εͳ͚Ε͹ͳΒͳ͍ State΁ͷΞΫηε͸KotlinͷDelegated PropertyΛ࢖͓͏ Stateͷมߋ͸Composableؔ਺ͷείʔϓ಺Ͱߦͬͯ͸ͳΒͳ͍ 01 02 03

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

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

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

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

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


    StateΛ͍࣋ͬͯΔ
  89. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ ೳͰςετՄೳʹ͠Α͏ ⭕ DO ❌ DON’T DON’T͸Ҿ਺ͳ͠ DO͸Ҿ਺Λ౉ͯ͠ɺ

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

    ϥϜμ΋౉͢ ݺͼग़͠ݩͰ
 StateΛ͍࣋ͬͯΔ ݺͼग़͠ઌͰ
 StateΛ͍࣋ͬͯΔ
  91. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ ೳͰςετՄೳʹ͠Α͏ ⭕ DO ❌ DON’T

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

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


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


    Composableؔ਺ʹదԠ͢Δ৔߹͸͍͍ͩͨ ҎԼ2ͭͷҾ਺Λಋೖ͢Δ͜ͱΛҙຯ͢Δ value: T දࣔ͢Δσʔλ onValueChange: (T) -> Unit ஋ͷมߋΛཁ ٻ͢ΔΠϕϯτ
  95. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ ೳͰςετՄೳʹ͠Α͏ ⭕ DO State hoistingͱ͸ʁ StateΛ্ʹ্͛Δ͜ͱͰɺίϯϙʔωϯτ ΛStatelessʹ͢Δύλʔϯ


    DON’TͰ΋ಈ͘͠ྑ͍ͷͰ͸ʁʁ Composableؔ਺ʹదԠ͢Δ৔߹͸͍͍ͩͨ ҎԼ2ͭͷҾ਺Λಋೖ͢Δ͜ͱΛҙຯ͢Δ value: T දࣔ͢Δσʔλ onValueChange: (T) -> Unit ஋ͷมߋΛཁ ٻ͢ΔΠϕϯτ
  96. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ ೳͰςετՄೳʹ͠Α͏ ྫ͑͹ɺ͜Ε͕ઃఆը໘ͩͬͨΒɺ ࠓͷอଘ͞Ε͍ͯΔઃఆΛ౉ͤΔඞཁ͕͋ Γ·͕͢ɺ Ҿ਺͕ͳ͍ͱ౉ͤͳ͍Ͱ͢ΑͶʁʁ ಉ༷ʹ಺෦ʹঢ়ଶΛ࣋ͭͷͰɺ
 ςετ΋೉͘͠ͳΓ·͢ɻ

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

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

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

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

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

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

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

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

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

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

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

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

    DON’T ॳظ஋ͷinitialCheckedΛ ౉͍ͯ͠Δ ਌Ͱ΋ࣗ෼Ͱ΋StateΛ ؅ཧ͍ͯ͠Δɻ ͜ΕͳΒ࠶ར༻Ͱ͖ͯ
 ςετͰ͖ͦ͏͡Όͳ͍ʁʁ🤔
  109. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ ❌ DON’T ࣮͸DON’Tͷྫ͸όά͍ͬͯΔ

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

    ϥϕϧΛԡͯ͠΋εΠονͷঢ়ଶ͕ ੾Γସ͑Βͳ͍όά͕͋Δ ͜͏͍͏όάΛ๷͍͗ͨ😂
  111. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ ͳͥState hoisting͢Δͷ͔ʁ λΠτϧʹ΋ॻ͍ͯ͋Δͱ͓ΓSingle

    source of truthʹͰ͖Δͨ ΊͰ͢ɻ
 ࠓճͷྫ΋ؤுΕ͹όάΛͳͤ͘Δͱࢥ͍·͕͢ࠓճͷΑ͏ͳ όάΛ๷͙ͨΊʹ͸ 
 ⭕ DO
  112. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ ͳͥState hoisting͢Δͷ͔ʁ λΠτϧʹ΋ॻ͍ͯ͋Δͱ͓ΓSingle

    source of truthʹͰ͖Δͨ ΊͰ͢ɻ
 ࠓճͷྫ΋ؤுΕ͹όάΛͳͤ͘Δͱࢥ͍·͕͢ࠓճͷΑ͏ͳ όάΛ๷͙ͨΊʹ͸ 
 ⭕ DO Stateͷෳ੡Λ๷͗ɺStateͷมߋՕॴΛ1ͭʹ͢Δ
  113. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ ͳͥState hoisting͢Δͷ͔ʁ λΠτϧʹ΋ॻ͍ͯ͋Δͱ͓ΓSingle

    source of truthʹͰ͖Δͨ ΊͰ͢ɻ
 ࠓճͷྫ΋ؤுΕ͹όάΛͳͤ͘Δͱࢥ͍·͕͢ࠓճͷΑ͏ͳ όάΛ๷͙ͨΊʹ͸ 
 ⭕ DO Stateͷෳ੡Λ๷͗ɺStateͷมߋՕॴΛ1ͭʹ͢Δ มߋෆՄೳ(immutable)ͳStateΛྲྀ͍ͯ͘͠
  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Λྲྀ͍ͯ͘͠
  115. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ “গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ ͷ਌”ͱ͸Կ͔ʁ ⭕

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

    DO ͳͥ“গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌”ʁ Single source of truth͕೉͔ͬͨ͠ΓɺͰ͖ͳ͔ͬͨΓ͢ΔͨΊ
  117. Practice7: ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Composition಺Ͱอ࣋ ViewModel಺Ͱอ࣋
  134. Practice8: Architecture ComponentͷViewModelʹ CompositionͰอ࣋͞Ε͍ͯΔঢ়ଶΛ౉͞ͳ͍Α͏ʹ͠Α͏ ❌ DON’T ViewModelʹॻ͚ͳ͍ͱɺComposableؔ਺ʹ
 scaffoldStateͱ͔͕ͨ͘͞Μग़͖ͯͯ
 UI(Composableؔ਺)ʹͨ͘͞ΜϩδοΫ͕ॻ͔ΕͪΌ͏ͷͰ͸ʁʁ🤔 →

    ͦ͜Ͱ࣍ͷϓϥΫςΟε
  135. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏ ʹ͠Α͏

  136. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏ ʹ͠Α͏ νΣοΫΛม͑ͨΒSnackbar(Լͷࠇ͍όʔ)Λ
 දࣔ͢ΔΑ͏ʹͯ͠Έͨͱ͠·͠ΐ͏ɻ ৄ͘͠͸ࠓճઆ໌͠·ͤΜ͕ɺ CoroutinesScope͕ग़͖ͯͨΓɺଟগෳࡶʹͳΓ·͢

  137. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏ ʹ͠Α͏ νΣοΫΛม͑ͨΒSnackbar(Լͷࠇ͍όʔ)Λ
 දࣔ͢ΔΑ͏ʹͯ͠Έͨͱ͠·͠ΐ͏ɻ ৄ͘͠͸ࠓճઆ໌͠·ͤΜ͕ɺ CoroutinesScope͕ग़͖ͯͨΓɺଟগෳࡶʹͳΓ·͢

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

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

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

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

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

    holder)Λ࡞ͬͯ Composition಺Ͱอ࣋͢Δ State holderΛ࢖͏ଆͷίʔυ
  143. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏ ʹ͠Α͏ ⭕ DO ͜͜Ͱ
 SettingScreenState
 ( = State

    holder)Λ࡞ͬͯ Composition಺Ͱอ࣋͢Δ SettingScreenStateͰอ͍࣋ͯ͠Δ ஋Λ࢖͏͚ͩ State holderΛ࢖͏ଆͷίʔυ
  144. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏ ʹ͠Α͏ ⭕ DO ❌ DON’T

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  160. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏ ʹ͠Α͏ Ͳ͏͍ͯ͘͠΂͖ͳͷ͔ʁ State holder͸ෳࡶͳUIͷཁૉͷState؅ཧ͢Δ΋ͷɻ
 ෳࡶʹͳΕ͹ͳΔ΄ͲState holderͷඞཁੑ͕૿͍͑ͯ͘ͷͰɺ
 ෳࡶʹͳΕ͹ݕ౼ͯ͠ΈΑ͏ɻ ࢀߟ:

    https://d.android.com/jetpack/compose/state#state-in-composables
  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
  162. ·ͱΊ ɾState = ঢ়ଶͱ͸ʁ “࣌ؒͱͱ΋ʹมԽ͢ΔՄೳੑ͕͋Δ஋͢΂ͯ”ɻ ɾJetpack ComposeͰStateΛ؅ཧ͍ͯͨ͘͠Ίͷ9ݸͷϓϥΫςΟεΛ ঺հ͠·ͨ͠ɻ ɾͪΌΜͱಈ͔͢ʹ͸Jetpack Compose΁ͷཧղ͕ඞཁɻ

    ɾߟ͑ํͷجຊͱͳΔ෦෼͸Single source of truth΍ؔ৺ࣄ ͷ෼཭ͳͲɻ஌͓ͬͯ͘ͱComposeҎ֎Ͱ΋໾ʹཱ͔ͭ΋͠ Ε·ͤΜɻ