BLoC

Transcript

1. © DMM.com !LHNZTIJO 'MVUUFS
   .FFUVQ
   5PLZP
    #-P$

2. © DMM.com w LHNZTIJO
   
   ఝٶ ͗͘Έ΍
   w "OESPJEΤϯδχΞ
   w %..DPNϥϘ
   $50ࣨॴଐ
   

   w ೥݄͔Β ࣗݾ঺հ 

3. © DMM.com  BHFOEB

4. © DMM.com w #-P$ͱ͸
   w #-P$ͷΨΠυϥΠϯ
   w #-P$ͱ6*
   w #-P$ͷྫ
   

   w 'MVUUFSͰͷ࢖͍ํ
   w ·ͱΊ BHFOEB 

5. © DMM.com  #-P$ͱ͸

6. © DMM.com #-P$ͱ͸  Business Logic Component

7. © DMM.com #-P$ͱ͸  ࣗ෼͕஌ͬͨͷ͸
   (PPHMF
   *0
   ͰͷԼهͷηογϣϯ Build reactive mobile apps with

   Flutter IUUQTXXXZPVUVCFDPNXBUDI W34H#&Q0*

8. © DMM.com #-P$ͱ͸  ࣮ࡍ͸೥݄ʹ%BSU
   $POG
   ͷ
   ԼهͷηογϣϯͰൃද͞Ε͍ͯΔ Flutter / AngularDart –

   Code sharing, better together IUUQTXXXZPVUVCFDPNXBUDI W1-)MOX)H1&

9. © DMM.com #-P$ͱ͸  ϏδωεϩδοΫΛ UI΍ϓϥοτϑΥʔϜ͔Β ෼཭͢ΔͨΊͷ ઃܭύλʔϯͷҰͭ ҰݴͰݴ͏ͱ Ͱ͋Δ

10. © DMM.com #-P$ͷϞνϕʔγϣϯ  6* .PEFM *OGSB ͜͏͍͏ঢ়ଶΛ .PEFM .PEFM

    .PEFM

11. © DMM.com #-P$ͷϞνϕʔγϣϯ  6* .PEFM *OGSB ͜͏͍ͨ͠
     9
    1MBUGPSN
    "EBQUFS

12. © DMM.com  #-P$ͷΨΠυϥΠϯ

13. © DMM.com #-P$ͷΨΠυϥΠϯ   JOQVUT
    BOE
    PVUQVUT
    BSF
    TJNQMF
    4USFBNT4JOLT
    POMZ
     %FQFOEFODJFT
    NVTU
    CF
    JOKFDUBCMF
    BOE
    QMBUGPSN
    BHOPTUJD
    

    /P
    QMBUGPSN
    CSBODIJOH
    BMMPXFE
     *NQMFNFOUBUJPO
    DBO
    CF
    XIBUFWFS
    ZPV
    XBOU
    JG
    ZPV
    GPMMPX
    UIF
    QSFWJPVT
    SVMFT
    " #VU
    NBZ
    *
    TVHHFTU
    SFBDUJWF
    QSPHSBNNJOH

14. © DMM.com #-P$ͷΨΠυϥΠϯ   JOQVU
    ͸
    4JOLɺ
    PVUQVU͸
    4USFBNͰ࣮૷͢Δ
     ґଘΦϒδΣΫτ͸֎͔Β஫ೖՄೳͰɺϓϥοτ ϑΥʔϜʹґଘ͠ͳ͍΋ͷͰ͋Δ͜ͱ
    

    ϓϥοτϑΥʔϜͷ෼ذ͸μϝ
     dΛकͬͯΕ͹ɺ࣮૷͸ͳΜͰ΋͍͍Α
     ͨͩ͠ɺ3FBDUJWF
    1SPHSBNNJOHͰ૊Ήͷ͕͓͢͢ΊͩΑ

15. © DMM.com  #-P$ͱ6*ͷܨ͗

16. © DMM.com #-P$ͱ6*ͷܨ͗   &BDI
    DPNQMFY
    FOPVHI
    DPNQPOFOU
    IBT
    B
    DPSSFTQPOEJOH
    #-P$
     $PNQPOFOUT
    TIPVME
    TFOE
    JOQVUT
    BT
    JTz
    

    $PNQPOFOUT
    TIPVME
    TIPX
    PVUQVUT
    BT
    DMPTF
    BT
    QPTTJCMF
    UP
    BT
    JTz
     "MM
    CSBODIJOH
    TIPVME
    CF
    CBTFE
    PO
    TJNQMF
    #-P$
    CPPMFBO
    PVUQVUT

17. © DMM.com #-P$ͷΨΠυϥΠϯ   ͦΕͧΕͷzे෼ʹෳࡶͳz
    ίϯϙʔωϯτʹ͸#-P$ ͕Ұͭ͋Δʢzे෼ʹෳࡶͳzͷ౓߹͍͸֤ࣗͰ൑அʣ
     JOQVUʹૹΔσʔλ͸
    BT
    JTͰ
    

    PVUQVUʹྲྀ͢ετϦʔϜ΋Ͱ͖Δ͚ͩ
    lBT
    JTzͰ
     ͢΂ͯͷ෼ذ͸#-P$ʹΑΔ#PPMFBOͳΞ΢τϓοτ ʹجͮ͘΂͖Ͱ͋Δ

18. © DMM.com  #-P$ͷྫ

19. © DMM.com #-P$ͷྫ  class CartBLoC { Sink<Product> addition; Stream<int>

    itemCount; Stream<String> totalCost; Stream<List<CartItem>> items; }

20. © DMM.com #-P$ͷྫ  class CartBLoC { Sink<Product> addition; Stream<int>

    itemCount; Stream<String> totalCost; Stream<List<CartItem>> items; } 1SPEVDU͕௥Ճ͞ΕΔͱ

21. © DMM.com #-P$ͷྫ  class CartBLoC { Sink<Product> addition; Stream<int>

    itemCount; Stream<String> totalCost; Stream<List<CartItem>> items; } ͦΕͧΕͷ4USFBN͔Β݁Ռ͕ྲྀΕΔ

22. © DMM.com  'MVUUFSͰͷ࢖͍ํ

23. © DMM.com JOQVU΁ͷܨ͛ํ  TextField( onChanged: bloc.sink.add, decoration: InputDecoration( border:

    OutlineInputBorder(), ɹɹɹ hintText: “hint"), )

24. © DMM.com JOQVU΁ͷܨ͛ํ  TextField( onChanged: bloc.sink.add, decoration: InputDecoration( border:

    OutlineInputBorder(), ɹɹɹ hintText: “hint"), ) ΠϕϯτͱTJOLBEEΛόΠϯυ͢Δ͚ͩ

25. © DMM.com PVUQVUΛ6*ʹͭͳ͛Δํ๏  StreamBuilder<String>( stream: bloc.stream, builder: (context, snapshot)

    => Container( child: Text(snapshot?.data ?? ""), ), )

26. © DMM.com PVUQVUΛ6*ʹͭͳ͛Δํ๏  StreamBuilder<String>( stream: bloc.stream, builder: (context, snapshot)

    => Container( child: Text(snapshot?.data ?? ""), ), ) 4USFBN#VJMEFS࢖͏͚ͩ

27. © DMM.com  ·ͱΊ

28. © DMM.com  w #-P$͸6*ͱ.PEFMͱ*OGSBΛ෼͚Δ͜ͱͱɺΫϩε ϓϥοτϑΥʔϜͷίʔυγΣΞΛϞνϕʔγϣϯ ʹੜ·Εͨ
    w कΔ΂͖ΨΠυϥΠϯ͕͋Δ
    w

    'MVUUFSͰ͸
    w JOQVUΛૹΔͱ͜ΖͰ͸
    TJOLBEE
    ΛόΠϯυ͢Δ
    w PVUQVUΛTVCTDSJCF͢Δʹ͸4USFBN#VJMEFSΛ࢖͏ ·ͱΊ