Tweet
Tweet

Slide 1

Slide 1 text

Angular with RxJS

Slide 2

Slide 2 text

3Y+4ͷجૅ 3Y+4Λ࢖͍͍ͨϞνϕʔγϣϯ 3Y+4Λ"OHVMBSͰ࢖͍ͬͯͨ͘Ίʹ͸ 3Y+4Λ׆༻ͯ͠"OHVMBS$PNQPOFOUΛ࣮૷͢Δ 3Y+4ͷςετʹ͍ͭͯ

Slide 3

Slide 3 text

RxJSͷجૅ

Slide 4

Slide 4 text

RxJSͷجૅ 3Y+4͸ɺ؂ࢹՄೳͳγʔέϯεΛ࢖༻ͯ͠ඇಉظ͓Αͼ ΠϕϯτϕʔεͷϓϩάϥϜΛ࡞੒͢ΔͨΊͷϥΠϒϥϦͰ͢ IUUQTSYKTEFWpSFCBTFBQQDPNHVJEFPWFSWJFX

Slide 5

Slide 5 text

"OHVMBSͷఏڙ͍ͯ͠Δ.PEVMF͸ɺ͜ͷ3Y+4ϕʔεͷΠϯλʔϑΣʔεʹͳ͍ͬͯΔ΋ͷ͕ଟ͍ )UUQ$MJFOU 'PSN$POUSPM "DUJWBUFE3PVUF FUD RxJSͷجૅ

Slide 6

Slide 6 text

جຊߏ੒ Observable Subject Operator RxJSͷجૅ

Slide 7

Slide 7 text

جຊߏ੒ Observable Subject Operator RxJSͷجૅ ͍ͩͿͬ͘͟Γͨ͠આ໌ʹͳΔͷͰɺৄࡉ͸υΩϡϝϯτΛಡΉ͜ͱΛ͓͢͢Ί͠·͢ʜ

Slide 8

Slide 8 text

جຊߏ੒ Observable Subject Operator Observable RxJSͷجૅ ετϦʔϜͷΑ͏ͳ΋ͷɻ TVCTDSJCF͢Δ͜ͱͰɺ಺෦Ͱൃߦ͞Εͨ஋Λड͚औΔ͜ͱ͕Ͱ͖Δɻ

Slide 9

Slide 9 text

جຊߏ੒ Observable Subject Operator Observable RxJSͷجૅ ετϦʔϜͷΑ͏ͳ΋ͷɻ TVCTDSJCF͢Δ͜ͱͰɺ಺෦Ͱൃߦ͞Εͨ஋Λड͚औΔ͜ͱ͕Ͱ͖Δɻ

Slide 10

Slide 10 text

جຊߏ੒ Observable Subject Operator Observable RxJSͷجૅ ετϦʔϜͷΑ͏ͳ΋ͷɻ TVCTDSJCF͢Δ͜ͱͰɺ಺෦Ͱൃߦ͞Εͨ஋Λड͚औΔ͜ͱ͕Ͱ͖Δɻ

Slide 11

Slide 11 text

جຊߏ੒ Observable Subject Operator Observable RxJSͷجૅ 0CTFSWBCMFͩͱɺ֎෦͔Β஋ͷൃߦΛߦ͏͜ͱ͕Ͱ͖ͳ͍ɻ

Slide 12

Slide 12 text

جຊߏ੒ Observable Subject Operator Observable RxJSͷجૅ https://rxjs-dev.firebaseapp.com/guide/observable ৄ͘͠͸ͪ͜Β

Slide 13

Slide 13 text

جຊߏ੒ Observable Subject Operator Operator RxJSͷجૅ ετϦʔϜʹྲྀΕΔ஋ʹԿ͔͠Βͷૢ࡞Λߦ͏ؔ਺ɻ ྫɿNBQΦϖϨʔλ͸ɺҾ਺ʹࢦఆ͞Εͨؔ਺ͷฦΓ஋ΛετϦʔϜʹྲྀ͢ɻ

Slide 14

Slide 14 text

جຊߏ੒ Observable Subject Operator Operator RxJSͷجૅ ετϦʔϜʹྲྀΕΔ஋ʹԿ͔͠Βͷૢ࡞Λߦ͏ؔ਺ɻ ྫɿNBQΦϖϨʔλ͸ɺҾ਺ʹࢦఆ͞Εͨؔ਺ͷฦΓ஋ΛετϦʔϜʹྲྀ͢ɻ

Slide 15

Slide 15 text

جຊߏ੒ Observable Subject Operator Operator RxJSͷجૅ ετϦʔϜʹྲྀΕΔ஋ʹԿ͔͠Βͷૢ࡞Λߦ͏ؔ਺ɻ ྫɿNBQΦϖϨʔλ͸ɺҾ਺ʹࢦఆ͞Εͨؔ਺ͷฦΓ஋ΛετϦʔϜʹྲྀ͢ɻ

Slide 16

Slide 16 text

جຊߏ੒ Observable Subject Operator Operator RxJSͷجૅ ετϦʔϜʹྲྀΕΔ஋ʹԿ͔͠Βͷૢ࡞Λߦ͏ؔ਺ɻ ྫɿNBQΦϖϨʔλ͸ɺҾ਺ʹࢦఆ͞Εͨؔ਺ͷฦΓ஋ΛετϦʔϜʹྲྀ͢ɻ

Slide 17

Slide 17 text

جຊߏ੒ Observable Subject Operator Operator RxJSͷجૅ https://rxjs-dev.firebaseapp.com/guide/operators ৄ͘͠͸ͪ͜Β

Slide 18

Slide 18 text

جຊߏ੒ Observable Subject Operator Subject RxJSͷجૅ 0CTFSWBCMF ֎෦͔Β஋ΛൃߦͰ͖ΔΑ͏ʹͨ͠΋ͷɻ

Slide 19

Slide 19 text

جຊߏ੒ Observable Subject Operator Subject RxJSͷجૅ https://rxjs-dev.firebaseapp.com/guide/subject ৄ͘͠͸ͪ͜Β

Slide 20

Slide 20 text

஋ͷมԽ΍ΠϕϯτͷൃՐΛݕ஌͠ɺͦΕΛτϦΨʹॲཧΛߦ͏͜ͱ͕Ͱ͖Δ RxJSͷجૅ

Slide 21

Slide 21 text

Ϙλϯ͕ΫϦοΫ͞Εͨ࣌ʹɺDPOTPMFʹFWFOUΛදࣔ͢Δ RxJSͷجૅ

Slide 22

Slide 22 text

JUFNTͷ஋ʹมԽ͕͋ͬͨ࣌ʹɺαʔόଆͱ஋Λಉظ͢Δ RxJSͷجૅ

Slide 23

Slide 23 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ

Slide 24

Slide 24 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ݸਓతͳݟղΛ࿩͠·͢

Slide 25

Slide 25 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ 8FCΞϓϦέʔγϣϯ͸ෳࡶ ؅ཧ͢Δঢ়ଶ͕ଟ͍ ϋϯυϦϯά͢ΔΠϕϯτ͕ଟ͍ ը໘͔ΒͷΠϕϯτ΍αʔόͱͷ΍ΓͱΓͳͲ

Slide 26

Slide 26 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ࣮૷͍ͯ࣌͘͠ʹҙࣝ͢ΔϙΠϯτ Ͳ͏͍͏Πϕϯτ΍ঢ়ଶͷมԽ͕͋ͬͨ࣌ʹɺͲ͏͍͏ॲཧΛ΍Βͳ͍ͱ͍͚ͳ͍ͷ͔

Slide 27

Slide 27 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ࣮૷͍ͯ࣌͘͠ʹҙࣝ͢ΔϙΠϯτ Ͳ͏͍͏Πϕϯτ΍ঢ়ଶͷมԽ͕͋ͬͨ࣌ʹɺͲ͏͍͏ॲཧΛ΍Βͳ͍ͱ͍͚ͳ͍ͷ͔ ͱ͍͏ͱ͜Ζʹͳͬͯ͘Δؾ͕͢Δ

Slide 28

Slide 28 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ྫ͑͹ʜ

Slide 29

Slide 29 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ಈըΛΫϦοΫͨ͠ͱ͖ɺಈըͷ࠶ੜը໘ʹભҠ͢Δ :PV5VCF

Slide 30

Slide 30 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ *TTVFʹ)PWFSͨ͠ͱ͖ɺ*TTVF৘ใΛϙοϓΞοϓදࣔ͢Δ (JU)VC

Slide 31

Slide 31 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ จࣈͰ΋ೖྗ͞Ε͍ͯͨͱ͖ɺૹ৴ϘλϯΛΞΫςΟϒʹ͢Δ (PPHMF$IBU

Slide 32

Slide 32 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ͲΕ͔ͷදࣔ৚͕݅มߋ͞Εͨͱ͖ɺ৚݅ʹجͮ͘σʔλͷ࠶औಘΛߦ͍͍ͨ "TBOB

Slide 33

Slide 33 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ༧ఆΛ࡞੒͢Δ࣌ʹ͕࣌ؒมߋ͞Εͨͱ͖ɺΧϨϯμʔ্ͷ֘౰࣌ؒଳʹΧʔυ͕දࣔ͞ΕΔ (PPHMF$BMFOEBS

Slide 34

Slide 34 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ஋ͷมԽ΍ΠϕϯτͷൃՐΛݕ஌͠ɺͦΕΛτϦΨʹॲཧΛߦ͏͜ͱ͕Ͱ͖Δ ʮ999ͨ͠ͱ͖ɺ:::Λߦ͏ʯͱ͍͏ϢʔεέʔεΛએݴతʹ࣮૷Ͱ͖Δ 3Y+4Λ࢖͏ͱ

Slide 35

Slide 35 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ಈըΛΫϦοΫͨ͠ͱ͖ɺಈըͷ࠶ੜը໘ʹભҠ͢Δ

Slide 36

Slide 36 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ จࣈͰ΋ೖྗ͞Ε͍ͯͨͱ͖ɺૹ৴ϘλϯΛΞΫςΟϒʹ͢Δ

Slide 37

Slide 37 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ༧ఆΛ࡞੒͢Δ࣌ʹ͕࣌ؒมߋ͞Εͨͱ͖ɺΧϨϯμʔ্ͷ֘౰࣌ؒଳʹΧʔυ͕දࣔ͞ΕΔ

Slide 38

Slide 38 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ͲΕ͔ͷදࣔ৚͕݅มߋ͞Εͨͱ͖ɺ৚݅ʹجͮ͘σʔλͷ࠶औಘΛߦ͍͍ͨ

Slide 39

Slide 39 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ͲΕ͔ͷදࣔ৚͕݅มߋ͞Εͨͱ͖ɺ৚݅ʹجͮ͘σʔλͷ࠶औಘΛߦ͍͍ͨ දࣔ৚͕݅มߋ͞Εͨͱ͖ɺ-PDBM4UPSBHFʹ৚݅Λอଘ͍ͨ͠

Slide 40

Slide 40 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ͲΕ͔ͷදࣔ৚͕݅มߋ͞Εͨͱ͖ɺ৚݅ʹجͮ͘σʔλͷ࠶औಘΛߦ͍͍ͨ දࣔ৚͕݅มߋ͞Εͨͱ͖ɺ-PDBM4UPSBHFʹ৚݅Λอଘ͍ͨ͠ طଘͷ࣮૷ʹӨڹΛ༩͑Δ͜ͱͳ͘ɺؔ৺͝ͱʹ࣮૷Λ௥ՃͰ͖Δ

Slide 41

Slide 41 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ʮ999ͨ͠ͱ͖ɺ:::Λߦ͏ʯͱ͍͏ϢʔεέʔεΛಉ͡Α͏ͳߏจͰએݴతʹ࣮૷Ͱ͖Δ 3Y+4Λ࢖͏ͱ

Slide 42

Slide 42 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ "OHVMBSͷ50%0ΞϓϦέʔγϣϯͷαϯϓϧ 3Y+4Λ࢖Θͳ͍࣮૷ྫ

Slide 43

Slide 43 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ 3Y+4Λ࢖Θͳ͍࣮૷ྫ

Slide 44

Slide 44 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ UIJTJUFNT·ͨ͸ϑΟϧλ৚݅ʹมߋ͕͋ͬͨͱ͖ɺ UIJTpMUFSFE*UFNTΛߋ৽͢Δඞཁ͕͋Δ 3Y+4Λ࢖Θͳ͍࣮૷ྫ ͦΕͧΕͷϝιουͷதͰɺ ຊདྷ΍Γ͍ͨ͜ͱҎ֎ͷॲཧ͕ߦΘΕͯΔ

Slide 45

Slide 45 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ "OHVMBSͷ50%0ΞϓϦέʔγϣϯͷαϯϓϧ 3Y+4Λ࢖࣮ͬͨ૷ྫ

Slide 46

Slide 46 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ 3Y+4Λ࢖࣮ͬͨ૷ྫ

Slide 47

Slide 47 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ 3Y+4Λ࢖࣮ͬͨ૷ྫ pMUFSFE*UFNT͸ɺ UIJTJUFNT·ͨ͸UIJTpMUFS$POEJUJPOʹมԽ͕͋ͬͨͱ͖ɺ DPOEJUJPOʹΑͬͯJUFNT͕ϑΟϧλ͞Εͨ஋Ͱ͋Δɻ

Slide 48

Slide 48 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ 3Y+4Λ࢖࣮ͬͨ૷ྫ BEE͞Εͨͱ͖ɺJUFNTʹ৽͍͠JUFN͕௥Ճ͞ΕΔ SFNPWF͞Εͨͱ͖ɺJUFNT͔Βର৅ͷJUFN͕࡟আ͞ΕΔ

Slide 49

Slide 49 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ ʮ999ͨ͠ͱ͖ɺ:::Λߦ͏ʯͱ͍͏ϢʔεέʔεΛಉ͡Α͏ͳߏจͰએݴతʹ࣮૷Ͱ͖Δ 3Y+4Λ࢖͏ͱ ɾ࣮૷͢Δͱ͖͸ɺ࣮૷͢ΔϢʔεέʔεͷΈʹؔ৺Λ෷͑͹͍͍ ɾίʔυΛಡΉͱ͖͸ɺ࣮૷͞ΕͨએݴΛಡΉ͜ͱͰɺͲ͏͍͏࣌ʹԿ͕ߦΘΕΔ͔ɺ ɹͲ͏͍͏࣌ʹ͜ͷ஋͕Ͳ͏มԽ͢Δ͔ͱ͍͏ͷΛ೺ѲͰ͖Δɻ

Slide 50

Slide 50 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ "OHVMBSͷύϑΥʔϚϯε

Slide 51

Slide 51 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ "OHVMBSͷύϑΥʔϚϯε rx-angular introduction εϥΠυ rx-angular introduction Youtube ը໘ඳըॲཧͷ࠷దԽ

Slide 52

Slide 52 text

RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ "OHVMBSͷύϑΥʔϚϯε UFNQMBUF͔ΒHFUUFSΛࢀরͨ࣌͠ͷσϝϦοτ UFNQMBUF͔ΒHFUUFSΛࢀর͠ͳͯ͘Α͘ͳΔ ը໘ඳը࣌ʹຖճHFUUFSͷॲཧ͕ߦΘΕΔ

Slide 53

Slide 53 text

RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 54

Slide 54 text

RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸ .VMUJDBTU )PU$PME 4VCTDSJQUJPOͷ؅ཧ ओཁͳ0QFSBUPS "OHVMBSͷ"TZOD1JQF

Slide 55

Slide 55 text

"OHVMBSͷ"TZOD1JQF RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 56

Slide 56 text

"OHVMBSͷ"TZOD1JQF "TZOD1JQF ࣗಈͰPCTFSWBCMFͳ஋ΛTVCTDSJCF͠ɺ࠷৽ͷ஋Λฦ٫͢Δ RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 57

Slide 57 text

ओཁͳ0QFSBUPS RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 58

Slide 58 text

ओཁͳ0QFSBUPS map filter tap combineLatest merge take takeUntil mergeMap distinctUntilChanged withLatestFrom RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 59

Slide 59 text

.VMUJDBTU RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 60

Slide 60 text

.VMUJDBTU ετϦʔϜΛڞ༗͢Δ͔Ͳ͏͔ IUUQTEFWUPSYKTSFTFBSDIPOSFBDUJWFFQIFNFSBMTUBUFJODPNQPOFOUPSJFOUFEGSBNFXPSLTML RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 61

Slide 61 text

.VMUJDBTU RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 62

Slide 62 text

.VMUJDBTU .VMUJDBTUʹม׵͢Δ0QFSBUPS Learn RxJS / Multicasting RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 63

Slide 63 text

.VMUJDBTU Research on Reactive-Ephemeral-State in component-oriented frameworks#Sharing State and state derivations RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 64

Slide 64 text

)PU$PME RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 65

Slide 65 text

)PU$PME TVCTDSJCF͍ͯ͠ͳͯ͘΋஋Λྲྀ͔͢Ͳ͏͔ Hot vs Cold Observables RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 66

Slide 66 text

TVCTDSJCF͍ͯ͠ͳͯ͘΋஋Λྲྀ͔͢Ͳ͏͔ Hot vs Cold Observables )PUʹ͢Δͱɺ.VMUJDBTUʹ΋ͳΔ )PU$PME RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 67

Slide 67 text

$PMEͳ0CTFSWBCMFͷ৔߹ɺTVCTDSJCF͢Δલʹൃߦ͞Εͨ஋͕र͑ͳ͍ Research on Reactive-Ephemeral-State in component-oriented frameworks#The Late Subscriber Problem )PU$PME RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 68

Slide 68 text

$PMEͳ0CTFSWBCMFͷ৔߹ɺTVCTDSJCF͢Δલʹൃߦ͞Εͨ஋͕र͑ͳ͍ Research on Reactive-Ephemeral-State in component-oriented frameworks#The Late Subscriber Problem ͜ΕΛղܾ͢ΔͨΊʹ͸ʜ )PU$PME RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 69

Slide 69 text

)PU$PME QVCMJTIΦϖϨʔλ DPOOFDU RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 70

Slide 70 text

)PU$PME QVCMJTI3FQMBZΦϖϨʔλ DPOOFDU RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 71

Slide 71 text

)PU$PME TIBSFΦϖϨʔλ TVCTDSJCF TVCTDSJCF͢Δ·Ͱ)PUͰ͸ͳ͍ RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 72

Slide 72 text

)PU$PME TIBSF3FQMBZΦϖϨʔλ TVCTDSJCF TVCTDSJCF͢Δ·Ͱ)PUͰ͸ͳ͍ RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 73

Slide 73 text

)PU$PME DPOOFDUͰ)PUʹͳΔɻ QVCMJTI TIBSF ࠷ॳͷTVCTDSJCFͰ)PUʹͳΔɻ refCount RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 74

Slide 74 text

)PU$PME DPOOFDUޙʹOFYU͞Εͨ࠷৽ͷ஋͕औಘͰ͖Δ QVCMJTI3FQMBZ TIBSF3FQMBZ ࠷ॳͷTVCTDSJCFޙʹOFYU͞Εͨ࠷৽ͷ஋͕औಘͰ͖Δ TVCTDSJCF࣌ʹ࠷৽ͷ஋Λऔಘ͍ͨ͠৔߹ RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 75

Slide 75 text

)PU$PME DPOOFDUޙʹOFYU͞Εͨ࠷৽ͷ஋͕औಘͰ͖Δ QVCMJTI3FQMBZ TIBSF3FQMBZ ࠷ॳͷTVCTDSJCFޙʹOFYU͞Εͨ࠷৽ͷ஋͕औಘͰ͖Δ TVCTDSJCF࣌ʹ࠷৽ͷ஋Λऔಘ͍ͨ͠৔߹ DPOOFDUલɺTVCTDSJCFલʹOFYU͞Εͨ࠷৽ͷ஋Λऔಘ͍ͨ͠৔߹ 4VCKFDUΛ#FIBWJPS4VCKFDUʹ͢Δ RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 76

Slide 76 text

)PU$PME #FIBWJPS4VCKFDUͱTIBSF3FQMBZ  Λར༻͢Δ͜ͱͰɺ ৗʹTVCTDSJCF࣌ʹ࠷৽ͷ஋ΛऔಘͰ͖Δɻ RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 77

Slide 77 text

)PU$PME #FIBWJPS4VCKFDUͱTIBSF3FQMBZ  Λར༻͢Δ͜ͱͰɺ ৗʹTVCTDSJCF࣌ʹ࠷৽ͷ஋ΛऔಘͰ͖Δɻ 4VCKFDU QVCMJTI3FQMBZ   DPOOFDUͰ΋ಉ༷ͷಈ࡞ʹͳΔ͕ɺ ͲͪΒ͕ద͍ͯ͠Δͷ͔͸Θ͔Βͳ͍ʜ SYBOHVMBSTUBUFͰ͸ɺ4VCKFDU QVCMJTI3FQMBZ   DPOOFDUͰ࣮૷͞Ε͍ͯΔɻ TVCTDSJCFͤͣʹ)PUʹͳΔͱ͍͏ͱ͜Ζ͕ϙΠϯτͷΑ͏ͳؾ͸͢Δʜ RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 78

Slide 78 text

4VCTDSJQUJPOͷ؅ཧ RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 79

Slide 79 text

4VCTDSJQUJPOͷ؅ཧ TVCTDSJCFΛߦ͏ͱɺ0CTFSWBCMF͕DPNQMFUF͞Εͳ͍ݶΓͣͬͱ஋͕ྲྀΕͯ͠·͏ɻ DPNQPOFOU಺ͰTVCTDSJCFΛߦͬͨ৔߹ɺDPNQPOFOU͕ഁغ͞Εͨޙ΋ಈ࡞͢ΔͨΊɺ DPNQPOFOUഁغ࣌ʹVOTVCTDSJCF͢Δඞཁ͕͋Δɻ RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 80

Slide 80 text

4VCTDSJQUJPOͷ؅ཧ UBLF6OUJMΛར༻͢Δ͜ͱͰɺ4VCTDSJQUJPOͷ؅ཧΛ؆қԽͰ͖Δ RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸

Slide 81

Slide 81 text

3Y+4Λ׆༻ͯ͠"OHVMBS$PNQPOFOUΛ࣮૷͢Δ

Slide 82

Slide 82 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ

Slide 83

Slide 83 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷ 4VCTDSJQUJPOͷ؅ཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ

Slide 84

Slide 84 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ͱʹ͔͘શͯͷ஋΍ΠϕϯτΛ0CTFSWBCMFʹ͢Δɻ 0CTFSWBCMFͱͯ͠ఆٛ͞Εͨ஋΍ΠϕϯτΛ༻͍ͯɺը໘ͷৼΔ෣͍Λ࣮૷͢Δɻ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷ 4VCTDSJQUJPOͷ؅ཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ

Slide 85

Slide 85 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ؆қతͳ50%0ΞϓϦέʔγϣϯ ɾ50%0ͷ௥Ճ͕Ͱ͖Δ ɾ50%0ͷ࡟আ͕Ͱ͖Δ ɾ50%0ҰཡΛϑΟϧλͰ͖Δ શͯɺະ׬ྃɺ׬ྃࡁ

Slide 86

Slide 86 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ %FNP αϯϓϧίʔυ

Slide 87

Slide 87 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ 3Y+4Λ࢖Θͳ͔ͬͨͱ͖ͷ࣮૷ UFNQMBUF step0.component.html

Slide 88

Slide 88 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ 3Y+4Λ࢖Θͳ͔ͬͨͱ͖ͷ࣮૷ $PNQPOFOUͷ*OQVU step0.component.ts 3Y+4Λ࢖Θͳ͔ͬͨͱ͖ͷ࣮૷ $PNQPOFOUͷϝϯόม਺

Slide 89

Slide 89 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ 3Y+4Λ࢖Θͳ͔ͬͨͱ͖ͷ࣮૷ $PNQPOFOUͷϝιου step0.component.ts

Slide 90

Slide 90 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷ 4VCTDSJQUJPOͷ؅ཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ

Slide 91

Slide 91 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷ 4VCTDSJQUJPOͷ؅ཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ

Slide 92

Slide 92 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ը໘Ͱൃੜ͢ΔΠϕϯτ

Slide 93

Slide 93 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ *OQVU஋ͷมߋ $PNQPOFOUͷϥΠϑαΠΫϧ

Slide 94

Slide 94 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ը໘Ͱൃੜ͢ΔΠϕϯτɺ*OQVU஋ͷมߋɺίϯϙʔωϯτͷϥΠϑαΠΫϧΛ 0CTFSWBCMFͱͯ͠ݕ஌Ͱ͖ΔΑ͏ʹ4VCKFDUͱͯ͠ఆٛɻ step1.component.ts ࣮૷मਖ਼

Slide 95

Slide 95 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ը໘Ͱൃੜ͢ΔΠϕϯτɺ*OQVU஋ͷมߋɺίϯϙʔωϯτͷϥΠϑαΠΫϧΛ 0CTFSWBCMFͱͯ͠ݕ஌Ͱ͖ΔΑ͏ʹ4VCKFDUͱͯ͠ఆٛɻ step1.component.ts ࣮૷मਖ਼ Ͳ͏͍͏ͱ͖ʹ஋͕OFYU͞ΕΔ͔Λਪଌ͠΍໋໊͍͢ʹ͠ͳ͍ͱࠞཚͷݩʹͳΔ

Slide 96

Slide 96 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ը໘ଆͷΠϕϯτൃੜΛݕ஌Ͱ͖ΔΑ͏ʹɺ4VCKFDUͷOFYUΛ࣮ߦ͢Δ step1.component.html ࣮૷मਖ਼

Slide 97

Slide 97 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ *OQVUͷมߋΛݕ஌Ͱ͖ΔΑ͏ʹɺ4VCKFDUͷOFYUΛ࣮ߦ͢Δ $PNQPOFOUͷϥΠϑαΠΫϧΛݕ஌Ͱ͖ΔΑ͏ʹɺ4VCKFDUͷOFYUΛ࣮ߦ͢Δ ࣮૷मਖ਼ step1.component.ts

Slide 98

Slide 98 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ0CTFSWBCMFͱͯ͠ѻ͑ΔΑ͏ʹͳΓ·ͨ͠

Slide 99

Slide 99 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷ 4VCTDSJQUJPOͷ؅ཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ

Slide 100

Slide 100 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ मਖ਼લͷ$PNQPOFOU$MBTTͷϝϯόม਺ *OQVU step0.component.ts ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ

Slide 101

Slide 101 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ $PNQPOFOUͷঢ়ଶΛ؅ཧ͢Δ4VCKFDUΛఆٛɻ ͜ͷͱ͖ɺ$PNQPOFOUͷঢ়ଶΛͻͱͭͷ0CKFDUͱͯ͠ѻ͑ΔΑ͏ʹ͢Δɻ ཧ༝͸ผ్આ໌ ࣮૷मਖ਼ step2.component.ts ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ

Slide 102

Slide 102 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ pMUFSFE*UFNT͸JUFNTͱpMUFS$POEJUJPO͔Βಋग़Ͱ͖ΔͨΊɺຖճϑΟϧλͷ࣮ߦΛߦ͏ඞཁ͕ͳ͘ͳͬͨ ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ

Slide 103

Slide 103 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ UBQͳͲͰ෭࡞༻Λ༩͑ΔॲཧΛՃ͑Δͷ͸/(ɻͲ͏͍͏ͱ͖ʹԿ͕ى͜Δͷ͔͕௥͍ʹ͘͘ͳΔɻ ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ

Slide 104

Slide 104 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ 0CTFSWBCMFʹஔ͖׵Θͬͨϝϯόม਺Λɺ"TZOD1JQFΛ࢖ͬͯϨϯμϦϯά ࣮૷मਖ਼ step2.component.html ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ

Slide 105

Slide 105 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτͱɺ ίϯϙʔωϯτͷঢ়ଶΛ0CTFSWBCMFͱͯ͠ѻ͑ΔΑ͏ʹͳΓ·ͨ͠ ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ

Slide 106

Slide 106 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτͱɺ ίϯϙʔωϯτͷঢ়ଶΛ0CTFSWBCMFͱͯ͠ѻ͑ΔΑ͏ʹͳΓ·ͨ͠ ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ ʮ999ͨ͠ͱ͖ɺ:::Λߦ͏ʯͷ999ͨ͠ͱ͖ͱ͍͏ͷ͕දݱͰ͖ΔΑ͏ʹͳͬͨ

Slide 107

Slide 107 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷ 4VCTDSJQUJPOͷ؅ཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ

Slide 108

Slide 108 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷ 4VCTDSJQUJPOͷ؅ཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ ίϯϙʔωϯτ಺ͷঢ়ଶͱൃੜ͢ΔΠϕϯτ͕શͯ0CTFSWBCMFʹͳ͍ͬͯΔͷͰɺ ʮ999ͨ͠ͱ͖ʹɺ:::Λߦ͏ʯͱ͍͏ϢʔεέʔεΛએݴతʹ࣮૷͍͚ͯ͠Δɻ

Slide 109

Slide 109 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ؆қతͳ50%0ΞϓϦέʔγϣϯ ɾ50%0ͷ௥Ճ͕Ͱ͖Δ ɾ50%0ͷ࡟আ͕Ͱ͖Δ ɾ50%0ҰཡΛϑΟϧλͰ͖Δ શͯɺະ׬ྃɺ׬ྃࡁ ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷

Slide 110

Slide 110 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ BEEΠϕϯτ͕ൃՐͨ͠ͱ͖ɺTUBUFΦϒδΣΫτͷJUFNTʹ৽͍͠JUFNΛ௥Ճ ࣮૷मਖ਼ final.component.ts ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷

Slide 111

Slide 111 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ SFNPWFΠϕϯτ͕ൃՐͨ͠ͱ͖ɺTUBUFΦϒδΣΫτͷJUFNT͔Βࢦఆ͞ΕͨJUFNΛ࡟আ ࣮૷मਖ਼ final.component.ts ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷

Slide 112

Slide 112 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ϑΟϧλ৚͕݅ߋ৽Πϕϯτ͕ൃՐͨ͠ͱ͖ɺTUBUFΦϒδΣΫτͷϑΟϧλ৚݅Λߋ৽ ࣮૷मਖ਼ final.component.ts ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷

Slide 113

Slide 113 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ *OQVUͷUJUMF͕มߋ͞Εͨͱ͖ɺTUBUFΦϒδΣΫτͷUJUMFΛߋ৽ ࣮૷मਖ਼ final.component.ts ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷

Slide 114

Slide 114 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ Ͳ͏͍͏ͱ͖ʹԿ͕ى͖Δͷ͔͕એݴతʹ࣮૷͞Ε͍ͯΔͷͰɺॲཧΛ೺Ѳ͠΍͘͢ͳͬͨ ࠓճྫʹ͋͛ͯΔίʔυ͙Β͍ͩͱ͋·ΓޮՌ͸ײ͡ʹ͍͕͘ʜ ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷

Slide 115

Slide 115 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ Ͳ͏͍͏ͱ͖ʹԿ͕ى͖Δͷ͔͕એݴతʹ࣮૷͞Ε͍ͯΔͷͰɺॲཧΛ೺Ѳ͠΍͘͢ͳͬͨ ࠓճྫʹ͋͛ͯΔίʔυ͙Β͍ͩͱ͋·ΓޮՌ͸ײ͡ʹ͍͕͘ʜ ॲཧ࣮ߦͷτϦΨͱͳΔΠϕϯτ͕ෳ਺͋ΔΑ͏ͳέʔε΍ɺ ͻͱͭͷΠϕϯτ͔Βෳ਺ͷؔ৺͝ͱΛॲཧ͍ͨ͠έʔεͩͱɺΑΓޮՌΛൃش͢Δؾ͕͢Δ ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷

Slide 116

Slide 116 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷ 4VCTDSJQUJPOͷ؅ཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ

Slide 117

Slide 117 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ·ͩΠϕϯτϋϯυϥΛTVCTDSJCF͍ͯ͠ͳ͍ͷͰɺॲཧ͸࣮ߦ͞Εͳ͍ɻ 4VCTDSJQUJPOͷ؅ཧ

Slide 118

Slide 118 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ DPOTUSVDUPSͰ·ͱΊͯTVCTDSJCF͢Δ͜ͱͰɺ؅ཧ͢Δ4VCTDSJQUJPOΛͭʹ͢Δɻ ·ͨɺUBLF6OUJMͰPO%FTUSPZΛࢦఆ͢Δ͜ͱͰɺίϯϙʔωϯτഁغ࣌ʹDPNQMFUF͞ΕΔɻ ࣮૷मਖ਼ 4VCTDSJQUJPOͷ؅ཧ final.component.ts

Slide 119

Slide 119 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ίϯϙʔωϯτ͕ੜ͖ͯΔ͚ؒͩɺΠϕϯτϋϯυϦϯά͕ಈ࡞͢ΔΑ͏ʹͳͬͨ 4VCTDSJQUJPOͷ؅ཧ

Slide 120

Slide 120 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ׬੒

Slide 121

Slide 121 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ௥Ճཁ݅Λ࣮૷ͯ͠ΈΑ͏ ɾJUFNTʹมߋ͕͋ͬͨͱ͖ʹɺαʔόʹ࠷৽ͷJUFNTͷঢ়ଶΛૹ৴͢Δ ɾը໘ଆͷԿ͔͠ΒͷΠϕϯτ͕ൃՐͨ͠ͱ͖ɺϩάΛදࣔ͢Δ

Slide 122

Slide 122 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ͜ΕͰ3Y+4Λ׆༻࣮ͯ͠૷Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠

Slide 123

Slide 123 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ͜ΕͰ3Y+4Λ׆༻࣮ͯ͠૷Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ ͱ͸͍͑ɺ࣮૷࣌ʹؾʹ͢Δ͜ͱ΍࣮૷ྔ͕গ͠ଟ͍ʜ EJTUJODU6OUJM$IBOHFEͱ͔ɺTIBSF3FQMBZͱ͔ɺ4VCTDSJQUJPOͷ؅ཧͱ͔

Slide 124

Slide 124 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ͜ΕͰ3Y+4Λ׆༻࣮ͯ͠૷Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ ͱ͸͍͑ɺ࣮૷࣌ʹؾʹ͢Δ͜ͱ΍࣮૷ྔ͕গ͠ଟ͍ʜ EJTUJODU6OUJM$IBOHFEͱ͔ɺTIBSF3FQMBZͱ͔ɺ4VCTDSJQUJPOͷ؅ཧͱ͔ ͦ͜Ͱʜ

Slide 125

Slide 125 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ !SYBOHVMBS @rx-angular

Slide 126

Slide 126 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ !SYBOHVMBSΛ࢖͏͜ͱͰɺΑΓ؆ܿʹɺ؆୯ʹϦΞΫςΟϒʹ࣮૷͢Δ͜ͱ͕Ͱ͖·͢ !SYBOHVMBS

Slide 127

Slide 127 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ !SYBOHVMBSͱ͸Կ͔ !SYBOHVMBS

Slide 128

Slide 128 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ @rx-angular/state @rx-angular/template $PNQPOFOU΍ΞϓϦέʔγϣϯͷঢ়ଶΛϦΞΫςΟϒʹѻ͍΍͘͢͢ΔͨΊͷϥΠϒϥϦ 0CTFSWBCMFͷ஋ΛUFNQMBUFଆͰѻ͏ͱ͖ʹ࢖͑ΔσΟϨΫςΟϒͳͲΛఏڙ !SYBOHVMBS

Slide 129

Slide 129 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ઌ΄Ͳͷ50%0ΞϓϦέʔγϣϯΛ!SYBOHVMBSTUBUFΛ༻͍ͯॻ͖׵͑ͯΈΑ͏ !SYBOHVMBS

Slide 130

Slide 130 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ 3Y4UBUFͷΠϯελϯεΛ*OKFDU !SYBOHVMBS rxangular.component.ts

Slide 131

Slide 131 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ $PNQPOFOUͷϝϯόม਺Λఆٛ !SYBOHVMBS rxangular.component.ts

Slide 132

Slide 132 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ TUBUFGVM΍TFMFDUΛར༻͢Δ͜ͱͰɺEJTUJODU6OUJM$IBOHFE΍TIBSF3FQMBZΛؾʹ͠ͳͯ͘ྑ͍ !SYBOHVMBS rxangular.component.ts stateful select

Slide 133

Slide 133 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ ΠϕϯτϋϯυϦϯάॲཧͱঢ়ଶͷॳظԽ !SYBOHVMBS rxangular.component.ts

Slide 134

Slide 134 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ 4VCTDSJQUJPOͷ؅ཧ͸3Y4UBUF͕΍ͬͯ͘ΕΔ !SYBOHVMBS rxangular.component.ts

Slide 135

Slide 135 text

RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ @rx-angular/state @rx-angular/template ͦͷଞͷػೳ !SYBOHVMBS

Slide 136

Slide 136 text

3Y+4ͷςετʹ͍ͭͯ

Slide 137

Slide 137 text

RxJSͷςετʹ͍ͭͯ

Slide 138

Slide 138 text

RxJSͷςετʹ͍ͭͯ $PNJOH4PPO

Slide 139

Slide 139 text

!SYBOHVMBSΛ࢖ָͬͯ͘͠։ൃ͠Α͏ ࠓ೔ͷ·ͱΊ

Slide 140

Slide 140 text

ࢀߟ RxJS ެࣜ Hot vs Cold Observables rx-angular introduction Learn RxJS Research on Reactive Ephemeral state in component oriented frameworks BehaviorSubject vs rx-state @rx-angular