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

B887cc104275187588fae7d58790563e?s=47 A1
February 19, 2019

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

2019.2.19 Rakus Meetup Tokyo #2 フロントエンドNight発表資料

B887cc104275187588fae7d58790563e?s=128

A1

February 19, 2019
Tweet

Transcript

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

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

  3. ୲౰αʔϏεͷ͝঺հ

  4. w ։ൃͨ͠ͷ͸೥ޙ൒Ͱ͢ w ࠷৽ͷػೳʢIPPLTͳͲʣͷ࿩͸ग़͖ͯ·ͤΜ ͸͡Ίʹ

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

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

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

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

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

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

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

    ͑ͬʂʁ
  12. ͭΒ͍ʢԕ͍໨ʣ

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

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

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

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

    render() { return ( <div> Hello World </div> ) } }
  17. ϚʔΫΞοϓΛγϯϓϧʹอͯΔ ͨͩͰ͑͞ΰνϟ͍͍ͭͯΔ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>
  18. ྲྀߦ͍ͬͯͨ ϒϩάهࣄͳͲ৘ใʹ͸ࠔΒͳ͍ɻ ҆௚ͳཧ༝Ͱ͕͢ɺྲྀߦ͍ͬͯΔ΋ͷʹ͸ཧ༝͕͋Δɻ ྑ͍ͱࢥ͑Δ΋ͷͳΒ͋͑ͯٯΒ͏ඞཁ͸ͳ͍ɻ ؾܰʹ࡞Γ௚͠Ͱ͖ͳ͍ͷͰʢಛʹUP#ͷαʔϏεͳͷͰʣ ͙͢ഇΕΔ΋ͷΛ࠾༻͢Δͷ͸ਏ͍ 3FBDUKTΛબ୒ͨ͠ཧ༝

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

  20. 3FBDU3FEVYͰߦͧ͘ʂ

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

  22. &OIBODFE0CKFDU-JUFSBMT ࣄલʹ͓͍֮͑ͯͨํ͕ྑ͍ϕετ̏ var foo = 0; var obj = {foo};

    // {foo: foo} ͱઃఆͨ͠ͷͱಉ͡ // Computed (dynamic) property names var key = "foo"; var obj = { [key]: 0, [key + "_bar"]: 1 };
  23. 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Λߋ৽͢Δͱ͖ʹΑ͘࢖ΘΕΔ
  24. 0SFJMMZͷʮೖ໳3FBDUʯΛճ͠ಡΈ͠·ͨ͠ɻ ˞ࠓͱͳͬͯ͸಺༰ݹ͍Ͱ͢ɻ౰࣌͸͜ͷຊ͔͠ͳ͔ͬͨͱهԱɻ ࣄલ४උʢ3FBDUKTͷֶशʣ ެࣜαΠτ͔ɺ8FCͷهࣄͰ΋ྑ͍ͱࢥ͍·͢ɻ

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

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

  27. ࣮ࡍ΍ͬͯΈͯ

  28. SFOEFS͞Εͳ͍໰୊ ɾ$PNQPOFOUͷίϯετϥΫλ͕ຖճݺ͹ΕΔͱצҧ͍͍ͯͨ͠ɻ ɾTUBUFΛ௚઀ॻ͖׵͍͑ͯͨͨΊ࠶SFEOFS͞Εͳ͔ͬͨ ϋϚͬͨ͜ͱ class App extends Component { constructor()

    { super(); this.state = { input: “͜ΜʹͪΘ” }; } componentWillRecieveProps(nextProps) { this.setState({ input : nextProps.input }) } } ίϯετϥΫλ͸Ұ౓͔͠ݺ͹Εͳ͍ͷͰɺ ຖճॲཧ͍ͨ͠΋ͷ͸ϥΠϑαΠΫϧϝιου ʹॻ͔ͳ͍ͱμϝ 4UBUFͷߋ৽͸TFU4UBUF Λ࢖Θͳ͍ͱμϝ
  29. όάͷ੾Γ෼͚͕೉͔ͬͨ͠ ɹಉ͡ඇಉظॲཧ͕̎ճಈ͍ͯ͠·͏໰୊͕ൃੜɻ 3FBDU3FEVYͷόάͩͱࢥ͍ͬͯͨΒɺ+BWBଆͷόάͩͬ ͨͱɻ݁ہαʔόαΠυͷॲཧʹ໰୊͕͕͋ͬͨɺ 1SPNJTFपΓͷॲཧΛࢄʑٙͬͯ͠·ͬͨɻ ϋϚͬͨ͜ͱ

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

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

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

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

    <div> ͜͜Λrender </div> <tag:button hoge=“button”>ADD</button> <!— JSPͷλάΛ࢖͍͍ͨ--> <div> ͜͜Λrender </div>
  34. σʔλ؅ཧͷҰݩԽ͕ग़དྷͨ TUBUFʹΑΓσʔλΛҰݩ؅ཧͰ͖ͨ͜ͱͰɺՄಡੑɾอ कੑ্͕͕ͬͨ ΍ͬͯΈͯΑ͔ͬͨ͜ͱ

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

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

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

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

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

  40. ࣗಈςετ 3FBDU$PNQPOFOU΋ࣗಈςετ͍͕ͨ͠ग़དྷ͍ͯͳ͍ ࠓޙͷ՝୊

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

  42. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠