React概論 - Speaker Deck

React概論

by Naoya Ito

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

3FBDUهࣄॻ͖·ͨ͠

Slide 3

Slide 3 text

ޙฤ΋Ӷҙࣥච தͰ͢

Slide 4

Slide 4 text

3FBDU

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Ͳ͏͍͏͜ͱͩ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ͭ·Γ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

3FBDUͰ͸

Slide 16

Slide 16 text

7JFX͸એݴతʹ ఆٛ TFU4UBUF ͢Δͱ SFOEFS Ͱ7JFX͕ ·Δ͝ͱߋ৽

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ίϯϙʔωϯτԽ Πϕϯτ΍ೖग़ྗ͸ɺͦ ͷίϯϙʔωϯτΫϥε ಺ʹہॴԽ͞ΕΔ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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