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

طଘ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&BDI΍1SPNJTF͕ରԠ͍ͯ͠ͳ͍໰୊ ɹ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࢖ͬͨํ͕ྑ͔ͬͨͱͷ੠΋ ࠓޙͷ՝୊

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

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

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

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

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

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

More Decks by A1

Other Decks in Programming

Featured

Transcript