React概論

React meetup #1 での発表資料

Transcript

1. 3FBDU֓࿦
   /BPZB*UP
   ,BJ[FO1MBUGPSN *OD
   
   3FBDUKTNFFUVQ
   

   View Slide

2. 3FBDUهࣄॻ͖·ͨ͠
   

   View Slide

3. ޙฤ΋Ӷҙࣥච
   தͰ͢
   

   View Slide

4. 3FBDU
   

   View Slide

5. 3FBDU
   •  'BDFCPPL
   •  1)1ϑϨʔϜϫʔΫͷ9)1ͷҠ২ͱͯ͠։ൃ
   ͞Εͨͷ͕͖͔͚ͬ
   –  9)1ŋŋŋ೥͘Β͍
   •  )5.-ͷதʹ1)1ίʔυΛຒΊࠐΉͷͰ͸ͳ͘1)1ͷ
   தʹ9.-GSBHNFOUTΛϦςϥϧͰॻ͚ΔΑ͏ʹͨ͠
   MJLF+49
   
   •  ಠࣗλάΛఆٛՄೳ㱺SFVTBCMFDPNQPOFOUT
   

   View Slide

6. 3FBDUͱ͸
   •  6*։ൃ༻ͷ+BWB4DSJQUϥΠϒϥϦ
   •  3FBDU͕ఏڙ͢Δͷ͸7JFXͷΈ
   •  *UTHPBMJTUPCFTJNQMF EFDMBSBUJWFBOE
   DPNQPTBCMF XJLJQFEJB
   
   

   View Slide

7. 3FBDU%FWFMPQFS5PPMT
   Ͱ'BDFCPPLΛݟΔͱɺ
   ͔֬ʹϓϩμΫγϣϯͰ
   ࢖ΘΕ͍ͯΔ
   

   View Slide

8. ൃ૝
   •  1)1Ͱ͸ຖճϖʔδΛॻ͖׵͑ͯͨɻ؆୯ͩͬ
   ͨ
   •  +BWB4DSJQUͰ6*։ൃ͢ΔΑ͏ʹͳͬͯ
   %0.ૢ࡞Ͱෳࡶʹͳͬͨ
   •  9)1Λ+BWB4DSJQUʹҠ২ͯ͠ɺಉ͡ύϥμ
   ΠϜͰ։ൃͰ͖ͳ͍͔
   

   View Slide

9. •  ैདྷͱ͸·ͬͨ͘ҟͳΔํ๏Ͱ%0.Λѻ͏
   •  खಈͰ%0.Λߋ৽ͯ͠ঢ়ଶΛ؅ཧ͢Δͱ͍ͬͨچଶґ
   વͱͨ͠։ൃํ๏͸εέʔϥϏϦςΟͷ఺Ͱྼ͍ͬͯΔ
   •  ϢʔβʔΠϯλϑΣʔεΛΑΓએݴతʹهड़Ͱ͖Δɻͦ
   ͯ͠Ծ૝%0.ʹΑΓ%0.ͷߋ৽͸࠷খʹ཈͑ΒΕΔ
   

   View Slide

10. Ͳ͏͍͏͜ͱͩ
    

    View Slide

11. ˺αʔόʔαΠυ೴Ͱॻ͚Δ
    •  7JFX͸ৗʹશߋ৽
    – Ϟσϧ͕ߋ৽͞ΕͨΒ7JFXΛશ෦ߋ৽
    – 7JFXΛߋ৽͔ͨͬͨ͠Βશ෦ϨϯμϦϯά
    ͠ͳ͓͢
    – ෋߽తϓϩάϥϛϯά
    •  7JFX͸એݴతʹఆٛ )5.-ͩ͠
    
    

    View Slide

12. ͭ·Γ
    

    View Slide

13. ैདྷͷ΍Γํ
    ໋ྩతͳ%0.ૢ
    ࡞ίʔυ܈
    

    View Slide

14. ैདྷͷख๏ͷ೉͠͞
    •  %0.ૢ࡞ͷ೉͠͞
    – %0.͕ঢ়ଶΛ͍࣋ͬͯΔ
    – άϩʔόϧ
    – ඇಉظ
    ͍ͭɺͲ͔͜Βॻ͖
    ׵͑ΒΕΔ͔Θ͔Β
    ͳ͍ঢ়ଶΛؒҧ͍ͳ
    ͘؅ཧ͠ͳ͚Ε͹ͳ
    Βͳ͍
    

    View Slide

15. 3FBDUͰ͸
    

    View Slide

16. 7JFX͸એݴతʹ
    ఆٛ
    TFU4UBUF
    ͢Δͱ
    SFOEFS
    Ͱ7JFX͕
    ·Δ͝ͱߋ৽
    

    View Slide

17. σʔλ͕มΘͬͨΒ
    7JFX͸શߋ৽
    αʔόʔαΠυͱಉ͡ߟ͑ํ
    
    

    View Slide

18. 4UBUFͱ+49
    •  4UBUF
    –  มԽ͢Δ஋ ঢ়ଶ
    Λѻ͏ػߏ
    –  ํ޲σʔλόΠϯσΟϯά
    –  setState()Ͱม͑Δͱɺ7JFXͷ࠶ඳը͕૸Δ
    •  +49
    –  ϦςϥϧͰ9.-Ά͍ͷΛॻ͚Δ
    –  એݴతͳهड़
    ݫີʹ͸+49ͷ͓͔͛Ͱએݴ
    తɺͱ͍͏Θ͚Ͱ͸ͳ͍Ͱ͢ɻ
    +49͸ඞਢͰ͸ͳ͍
    
    

    View Slide

19. શ෦ؙ͝ͱߋ৽Ͱ͸ɺޮ཰͕ѱ͍
    ͦ͜Ͱ7JSUVBM%0.
    

    View Slide

20. 7JSUVBM%0.
    •  3FBDUͷόοΫΤϯυʹ͋Δ
    %0.ߏ଄Λந৅Խͨ͠σʔλ
    ߏ଄
    •  σʔλϞσϧͷঢ়ଶมԽʹ߹Θ
    ͤͯ7JSUVBM%0.ͷલޙͷ
    EJ⒎Λࢉग़
    •  ੜ%0.࠶ඳըΛࠩ෼ͷ͋ͬͨ
    Օॴ͚ͩߦ͏
    source:  React’s  diff  algorithm  
    h4p://calendar.perfplanet.com/2013/diff/  
    

    View Slide

21. 3FBDUͷ੹຿
     %0.ͷߋ৽
     Πϕϯτ΁ͷ൓Ԡ
    )551ϦΫΤετ "KBY
    ɺϧʔ
    ςΟϯάɺϞσϧɺӬଓσʔλͳ
    Ͳ͸ײ஌͠ͳ͍ɻଞͷ΋ͷ࢖ͬͯ
    Ͷ
    

    View Slide

22. ॏཁͳ͜ͱ
    •  αʔόʔαΠυ೴Ͱ͍͚Δ
    –  4UBUFʹΑΔσʔλόΠϯσΟϯάɺએݴతͳ7JFXߏங
    +49
    ɺ7JSUVBM%0.
    •  ίϯϙʔωϯτࢦ޲
    –  %0.΁ͷ࡞༻ΛίϯϙʔωϯτʹہॴԽ
    •  σʔλϑϩʔ͕໌֬
    –  εςʔτϨείϯϙʔωϯτ
    –  ίϯϙʔωϯτͷ*'1SPQTͱ4UBUF
    ͜ͷลΛҙࣝͤͣʹ
    ࢖͍ͬͯͯ͸௕ॴΛ
    ׆͔ͤͳ͍
    

    View Slide

23. 5PEP"QQίϯϙʔωϯτ͸
    5PEP*OQVUίϯϙʔωϯτͱ
    5PEP-JTUίϯϙʔωϯτͰ
    ߏ੒ $PNQPTJUJPO
    
    

    View Slide

24. TodoApp  
     
    
    ίϯϙʔωϯ
    τ͸+49Ͱ
    ࢀর
    ࣮͸VM΍MJ΋
    3FBDUίϯϙʔ
    ωϯτ
    

    View Slide

25. TodoApp  
    TodoInput   TodoList  
    input   ul  
    li  
    todos={this.state.todos}
    onAdd={this.onAdd}
    ίϯϙʔωϯτ΁ͷ
    ஋ͷड͚౉͠͸
    1SPQT ଐੑ
    ͕*'
    

    View Slide

26. ίϯϙʔωϯτԽ
    Πϕϯτ΍ೖग़ྗ͸ɺͦ
    ͷίϯϙʔωϯτΫϥε
    ಺ʹہॴԽ͞ΕΔ
    

    View Slide

27. TodoApp  
     
    TodoInput   TodoList  
    State
    σʔλϑϩʔ
    4UBUF͸਌ʹ࣋ͨͤͯɺ
    ࢠʹ͸1SPQTͰ౉͢ɻ
    1SPQT͸ෆมʹ͠ɺࢠ͸
    4UBUFΛ࣋ͨͳ͍ε
    ςʔτϨείϯϙʔωϯ
    τ
    

    View Slide

28. ͭ·Γ
    •  γϯϓϧͳύϥμΠϜͰॻ͚Δ
    –  αʔόʔαΠυ೴
    –  εςʔτϨεঢ়ଶΛؾʹ͠ͳ͍͍ͯ͘
    •  σʔλϑϩʔ͕໌֬ͳͷͰ࣮૷Օॴʹ໎͍͕গ
    ͳ͍
    •  ͦͷίϯϙʔωϯτʹ·ͭΘΔίʔυ͸ͦͷί
    ϯϙʔωϯτ಺ʹ͋ΔͷͰݟ௨͕͠ྑ͍
    

    View Slide

29. ੜ࢈ੑΑΓ৴པੑ
    •  ੜ࢈ੑΛߴΊΔϥΠϒϥϦͱ͍͏ΑΓ
    •  ՄಡੑɺอकੑͳͲ௕ظతͳ৴པੑʹॏ
    ͖Λஔ͍͍ͯΔ
    ίʔυ͸ॻ࣌ؒ͘ΑΓಡ
    Ή࣌ؒͷํ͕௕͍ͩΖ
    CZ'BDFCPPL
    
    

    View Slide

30. '"2
    •  +49ϏϧυͲ͏͢Δͷ
    –  τϥϯεύΠϥ࢖͏ SFBDUUPPMT #SPXTFSJGZ #BCFMͳͲ
    
    •  K2VFSZซ༻Ͱ͖Δ
    –  Ͱ͖Δ͸Ͱ͖Δ͚Ͳ%0.ૢ࡞͸ύϥμΠϜ͕ҧ͏ͷͰɺΑ͘
    Θ͔Μͳ͍Ͱ΍Δ΂͖Ͱ͸ͳ͍ BKBYͱ͔͸ߏΘͳ͍
    
    •  ϦΞΫςΟϒϓϩάϥϛϯά 31
    ͳͷ
    –  σʔλϑϩʔʹண໨એݴత͋ͨΓ͕ʮϦΞΫςΟϒʯ
    –  ͨͩ͠ʮϦΞΫςΟϒʯͷݴ༿ͷҙຯ͕޿͗͢ΔͷͰཁ஫ҙ
    •  3FBDU͚ͩͰ31Λ೺Ѳ͠Α͏ͱ͢Δͱ஍ཕɺ͔΋
    •  'VODUJPOBM3FBDUJWF1SPHSBNNJOHํ໘΁Ͳ͏ͧ
    

    View Slide

31. ͓·͚*NNVUBCMFKT
    •  GBDFCPPLJNNVUBCMFKT
    •  *NNVUBCMFͳσʔλߏ଄Λఏڙ͢ΔϥΠϒϥ
    Ϧ
    –  var  map2  =  map1.set('key',  value);  
    –  ඇഁյతʹૢ࡞Ͱ͖Δσʔλߏ଄
    –  -JTU .BQ 4FU 4FR
    •  4UBUFͰѻ͏σʔλߏ଄༻ʹ࢖͏ͱḿΔ
    

    View Slide

32. 3FBDU໋ྩతˠએݴత
    •  ໋ྩతͰ͋ͬͨ7JFXͷ૊Έཱͯ %0.ૢ࡞
    Λɺ
    એݴతͳύϥμΠϜʹ
    •  ʮσʔλϞσϧʹมߋ͕͋ͬͨΒ%0.Λؙ͝
    ͱߋ৽ʯ
    –  ඇޮ཰ͳ෦෼͸7JSUVBM%0.͕ղܾ
    ϑϩϯτΤϯυ6*։ൃΛɺ
    αʔόʔαΠυͱಉ͡෋
    ߽తϓϩάϥϛϯάελ
    Πϧʹ໭͢
    

    View Slide

33. 13࠾༻ͯ͠·͢
    ʮ,BJ[FO࠾༻ʯͰݕࡧɻڵ
    ຯ͋Δ͚ͩͰ΋Մɻͦͷ৔
    ߹͸8BOEUFEMZͰɻ
    

    View Slide