既存 Web アプリケーションへの React.js 適用/react for web application

by A1

Slide 1

Slide 1 text

طଘ8FCΞϓϦέʔγϣϯ ΁ͷ3FBDUKTద༻ 3BLVT.FFUVQ5PLZPϑϩϯτΤϯυ/JHIU &JJDIJ.JUB

Slide 2

Slide 2 text

w&JJDIJ.JUB w" !FJDIJTBOEFO wָָ໌ࡉ։ൃ՝ϦʔυΤϯδχΞೖࣾ೥໨ w#MPHIUUQTHZP[BCFFS wEFWυϝΠϯങ͍͍ͨ ࣗݾ঺հ

Slide 3

Slide 3 text

୲౰αʔϏεͷ͝঺հ

Slide 4

Slide 4 text

w ։ൃͨ͠ͷ͸೥ޙ൒Ͱ͢ w ࠷৽ͷػೳʢIPPLTͳͲʣͷ࿩͸ग़͖ͯ·ͤΜ ͸͡Ίʹ

Slide 5

Slide 5 text

w ๻ʢ๻Ͱ͢ɻνʔϜϦʔμʔʣ w 0͞ΜʢϚϚ͞ΜΤϯδχΞ ɻࠓճͷओ໾ʣ w 4͞Μʢࠓճಛʹग़൪ͳ͠ʣ ˠͭ·Γখن໛ͳνʔϜ ౰࣌ͷνʔϜମ੍

Slide 6

Slide 6 text

ாථͷϨΠΞ΢τΛϢʔβ͕ઃఆग़དྷΔͱ͍͏ɺ6*͕ ͪΐͬͱෳࡶͳػೳཁ͕݅෣͍ࠐΜͰ͖·ͨ͠ɻ ֎෦ઃܭΛແࣄऴ͑ɺৄࡉઃܭϨϏϡʔΛ͍ͯͨ͠ ͋Δ೔ͷग़དྷࣄʜ ಋೖʹࢸͬͨܦҢ

Slide 7

Slide 7 text

0͞Μɿ ಋೖʹࢸͬͨܦҢ ͜ͷ஋͸IJEEFOʹอଘ͓͖ͯ͠·͢ɻ

Slide 8

Slide 8 text

0͞Μɿ 0͞Μɿ ಋೖʹࢸͬͨܦҢ ͜ͷ஋͸IJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷ஋΋IJEEFOʹอଘ͓͖ͯ͠·͢ɻ

Slide 9

Slide 9 text

0͞Μɿ 0͞Μɿ ๻ɿ ಋೖʹࢸͬͨܦҢ ͜ͷ஋͸IJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷ஋΋IJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͑ͬʂʁ

Slide 10

Slide 10 text

0͞Μɿ 0͞Μɿ ๻ɿ 0͞Μɿ ಋೖʹࢸͬͨܦҢ ͜ͷ஋͸IJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷ஋΋IJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷ஋΋IJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͑ͬʂʁ

Slide 11

Slide 11 text

0͞Μɿ 0͞Μɿ ๻ɿ 0͞Μɿ ๻ɿ ಋೖʹࢸͬͨܦҢ ͜ͷ஋͸IJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷ஋΋IJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷ஋΋IJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͪΐͪΐͪΐʂʁ ͑ͬʂʁ

Slide 12

Slide 12 text

ͭΒ͍ʢԕ͍໨ʣ

Slide 13

Slide 13 text

ࠓ·Ͱͱಉ͡Α͏ʹK2VFSZͰ࣮૷ͨ͠Β΍͹͍༧ײ͔͠ ͠ͳ͍ɻ ͕ͩͦΕ͸K2VFSZ͕ѱ͍༁Ͱ͸ͳ͍ɻ ෳࡶͳσʔλΛ%0.ʹ࣋ͨͤΔͷ͸ਏ͍͠ɺෳࡶͳ%0. Λૢ࡞͢Δͷ͸೉͍͠ʜ ಋೖʹࢸͬͨܦҢ

Slide 14

Slide 14 text

ਓྨʹ%0.Λѻ͏ͷ͸೉͗͢͠Δ

Slide 15

Slide 15 text

˞ݸਓͷײ૝Ͱ͢ 3FBDUKT͸ී௨ʹྲྀߦ͍ͬͯͨɻ "OHVMBSKT͸ͱޓ׵ੑ͕ͳ͍͕ग़ͯͪΐͬͱख͕ग़͠ʹ͍͘ঢ়گ 7VFKT͸ࠓޙྲྀߦΓͦ͏ͳײͩͬͨ͡ʢ͜͜·ͰྲྀߦΔͱ͸ࢥͬͯͳ ͔͕ͬͨʣ ˠݸਓతʹ͸3FBUKTͷ୒ͩͬͨɻ ౰࣌ͷτϨϯυΛৼΓฦΔͱ ͜ͷࠒ

Slide 16

Slide 16 text

֮͑Δ͜ͱ͕গͳͯ͘γϯϓϧ +49ͷݟͨ໨ͷΠϯύΫτͱ͸ཪෲʹɺ ͓֮͑ͯ͘΂͖ه๏ͳͲ͸͔ͳΓগͳ͍ɻ ˠطଘͷ+BWB4DSJQUͷ஌͕ࣝ࠷େݶ׆͔ͤΔɻ 3FBDUKTΛબ୒ͨ͠ཧ༝ class App extends Component { render() { return (

Hello World

) } }

Slide 17

Slide 17 text

ϚʔΫΞοϓΛγϯϓϧʹอͯΔ ͨͩͰ͑͞ΰνϟ͍͍ͭͯΔKTQʹϑϩϯτΤϯυϥΠϒ ϥϦಠࣗͷه๏Λࠞࡏͤͨ͘͞ͳ͔ͬͨ ˞ίʔυ͸งғؾͰ͢ɻ 3FBDUKTΛબ୒ͨ͠ཧ༝ Name:

Hello {{yourName}}!

Slide 18

Slide 18 text

ྲྀߦ͍ͬͯͨ ϒϩάهࣄͳͲ৘ใʹ͸ࠔΒͳ͍ɻ ҆௚ͳཧ༝Ͱ͕͢ɺྲྀߦ͍ͬͯΔ΋ͷʹ͸ཧ༝͕͋Δɻ ྑ͍ͱࢥ͑Δ΋ͷͳΒ͋͑ͯٯΒ͏ඞཁ͸ͳ͍ɻ ؾܰʹ࡞Γ௚͠Ͱ͖ͳ͍ͷͰʢಛʹUP#ͷαʔϏεͳͷͰʣ ͙͢ഇΕΔ΋ͷΛ࠾༻͢Δͷ͸ਏ͍ 3FBDUKTΛબ୒ͨ͠ཧ༝

Slide 19

Slide 19 text

3FBDUKTΛ࠾༻͢Δʹ͋ͨͬͯ؆୯ͳνʔϜ಺πʔϧΛ࡞ͬ ͯΈ·ͨ͠ɻ 3FBDUKT͚ͩͩͱ਌ࢠͷ$PNQPOFOUؒͷTUBUFͱQSPQTͷ ؅ཧ͕͘͢͝େมͩͬͨͷͰ࠷ॳ͔ΒSFBDUSFEVYΛ࢖͏ ͜ͱΛબ୒ɻ ˠখ͘͞࡞ͬͯࢼ͢ͷॏཁ 3FEVYΛબ୒ͨ͠ཧ༝

Slide 20

Slide 20 text

3FBDU3FEVYͰߦͧ͘ʂ

Slide 21

Slide 21 text

3FBDUͷαϯϓϧίʔυ͸&4͕࢖ΘΕ͍ͯΔ͜ͱ͕ଟ͍Ͱ ͕͢ɺݩʑ&4ͳݱ৔ͳͷͰମܥతʹֶΜͰ͓͍ͨํ͕ޮ཰͕ ྑ͍ͱߟ͑·ͨ͠ɻ ࣗ෼͸झຯͰ͍֮͑ͯͨͷͰߨࢣͱͳΓɺ&4ษڧձΛ։࠵ɻ ࣄલ४උʢ&4ͷֶशʣ ӳޠ͕ۤͰͳ͚Ε͹ɺ#BCFMͷެࣜυΩϡϝϯτ΋ྑ͍͔ͱࢥ͍·͢ -FBSO&4 IUUQTCBCFMKTJPEPDTFOMFBSO ڭࡐʹ͸8FC%#13&447PMΛ࢖༻

Slide 22

Slide 22 text

&OIBODFE0CKFDU-JUFSBMT ࣄલʹ͓͍֮͑ͯͨํ͕ྑ͍ϕετ̏ var foo = 0; var obj = {foo}; // {foo: foo} ͱઃఆͨ͠ͷͱಉ͡ // Computed (dynamic) property names var key = "foo"; var obj = { [key]: 0, [key + "_bar"]: 1 };

Slide 23

Slide 23 text

4QSFBE0QFSBUPS ࣄલʹ͓͍֮͑ͯͨํ͕ྑ͍ϕετ̏ var obj = {a:1, b:2}; var obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 } var [one, two, three] = [1, 2, 3] %FTUSVDUVSJOH TUBUFΛߋ৽͢Δͱ͖ʹΑ͘࢖ΘΕΔ

Slide 24

Slide 24 text

0SFJMMZͷʮೖ໳3FBDUʯΛճ͠ಡΈ͠·ͨ͠ɻ ˞ࠓͱͳͬͯ͸಺༰ݹ͍Ͱ͢ɻ౰࣌͸͜ͷຊ͔͠ͳ͔ͬͨͱهԱɻ ࣄલ४උʢ3FBDUKTͷֶशʣ ެࣜαΠτ͔ɺ8FCͷهࣄͰ΋ྑ͍ͱࢥ͍·͢ɻ

Slide 25

Slide 25 text

2JJUBͷهࣄΛݟͳ͕Βֶश͠·ͨ͠ 3FEVYೖ໳ʲμΠδΣετ൛ʳ෼Ͱཧղ͢Δ3FEVYͷجૅ IUUQTRJJUBDPNLJJUBJUFNTBGCDGC ࣄલ४උʢ3FEVYͷֶशʣ

Slide 26

Slide 26 text

ͦͷޙ͸ɺͻͨ͢Βάάͬͯௐ΂ͨɻ ʢଟ෼ɺҰ೔ճۙ͘͸άά͍ͬͯͨʣ ˠมԽ͕ܹ͘͠ݹ͍৘ใ΋ଟ͔ͬͨͷͰෳ਺αΠτͰ֬ ೝ͢Δඞཁ͕͋ΓɺͦΕ͕େมͩͬͨɻ ࣮ࡍʹίʔυΛॻ͖࢝ΊΔ

Slide 27

Slide 27 text

࣮ࡍ΍ͬͯΈͯ

Slide 28

Slide 28 text

SFOEFS͞Εͳ͍໰୊ ɾ$PNQPOFOUͷίϯετϥΫλ͕ຖճݺ͹ΕΔͱצҧ͍͍ͯͨ͠ɻ ɾTUBUFΛ௚઀ॻ͖׵͍͑ͯͨͨΊ࠶SFEOFS͞Εͳ͔ͬͨ ϋϚͬͨ͜ͱ class App extends Component { constructor() { super(); this.state = { input: “͜ΜʹͪΘ” }; } componentWillRecieveProps(nextProps) { this.setState({ input : nextProps.input }) } } ίϯετϥΫλ͸Ұ౓͔͠ݺ͹Εͳ͍ͷͰɺ ຖճॲཧ͍ͨ͠΋ͷ͸ϥΠϑαΠΫϧϝιου ʹॻ͔ͳ͍ͱμϝ 4UBUFͷߋ৽͸TFU4UBUF Λ࢖Θͳ͍ͱμϝ

Slide 29

Slide 29 text

όάͷ੾Γ෼͚͕೉͔ͬͨ͠ ɹಉ͡ඇಉظॲཧ͕̎ճಈ͍ͯ͠·͏໰୊͕ൃੜɻ 3FBDU3FEVYͷόάͩͱࢥ͍ͬͯͨΒɺ+BWBଆͷόάͩͬ ͨͱɻ݁ہαʔόαΠυͷॲཧʹ໰୊͕͕͋ͬͨɺ 1SPNJTFपΓͷॲཧΛࢄʑٙͬͯ͠·ͬͨɻ ϋϚͬͨ͜ͱ

Slide 30

Slide 30 text

*&Ͱಈ͔ͳ͍໰୊ ͣͬͱ$ISPNFͰσόοά͓ͯ͠Γɺ։ൃޙ൒ʹ*&Ͱς ετΛ࢝ΊͨΒಈ͔ͳͯ͘ྦ໨ ˠOPEFMJTUGPS&BDI΍1SPNJTF͕ରԠ͍ͯ͠ͳ͍໰୊ ɹCBCFMQPMZpMMͰࣄͳ͖ΛಘΔɻ ϋϚͬͨ͜ͱ

Slide 31

Slide 31 text

ηογϣϯ͕੾ΕΔ αʔόʔଆʹॲཧ͕ඈ͹ͳ͍͕࣌ؒ௕͍ͨΊɺηογϣ ϯ੾ΕʹͳΓ΍͘͢ฤू಺༰͕ඈΜͩͱϢʔβ͔Βۤ৘ ͕ʜ 3FBDUͷ໰୊Ͱ͸ͳ͍Ͱ͕͢ʣ ࣗಈอଘػೳΛ૊ΈࠐΈ·ͨ͠ɻ ϋϚͬͨ͜ͱ

Slide 32

Slide 32 text

✨K2VFSZͱͷڞଘ K2VFSZͷ΄͏͕ศརͳͱ͜Ζ͸࢖ͬͨɻ K26FSZ6*ͷ%% ϦαΠζ αϜωΠϧͳͲ ޻෉ͨ͜͠ͱ

Slide 33

Slide 33 text

✨ඈͼඈͼʹSFOEFS͍ͨ͠ طଘKTQ෦඼ͷҰ෦Λ࢖͍͔ͨͬͨͷͰɺϧʔτ͸Ϩϯμ Ϧϯάͤͣ ɺαϒπϦʔΛ޷͖ͳͱ͜ʹϨϯμϦϯά͢ Δ3FBDUίϯϙʔωϯτΛ࡞੒͠·ͨ͠ɻ طଘͷ+41ͷλά෦඼ͳͲΛ࢖͏ඞཁ͕͋ͬͨͨΊɻ ͪΐͬͱτϦοΩʔͳ͜ͱΛ͍ͯ͠Δɻ ࢀߟ63-IUUQTRJJUBDPNULSLUJUFNTDFBBGFBG ޻෉ͨ͜͠ͱ

͜͜Λrender

ADD

͜͜Λrender

Slide 34

Slide 34 text

σʔλ؅ཧͷҰݩԽ͕ग़དྷͨ TUBUFʹΑΓσʔλΛҰݩ؅ཧͰ͖ͨ͜ͱͰɺՄಡੑɾอ कੑ্͕͕ͬͨ ΍ͬͯΈͯΑ͔ͬͨ͜ͱ

Slide 35

Slide 35 text

ίϯϙʔωϯτ୯ҐͷઃܭʹϝϦοτ͕͋ͬͨ w ઃܭ͠΍͍͢ w ίʔυ΋ಡΈ΍͍͢ w ྲྀ༻͠΍͍͢ w ໰୊͕͋ͬͨͱ͖ͷӨڹൣғ΋গͳ͍ ΍ͬͯΈͯΑ͔ͬͨ͜ͱ

Slide 36

Slide 36 text

όά͕গͳ͔ͬͨ 3FBDUىҼͷຊ൪όά͸ग़͍ͯͳ͍ ΍ͬͯΈͯΑ͔ͬͨ͜ͱ

Slide 37

Slide 37 text

3FBDUKTͷόʔδϣϯΞοϓ΁ͷ௥ਵ ࣮͸·ͩWܥΛ࢖͓ͬͯΓɺ ݱࡏɺWܥ΁ͷόʔδϣϯΞοϓରԠதɻ ʢDPNQPOFOU8JMM3FDFJWF1SPQTͳ͘ͳͬͨΓഁյతͳม ߋ͕͋ͬͯগͭ͠Β͍ʣ ࠓޙͷ՝୊

Slide 38

Slide 38 text

ଞػೳ΁ͷల։ ৽ػೳʹ͍ͭͯ͸3FBDUΛ࢖͏΂͖͔೰ΜͰ͍Δɻ ͦͷޙɺ͞΄ͲෳࡶͰ͸ͳ͍ը໘Λ3FBDUΛ࢖Θͣʹ࡞ͬ ͕ͨɺऴΘͬͯΈΔͱ3FBDU࢖ͬͨํ͕ྑ͔ͬͨͱͷ੠΋ ࠓޙͷ՝୊

Slide 39

Slide 39 text

σ ΟϨΫτϦߏ੒΍ϑΝΠϧߏ੒ ݱঢ়ɺDPNQPOFOU΋BDUJPO΋SFEVDFS΋̍ͭͷKTYϑΝΠϧ ʹॻ͍͍ͯ·͕͢ɺଞػೳʹ΋ల։͢ΔͳΒϑΝΠϧΛ ෼͚ͳ͍ͱ͍͚ͳ͍ ࠓޙͷ՝୊

Slide 40

Slide 40 text

ࣗಈςετ 3FBDU$PNQPOFOU΋ࣗಈςετ͍͕ͨ͠ग़དྷ͍ͯͳ͍ ࠓޙͷ՝୊

Slide 41

Slide 41 text

ɾࣄલ४උ͸͋·Γ͍Βͳ͍͕ɺϧʔϧΛ֮͑Δ·Ͱ͸ ͦΕͳΓʹେมͩͬͨ ɾ΍ͬͨϝϦοτ͸े෼͋ͬͨɻ ɾݹ͍γεςϜΛ࡮৽͍ͯ͘͠Ξϓϩʔνͱͯ͠ঃʑʹ 3FBDUʹஔ͖׵͍͑ͯ͘ͷ͸ྑ͍͔΋͠Ε·ͤΜ ·ͱΊ

Slide 42

Slide 42 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠