React概論

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

3FBDUهࣄॻ͖·ͨ͠

ޙฤ΋Ӷҙࣥච தͰ͢

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

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

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

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

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

Ͳ͏͍͏͜ͱͩ

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

ͭ·Γ

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

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

3FBDUͰ͸

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

React概論

React概論

Naoya Ito

More Decks by Naoya Ito

Other Decks in Technology

Featured

Transcript

3FBDU֓࿦ /BPZBUP ,BJ[FO1MBUGPSN OD 3FBDUKTNFFUVQ

3FBDUهࣄॻ͖·ͨ͠

ޙฤ΋Ӷҙࣥච தͰ͢

3FBDU

3FBDU •  'BDFCPPL •  1)1ϑϨʔϜϫʔΫͷ9)1ͷҠ২ͱͯ͠։ൃ ͞Εͨͷ͕͖͔͚ͬ –  9)1ŋŋŋ೥͘Β͍ •

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

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

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

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

Ͳ͏͍͏͜ͱͩ

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

ͭ·Γ

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

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

3FBDUͰ͸

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

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

4UBUFͱ+49 •  4UBUF –  มԽ͢Δ஋ ঢ়ଶ Λѻ͏ػߏ –  ํ޲σʔλόΠϯσΟϯά –

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

7JSUVBM%0. •  3FBDUͷόοΫΤϯυʹ͋Δ %0.ߏ଄Λந৅Խͨ͠σʔλ ߏ଄ •  σʔλϞσϧͷঢ়ଶมԽʹ߹Θ ͤͯ7JSUVBM%0.ͷલޙͷ EJ⒎Λࢉग़ •

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

ॏཁͳ͜ͱ •  αʔόʔαΠυ೴Ͱ͍͚Δ –  4UBUFʹΑΔσʔλόΠϯσΟϯάɺએݴతͳ7JFXߏங +49 ɺ7JSUVBM%0. •  ίϯϙʔωϯτࢦ޲ –

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

TodoApp <TodoInput /> <TodoList /> ίϯϙʔωϯ τ͸+49Ͱ ࢀর

TodoApp TodoInput TodoList input ul

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

TodoApp TodoInput TodoList State σʔλϑϩʔ 4UBUF͸਌ʹ࣋ͨͤͯɺ

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

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

'"2 •  +49ϏϧυͲ͏͢Δͷ –  τϥϯεύΠϥ࢖͏ SFBDUUPPMT #SPXTFSJGZ #BCFMͳͲ •

͓·͚NNVUBCMFKT •  GBDFCPPLJNNVUBCMFKT •  NNVUBCMFͳσʔλߏ଄Λఏڙ͢ΔϥΠϒϥ Ϧ –  var map2 =

3FBDU໋ྩతˠએݴత •  ໋ྩతͰ͋ͬͨ7JFXͷ૊Έཱͯ %0.ૢ࡞ Λɺ એݴతͳύϥμΠϜʹ •  ʮσʔλϞσϧʹมߋ͕͋ͬͨΒ%0.Λؙ͝ ͱߋ৽ʯ –

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