Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
既存 Web アプリケーションへの React.js 適用/react for web application
A1
February 19, 2019
Programming
0
720
既存 Web アプリケーションへの React.js 適用/react for web application
2019.2.19 Rakus Meetup Tokyo #2 フロントエンドNight発表資料
A1
February 19, 2019
Tweet
Share
More Decks by A1
See All by A1
eichisanden
2
800
eichisanden
1
170
eichisanden
0
600
eichisanden
0
42
eichisanden
0
320
eichisanden
1
110
Other Decks in Programming
See All in Programming
blendthink
0
390
ippey
0
170
kubode
0
170
anchorcable
1
120
pdone
0
210
decoc
1
320
loleg
0
190
asumikan
0
280
manfredsteyer
PRO
0
230
akatsukinewgrad
0
130
nbkouhou
0
720
freekmurze
0
190
Featured
See All Featured
stephaniewalter
260
11k
philhawksworth
190
17k
productmarketing
5
640
bermonpainter
342
26k
denniskardys
220
120k
notwaldorf
13
1.5k
tenderlove
52
3.4k
jlugia
216
16k
scottboms
251
11k
roundedbygravity
241
21k
paulrobertlloyd
71
3.6k
sachag
446
36k
Transcript
طଘ8FCΞϓϦέʔγϣϯ ͷ3FBDUKTద༻ 3BLVT.FFUVQ5PLZPϑϩϯτΤϯυ/JHIU &JJDIJ.JUB
w&JJDIJ.JUB w" !FJDIJTBOEFO wָָ໌ࡉ։ൃ՝ϦʔυΤϯδχΞೖࣾ w#MPHIUUQTHZP[BCFFS wEFWυϝΠϯങ͍͍ͨ ࣗݾհ
୲αʔϏεͷ͝հ
w ։ൃͨ͠ͷޙͰ͢ w ࠷৽ͷػೳʢIPPLTͳͲʣͷग़͖ͯ·ͤΜ ͡Ίʹ
w ʢͰ͢ɻνʔϜϦʔμʔʣ w 0͞ΜʢϚϚ͞ΜΤϯδχΞ ɻࠓճͷओʣ w 4͞Μʢࠓճಛʹग़൪ͳ͠ʣ ˠͭ·ΓখنͳνʔϜ ࣌ͷνʔϜମ੍
ாථͷϨΠΞτΛϢʔβ͕ઃఆग़དྷΔͱ͍͏ɺ6*͕ ͪΐͬͱෳࡶͳػೳཁ͕͍݅ࠐΜͰ͖·ͨ͠ɻ ֎෦ઃܭΛແࣄऴ͑ɺৄࡉઃܭϨϏϡʔΛ͍ͯͨ͠ ͋Δͷग़དྷࣄʜ ಋೖʹࢸͬͨܦҢ
0͞Μɿ ಋೖʹࢸͬͨܦҢ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ
0͞Μɿ 0͞Μɿ ಋೖʹࢸͬͨܦҢ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ
0͞Μɿ 0͞Μɿ ɿ ಋೖʹࢸͬͨܦҢ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͑ͬʂʁ
0͞Μɿ 0͞Μɿ ɿ 0͞Μɿ ಋೖʹࢸͬͨܦҢ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͑ͬʂʁ
0͞Μɿ 0͞Μɿ ɿ 0͞Μɿ ɿ ಋೖʹࢸͬͨܦҢ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͪΐͪΐͪΐʂʁ
͑ͬʂʁ
ͭΒ͍ʢԕ͍ʣ
ࠓ·Ͱͱಉ͡Α͏ʹK2VFSZͰ࣮ͨ͠Β͍༧ײ͔͠ ͠ͳ͍ɻ ͕ͩͦΕK2VFSZ͕ѱ͍༁Ͱͳ͍ɻ ෳࡶͳσʔλΛ%0.ʹ࣋ͨͤΔͷਏ͍͠ɺෳࡶͳ%0. Λૢ࡞͢Δͷ͍͠ʜ ಋೖʹࢸͬͨܦҢ
ਓྨʹ%0.Λѻ͏ͷ͗͢͠Δ
˞ݸਓͷײͰ͢ 3FBDUKTී௨ʹྲྀߦ͍ͬͯͨɻ "OHVMBSKTͱޓੑ͕ͳ͍͕ग़ͯͪΐͬͱख͕ग़͠ʹ͍͘ঢ়گ 7VFKTࠓޙྲྀߦΓͦ͏ͳײͩͬͨ͡ʢ͜͜·ͰྲྀߦΔͱࢥͬͯͳ ͔͕ͬͨʣ ˠݸਓతʹ3FBUKTͷͩͬͨɻ ࣌ͷτϨϯυΛৼΓฦΔͱ ͜ͷࠒ
֮͑Δ͜ͱ͕গͳͯ͘γϯϓϧ +49ͷݟͨͷΠϯύΫτͱཪෲʹɺ ͓͖֮͑ͯ͘ه๏ͳͲ͔ͳΓগͳ͍ɻ ˠطଘͷ+BWB4DSJQUͷ͕ࣝ࠷େݶ׆͔ͤΔɻ 3FBDUKTΛબͨ͠ཧ༝ class App extends Component {
render() { return ( <div> Hello World </div> ) } }
ϚʔΫΞοϓΛγϯϓϧʹอͯΔ ͨͩͰ͑͞ΰνϟ͍͍ͭͯΔKTQʹϑϩϯτΤϯυϥΠϒ ϥϦಠࣗͷه๏Λࠞࡏͤͨ͘͞ͳ͔ͬͨ ˞ίʔυงғؾͰ͢ɻ 3FBDUKTΛબͨ͠ཧ༝ <!doctype html> <html ng-app> <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script> </head> <body> <html:form styleId="" menuConfig="HOGE_LIST" queryString="save" method="post" enctype="multipart/form-data"> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <h1>Hello {{yourName}}! </h1> <c:out value="${foo}"/> </hoge:form> </body> </html>
ྲྀߦ͍ͬͯͨ ϒϩάهࣄͳͲใʹࠔΒͳ͍ɻ ҆ͳཧ༝Ͱ͕͢ɺྲྀߦ͍ͬͯΔͷʹཧ༝͕͋Δɻ ྑ͍ͱࢥ͑ΔͷͳΒ͋͑ͯٯΒ͏ඞཁͳ͍ɻ ؾܰʹ࡞Γ͠Ͱ͖ͳ͍ͷͰʢಛʹUP#ͷαʔϏεͳͷͰʣ ͙͢ഇΕΔͷΛ࠾༻͢Δͷਏ͍ 3FBDUKTΛબͨ͠ཧ༝
3FBDUKTΛ࠾༻͢Δʹ͋ͨͬͯ؆୯ͳνʔϜπʔϧΛ࡞ͬ ͯΈ·ͨ͠ɻ 3FBDUKT͚ͩͩͱࢠͷ$PNQPOFOUؒͷTUBUFͱQSPQTͷ ཧ͕͘͢͝େมͩͬͨͷͰ࠷ॳ͔ΒSFBDUSFEVYΛ͏ ͜ͱΛબɻ ˠখ͘͞࡞ͬͯࢼ͢ͷॏཁ 3FEVYΛબͨ͠ཧ༝
3FBDU3FEVYͰߦͧ͘ʂ
3FBDUͷαϯϓϧίʔυ&4͕ΘΕ͍ͯΔ͜ͱ͕ଟ͍Ͱ ͕͢ɺݩʑ&4ͳݱͳͷͰମܥతʹֶΜͰ͓͍ͨํ͕ޮ͕ ྑ͍ͱߟ͑·ͨ͠ɻ ࣗझຯͰ͍֮͑ͯͨͷͰߨࢣͱͳΓɺ&4ษڧձΛ։࠵ɻ ࣄલ४උʢ&4ͷֶशʣ ӳޠ͕ۤͰͳ͚Εɺ#BCFMͷެࣜυΩϡϝϯτྑ͍͔ͱࢥ͍·͢ -FBSO&4 IUUQTCBCFMKTJPEPDTFOMFBSO ڭࡐʹ8FC %#13&447PMΛ༻
&OIBODFE0CKFDU-JUFSBMT ࣄલʹ͓͍֮͑ͯͨํ͕ྑ͍ϕετ̏ var foo = 0; var obj = {foo};
// {foo: foo} ͱઃఆͨ͠ͷͱಉ͡ // Computed (dynamic) property names var key = "foo"; var obj = { [key]: 0, [key + "_bar"]: 1 };
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Λߋ৽͢Δͱ͖ʹΑ͘ΘΕΔ
0SFJMMZͷʮೖ3FBDUʯΛճ͠ಡΈ͠·ͨ͠ɻ ˞ࠓͱͳͬͯ༰ݹ͍Ͱ͢ɻ࣌͜ͷຊ͔͠ͳ͔ͬͨͱهԱɻ ࣄલ४උʢ3FBDUKTͷֶशʣ ެࣜαΠτ͔ɺ8FCͷهࣄͰྑ͍ͱࢥ͍·͢ɻ
2JJUBͷهࣄΛݟͳ͕Βֶश͠·ͨ͠ 3FEVYೖʲμΠδΣετ൛ʳͰཧղ͢Δ3FEVYͷجૅ IUUQTRJJUBDPNLJJUBJUFNTBGCDGC ࣄલ४උʢ3FEVYͷֶशʣ
ͦͷޙɺͻͨ͢Βάάͬͯௐͨɻ ʢଟɺҰճۙ͘άά͍ͬͯͨʣ ˠมԽ͕ܹ͘͠ݹ͍ใଟ͔ͬͨͷͰෳαΠτͰ֬ ೝ͢Δඞཁ͕͋ΓɺͦΕ͕େมͩͬͨɻ ࣮ࡍʹίʔυΛॻ͖࢝ΊΔ
࣮ࡍͬͯΈͯ
SFOEFS͞Εͳ͍ ɾ$PNQPOFOUͷίϯετϥΫλ͕ຖճݺΕΔͱצҧ͍͍ͯͨ͠ɻ ɾTUBUFΛॻ͖͍͑ͯͨͨΊ࠶SFEOFS͞Εͳ͔ͬͨ ϋϚͬͨ͜ͱ class App extends Component { constructor()
{ super(); this.state = { input: “͜ΜʹͪΘ” }; } componentWillRecieveProps(nextProps) { this.setState({ input : nextProps.input }) } } ίϯετϥΫλҰ͔͠ݺΕͳ͍ͷͰɺ ຖճॲཧ͍ͨ͠ͷϥΠϑαΠΫϧϝιου ʹॻ͔ͳ͍ͱμϝ 4UBUFͷߋ৽TFU4UBUF ΛΘͳ͍ͱμϝ
όάͷΓ͚͕͔ͬͨ͠ ɹಉ͡ඇಉظॲཧ͕̎ճಈ͍ͯ͠·͏͕ൃੜɻ 3FBDU3FEVYͷόάͩͱࢥ͍ͬͯͨΒɺ+BWBଆͷόάͩͬ ͨͱɻ݁ہαʔόαΠυͷॲཧʹ͕͕͋ͬͨɺ 1SPNJTFपΓͷॲཧΛࢄʑٙͬͯ͠·ͬͨɻ ϋϚͬͨ͜ͱ
*&Ͱಈ͔ͳ͍ ͣͬͱ$ISPNFͰσόοά͓ͯ͠Γɺ։ൃޙʹ*&Ͱς ετΛ࢝ΊͨΒಈ͔ͳͯ͘ྦ ˠOPEFMJTUGPS&BDI1SPNJTF͕ରԠ͍ͯ͠ͳ͍ ɹCBCFMQPMZpMMͰࣄͳ͖ΛಘΔɻ ϋϚͬͨ͜ͱ
ηογϣϯ͕ΕΔ αʔόʔଆʹॲཧ͕ඈͳ͍͕͍࣌ؒͨΊɺηογϣ ϯΕʹͳΓ͘͢ฤू༰͕ඈΜͩͱϢʔβ͔Βۤ ͕ʜ 3FBDUͷͰͳ͍Ͱ͕͢ʣ ࣗಈอଘػೳΛΈࠐΈ·ͨ͠ɻ ϋϚͬͨ͜ͱ
✨K2VFSZͱͷڞଘ K2VFSZͷ΄͏͕ศརͳͱ͜Ζͬͨɻ K26FSZ6*ͷ%% ϦαΠζ αϜωΠϧͳͲ ͨ͜͠ͱ
✨ඈͼඈͼʹSFOEFS͍ͨ͠ طଘKTQ෦ͷҰ෦Λ͍͔ͨͬͨͷͰɺϧʔτϨϯμ Ϧϯάͤͣ ɺαϒπϦʔΛ͖ͳͱ͜ʹϨϯμϦϯά͢ Δ3FBDUίϯϙʔωϯτΛ࡞͠·ͨ͠ɻ طଘͷ+41ͷλά෦ͳͲΛ͏ඞཁ͕͋ͬͨͨΊɻ ͪΐͬͱτϦοΩʔͳ͜ͱΛ͍ͯ͠Δɻ ࢀߟ63-IUUQTRJJUBDPNULSLUJUFNTDFBBGFBG ͨ͜͠ͱ
<div> ͜͜Λrender </div> <tag:button hoge=“button”>ADD</button> <!— JSPͷλάΛ͍͍ͨ--> <div> ͜͜Λrender </div>
σʔλཧͷҰݩԽ͕ग़དྷͨ TUBUFʹΑΓσʔλΛҰݩཧͰ͖ͨ͜ͱͰɺՄಡੑɾอ कੑ্͕͕ͬͨ ͬͯΈͯΑ͔ͬͨ͜ͱ
ίϯϙʔωϯτ୯ҐͷઃܭʹϝϦοτ͕͋ͬͨ w ઃܭ͍͢͠ w ίʔυಡΈ͍͢ w ྲྀ༻͍͢͠ w ͕͋ͬͨͱ͖ͷӨڹൣғগͳ͍ ͬͯΈͯΑ͔ͬͨ͜ͱ
όά͕গͳ͔ͬͨ 3FBDUىҼͷຊ൪όάग़͍ͯͳ͍ ͬͯΈͯΑ͔ͬͨ͜ͱ
3FBDUKTͷόʔδϣϯΞοϓͷਵ ࣮·ͩWܥΛ͓ͬͯΓɺ ݱࡏɺWܥͷόʔδϣϯΞοϓରԠதɻ ʢDPNQPOFOU8JMM3FDFJWF1SPQTͳ͘ͳͬͨΓഁյతͳม ߋ͕͋ͬͯগͭ͠Β͍ʣ ࠓޙͷ՝
ଞػೳͷల։ ৽ػೳʹ͍ͭͯ3FBDUΛ͏͖͔ΜͰ͍Δɻ ͦͷޙɺ͞΄ͲෳࡶͰͳ͍ը໘Λ3FBDUΛΘͣʹ࡞ͬ ͕ͨɺऴΘͬͯΈΔͱ3FBDUͬͨํ͕ྑ͔ͬͨͱͷ ࠓޙͷ՝
σ ΟϨΫτϦߏϑΝΠϧߏ ݱঢ়ɺDPNQPOFOUBDUJPOSFEVDFS̍ͭͷKTYϑΝΠϧ ʹॻ͍͍ͯ·͕͢ɺଞػೳʹల։͢ΔͳΒϑΝΠϧΛ ͚ͳ͍ͱ͍͚ͳ͍ ࠓޙͷ՝
ࣗಈςετ 3FBDU$PNQPOFOUࣗಈςετ͍͕ͨ͠ग़དྷ͍ͯͳ͍ ࠓޙͷ՝
ɾࣄલ४උ͋·Γ͍Βͳ͍͕ɺϧʔϧΛ֮͑Δ·Ͱ ͦΕͳΓʹେมͩͬͨ ɾͬͨϝϦοτे͋ͬͨɻ ɾݹ͍γεςϜΛ৽͍ͯ͘͠Ξϓϩʔνͱͯ͠ঃʑʹ 3FBDUʹஔ͖͍͑ͯ͘ͷྑ͍͔͠Ε·ͤΜ ·ͱΊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠