Tweet
Tweet

Slide 1

Slide 1 text

Jetpack Compose State Practices takahirom

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Jetpack ComposeΛ࣮ࡍʹಋೖ͍ͯͨ͘͠Ίʹ جຊతͳJetpack Composeͷॻ͖ํ͸ͳΜͱͳ͘෼͔͕ͬͨɺ࣮ࡍJetpack ComposeͰͲ͏ॻ͍ ͍ͯͬͨΒ͍͍ͷ͔ʁ ԿΛ͢Δ΂͖ͰԿΛ͢Δ΂͖Ͱ͸ͳ͍ͷ͔ʁ Stateͷѻ͍ํʹ͍ͭͯ͜ͷAndroid Dev SummitͷηογϣϯͰ
 ͔ͳΓ·ͱ·͍ͬͯ·͕͢
 DO DON’TͷܗࣜͰ͸ͳ͘ɺ
 ͋·Γ޿·͍ͬͯͳ͍ͷͰɻ
 ͦΕΛϦετԽͯ͠঺հ͍͖ͯ͠·͢ɻ https://www.youtube.com/watch?v=rmv2ug-wW4U

Slide 14

Slide 14 text

Jetpack ComposeͷStateͷجຊ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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ʹอ࣋͞ΕɺͦΕ͕࣍ͷݺͼग़͠Ͱ࢖ΘΕΔ

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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


Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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Λྲྀ͍ͯ͘͠

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

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

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

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

Slide 151

Slide 151 text

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

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

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

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text

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

Slide 159

Slide 159 text

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

Slide 160

Slide 160 text

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

Slide 161

Slide 161 text

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

Slide 162

Slide 162 text

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