$30 off During Our Annual Pro Sale. View Details »

React概論

 React概論

React meetup #1 での発表資料

Naoya Ito

April 24, 2015
Tweet

More Decks by Naoya Ito

Other Decks in Technology

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