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

Jetpack Compose State Practices

takahirom
December 11, 2021

Jetpack Compose State Practices

takahirom

December 11, 2021
Tweet

More Decks by takahirom

Other Decks in Programming

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Ҏ֎Ͱ΋໾ʹཱ͔ͭ΋͠ Ε·ͤΜɻ