既存 Web アプリケーションへの React.js 適用/react for web application
by
A1
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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&BDI1SPNJTF͕ରԠ͍ͯ͠ͳ͍ ɹ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
σ ΟϨΫτϦߏϑΝΠϧߏ ݱঢ়ɺDPNQPOFOUBDUJPOSFEVDFS̍ͭͷKTYϑΝΠϧ ʹॻ͍͍ͯ·͕͢ɺଞػೳʹల։͢ΔͳΒϑΝΠϧΛ ͚ͳ͍ͱ͍͚ͳ͍ ࠓޙͷ՝
Slide 40
Slide 40 text
ࣗಈςετ 3FBDU$PNQPOFOUࣗಈςετ͍͕ͨ͠ग़དྷ͍ͯͳ͍ ࠓޙͷ՝
Slide 41
Slide 41 text
ɾࣄલ४උ͋·Γ͍Βͳ͍͕ɺϧʔϧΛ֮͑Δ·Ͱ ͦΕͳΓʹେมͩͬͨ ɾͬͨϝϦοτे͋ͬͨɻ ɾݹ͍γεςϜΛ৽͍ͯ͘͠Ξϓϩʔνͱͯ͠ঃʑʹ 3FBDUʹஔ͖͍͑ͯ͘ͷྑ͍͔͠Ε·ͤΜ ·ͱΊ
Slide 42
Slide 42 text
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠