$30 off During Our Annual Pro Sale. View Details »

SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計

SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計

Ayumu Sato

May 14, 2022
Tweet

More Decks by Ayumu Sato

Other Decks in Programming

Transcript

  1. UGDPO !BIPNV "ZVNV4BUP c5&$)'&&%$0/'&3&/$& 41".1"ٞ࿦ͷ၆ᛌͱ ݱ୅ʹ͓͚ΔઃܭͷϙΠϯτ 8FCϑϩϯτΤϯυͷઃܭʹۜͷ஄ؙ͸͋Γ·ͤΜͰͨ͠

  2. UGDPO w 5FDI'FFE0 ffi DJBM&YQFSU/P w 8FC'SPOUFOE&OHJOFFS 71P& )30 ff

    i DFS  w 0 ff FSTcPWFS fl PX JOD w "VUIPSPG௒଎ຊ w X!DI !BIPNV
  3. UGDPO l8FCϑϩϯτΤϯυͷઃܭzͷείʔϓ w ຊࢿྉʹ͓͚ΔείʔϓΛఆٛ͠·͢ w جຊతʹ͸ϒϥ΢βʹ)5.-ͱαϒϦιʔεΛ഑৴ͯ͠6*Λఏڙ͢Δ෦෼ ͷ࣮૷܈͕ର৅ w ͍ΘΏΔ/FYU/VYUͷΑ͏ͳ#''αʔόʔ΍ɺτϥσΟγϣφϧ.7$αʔ όʔʹ͓͚Δ7JFX΋ؚ·ΕΔ

    w αʔόʔ͕ੜ੒ͨ͠)5.-ΛΩϟογϡ͢ΔԿΒ͔ͷ࢓૊Έ΋ؚΉ w ࣮૷্ͷίʔυσβΠϯ΍ϏϧυઓུͷৄࡉͳͲ͸ɺ͢΂ͯେલఏͷΞʔΩς Ϋνϟʹैଐ͢Δ΋ͷͱͯ͠είʔϓ֎ɻ֤छ؍ଌൣғͷภΓ͸͝༰ࣻΛɻ
  4. UGDPO Ͱ͸΍͍͖ͬͯ·͠ΐ͏

  5. UGDPO 41"WT.1" ͍ͬͯ͏ϊϦͷٞ࿦Λ໨ʹͨ͜͠ͱ͸͋ΔͰ͠ΐ͏͔ʁ

  6. UGDPO ༻ޠ੔ཧ w 41" 4JOHMF1BHF"QQMJDBUJPOʣ w ը໘ભҠ࣌ʹϒϥ΢β͕)5.-Λϑϧϩʔυ͢Δ୅ΘΓʹ+BWB4DSJQUͰ੍ޚ͢Δ w ͍͍ͩͨ$43 $MJFOU4JEF3FOEFSJOH

    ʹڧ͘ґଘ͢Δ w .1" .VMUJ1BHF"QQMJDBUJPOʣ w ը໘ભҠ࣌ʹϒϥ΢β͕৽͍͠63-͔Βऔಘͨ͠)5.-Λϑϧϩʔυ͢Δ w ͍͍ͩͨ443 4FSWFS4JEF3FOEFSJOH ʹڧ͘ґଘ͢ΔPSͨͩͷ੩త)5.-܈
  7. UGDPO ఆظతʹු্͢Δٞ࿦ w 41"͸ίετ͕ߴ͍ʁSFG w ͳʹΛ΋ͬͯίετ͕ߴ͍ͱ͍͏ͷ͔࣍ୈͳͷ͚ͩͲŋŋŋ w ݸਓతʹ͸41"͕ద͞ͳ͍؀ڥɺ༻్͸ଘࡏ͢Δͱ͍͏఺͸ಉҙͰ͖Δ w །ҰઈରతͳΞϯαʔͷ௥ٻ͸ࡍݶ͕ͳ͍ͷͰɺΈͳ͞Μ޷͖ʹ΍Γ·͠ΐ͏

    w .1"ͰͲ͏΍ͬͯ࡞ΔͷʁSFG w $43'ରࡦͱ͔ϒϥ΢βόοΫͯ͠΋յΕͳ͍ϑΥʔϜͱ͔ w τϥσΟγϣφϧ.7$ੈ୅ͱ/FYU/VYUωΠςΟϒੈ୅ͷܾఆతͳִઈ͕͋Γͦ͏ w K2VFSZ΋ݸਓతʹ͸΋͏৮Γͨ͘ͳ͍͚Ͳɺࡉʑͱ࢒Δͷ΋ཧղͰ͖Δ
  8. UGDPO 41".1"৅௃తͳ෼ྨͰ͸͋Δ͕ w .1"ͷதʹہॴతͳ41"͕ຒΊࠐ·ΕΔ͜ͱ΋͋Δ͠ w ݕࡧը໘ͷҰ෦͚ͩͱ͔ɺαʔόʔབྷΊͨঢ়ଶ؅ཧ͕໘౗ͳϑΥʔϜपΓ͚ͩͱ͔ w /FYU/VYU΋41"͚ͩͰͳ͘44( 4UBUJD4JUF(FOFSBUJPO Ͱ.1"Ͱ͖Δ

    w .1"ͩͬͯ$43͢Δ͠ɺ41"ͩͬͯ443͢Δ w ڧ͍͍ͯ͏ͳΒ41"͸ϨΨγʔͱ͸͋·ΓݴΘΕͳ͍ٕज़܈ͳ܏޲
  9. UGDPO 41"PS.1"Ͱରൺͯ͠ ٞ࿦͢Δ͸طʹແཧےͬΆ͍

  10. UGDPO ఏڙ෺ͷಛੑͱϢʔβʔମݧΛ;·͑ͯߟ͑ͨΒ ʮ݁Ռతʹl41"PS.1"ͬΆ͍ઃܭzʹͳͬͨʯ ͘Β͍ͷԹ౓ײ͕ద੾ͦ͏ ˞ैདྷతʹ΋.JDSP'SPOUFOETΛಥ͖٧ΊΔͱ)5.-அยͷ$PNQPTJUJPOେձʹͳΔͷͰࠓߋײ͸͋Δ

  11. UGDPO ݱ୅8FCͷઃܭʹ͓͚Δ ؔ৺ࣄͷ͓͞Β͍

  12. UGDPO 8FCͷઃܭʹ͓͍ͯԿΛॏཁࢹ͍ͯ͠Δͷ͔ w ੑೳʢύϑΥʔϚϯεʣ͸ιϑτ΢ΣΞͷॏཁͳՁ஋Ͱ͋Δ w ఏڙ෺ͷಛੑˠ࣮ݱ͍ͨ͠Ϣʔβʔମݧ͔ΒΞʔΩςΫνϟΛٯࢉ w ฒߦͯ͠ɺίʔυͷϝϯςφϯεੑ΍शख़౓ɺطଘٕज़ʹ߹Θͤͨํ਑͕࿅ΒΕΔ w ΞʔΩςΫνϟͷલఏ੍໿৚݅ͱͯ͠૊৫౎߹Λ͢Γ߹ΘͤΔ෦෼͸େ୾ʹׂѪ

    w τϥσΟγϣφϧ.7$ͷ΄͏͕ख׳Εͨ૊৫΋͋Ε͹ɺ/FYU/VYU͡Όͳ͍ͱ࡞Γ Α͏͕ແ͍૊৫ͩͬͯ͋Δ w ࣮ߦ࣌ͷੑೳ͸ͦͦ͜͜ʹɺѹ౗తϝϯςφϯεੑ΍ӡ༻ೳྗ͕ඞཁͳ৔໘΋͋Δ w ۚમίετ౳ɺຊདྷߟ͑ΒΕΔͦͷଞͷ؍఺͸೴಺ิ׬͓ئ͍͠·͢ʂ
  13. UGDPO େ͖͍ؔ৺ࣄ͸)5.-ͷલޙΛ଎͘͢Δ͜ͱ w )5.-ΛಡΈࠐΉ·Ͱ w ϒϥ΢β͕)5.-Λϩʔυ͢Δ·Ͱɺయܕతʹ͸ΩϟογϡʹΑΔฦ٫଎౓Ͱղܾ w Ϣʔβʔґଘ৘ใ͕ͨ͘͞Μؚ·ΕΔͱΩϟογϡͰ͖ͳ͍ͷͰࠔΔ͜ͱ͸͋Δ w શൠతʹૣ͍ʹӽͨ͜͠ͱ͸ͳ͍ɺઃܭΛϛεΒͳ͚Ε͹ͦ͏ͦ͏஗͘ͳΒͳ͍

    w )5.-ΛಡΈࠐΜͩޙ w ϒϥ΢β͕αϒϦιʔεΛϩʔυͯ͠ɺϢʔβʔʹදࣔͱૢ࡞Λఏڙ͢Δ·Ͱ w ϨϯμϦϯάύεͷ࠷దԽ͸΋ͪΖΜɺۙ೥ͩͱ+4όϯυϧͷංେԽ͕૦ۄͷର৅ w ϝσΟΞαΠτͰ༨ܭͳ͜ͱͯ͠஗͍ͱ൵͍͕͠ɺ4BB4ͩͱڐ༰͠΍͢͞͸͋Δ
  14. UGDPO Ͳ͜Ͱ)5.-Λੜ੒͢Δ͔ Ͳ͜ͷΩϟογϡΛޮ͔ͤΔ͔ ͲΕ͘Β͍+BWB4DSJQUϔϏʔʹ͢Δ͔

  15. UGDPO Ͳ͜Ͱ)5.-Λੜ੒͢Δ͔ w αʔόʔαΠυ w Α͏͸443ɺ/PEFKTҰ଒Ͱ΋8PSE1SFTTͰ΋3VCZPO3BJMTͰ΋͍͍ w ΫϥΠΞϯταΠυ w Α͏͸$43ɺ͓Εͨͪͷ+BWB4DSJQUͱ%0."1*

    w $43ΦϯϦʔͳΒඞཁʹԠͯ͡Ϋϩʔϥʔ޲͚ͷ੩త)5.-ੜ੒αʔϏε͕෇ਵ w ΤοδαΠυ w ۙ೥ɺ$%/ʙΫϥ΢υۀऀΛத৺ʹΤοδͰॲཧͰ͖Δ؀ڥ͕੔͍ͭͭ͋Δ w 3FNJYͷΑ͏ʹΤοδ্Ͱͷ࣮ߦΛ೦಄ʹ͓͍ͨϑϨʔϜϫʔΫ΋ͰͯΔ
  16. UGDPO Ͳ͜ͷΩϟογϡΛޮ͔ͤΔ͔ w લఏɺ৭ʑͳͱ͜ΖͰΩϟογϡ͸Ͱ͖Δ w αʔόʔΞϓϦέʔγϣϯʢσʔλϕʔεͿͪࠐΈͱ͔ΦϯϝϞϦͱ͔ʣ w ϛυϧ΢ΣΞʢOHJOYQSPYZDBDIFͱ͔ɺ7BSOJTIͱ͔ʣ w $%/ʢΩϟογϡ͍͖ͩ͢ίϯςϯπσϦόϦʔωοτϫʔΫ͞Μʣ

    w ϒϥ΢βʢϩʔΧϧΩϟογϡɺ4FSWJDF8PSLFS$BDIF4UPSBHFͱ͔ʣ w )5.-͓ΑͼࡐྉͷΩϟογϡ͸)5.-ͷલ޻ఔΛ଎͘͢Δ w αϒϦιʔεͷΩϟογϡ͸)5.-ͷޙ޻ఔΛ଎͘͢Δ
  17. UGDPO ͲΕ͘Β͍+BWB4DSJQUϔϏʔʹ͢Δ͔ w +BWB4DSJQUͷόϯυϧαΠζ͸ɺΫϥΠΞϯταΠυͷ࢓ࣄྔͱൺྫ w ۃ୺ͳ࿩ɺ+BWB4DSJQUθϩͰ)5.-࠷଎ฦ٫͠·͘Δ͚ͩͰ༏উՄೳ w ݱ࣮ʹ͸ͦ͏΋͍͔ͳ͍ͷͰόϯυϧ෼ׂ΍ݮྔʹྭΉΘ͚Ͱ͋Δ w ϔϏʔʹͳΓ͏Δύϥϝʔλ

    w ϏδϡΞϧදݱͷ༗ແʢ$44ͰղܾՄೳͳ΋ͷ΋૿͍͑ͯΔ͸ͣͳΜ͕ͩʜʣ w ΠϯλϥΫγϣϯ͕ඞཁͳ6*ͷ༗ແɺ͓Αͼͦͷෳࡶੑ w $43ͷ༗ແ w ϑϧελοΫ41"ϑϨʔϜϫʔΫͷ ༧๷త ಋೖͷ༗ແ
  18. UGDPO ୤ઢαόΫϥؒͷঢ়ଶҾ͖ܧ͗ΛͲ͏͢Δ͔ w +4քͰఆ൪Խͨ͠αόΫϥॲཧڞ௨ԽͰඞཁʹͳΔঢ়ଶͷҾ͖ܧ͗ w 3FBDU͔Β)ZESBUJPOքʢͱ͸͍͍ͬͨʜʣͷ࠷ڧΛୣऔͨͦ͠͏ͳ֤Ґ w 2XJLɺ.BSLPɺ"TUSPɺ΄͔ʹ΋͚͋ͬͨͲ࿦ஃͷҰ෦͕݂ͷؾଟ͍ w )ZESBUJPO࿦ஃͷུ֓ʹ͍ͭͯ

    w 3FQMBZBCMFWT3FTVNBCMFαʔόʔͰ΍ͬͨॲཧΛ΍Γ௚͔͢ɺଓ͖͔Β΍ΕΔ͔ w "MMTUBHFWT1BSUJBMTUBUFαʔόʔ͔ΒશͯΛҾ͖ܧ͙ͷ͔ɺҰ෦Λબ୒Ͱ͖Δ͔ w *OJUJBMMZWT1SPHSFTTJWF -B[Z ॳظԽѻ͍ʹͳΔͷ͔ɺඞཁʹԠͯ͡஗ԆͰ͖Δ͔
  19. UGDPO ఏڙ෺ͷཧ૝ঢ়ଶʹ͋Θͤͯ ͜ΕΒͷϙΠϯτΛ૯߹తʹ൑அ͢Δ

  20. UGDPO ͪΐ͏Ͳྑ͍ྗՃݮΛݟ͚ͭΔཱྀ

  21. UGDPO )PUXJSF 3VCZPO3BJMT ˞ࢀߟϦιʔε w 5VSCPಈతͳը໘ߋ৽ʹ͓͍ͯ΋)5.-ੜ੒Λαʔόʔʹୗ͢ w ݹͷQKBY͕࢓૊Έͱͯ͠શମతʹݡ͘ͳͬͨΑ͏ͳΠϝʔδ w 4UJNVMVTτϥσΟγϣφϧ.7$΁ͷτοϐϯάͱͯ͠͸े෼ͦ͏

    w 3BJMT8BZʹ͓͍ͯந৅Խ͞Ε͍ͯΔ෼ϑϩϯτෳࡶҊ݅͸ݶք͋Δ͔΋ʢΤΞϓ w ͍ΘΏΔl8FCϑϩϯτΤϯυzͰΩϟϦΞங͍͍ͯΔਓʹ͸ʜ w 3FBDU/FYUKTͱ͔7VF/VYUKTΛલఏͱͨ͠शख़ͱ͸͕͢͞ʹੈք؍ͷڑ཭͕͋Δ
  22. UGDPO ϝϧΧϦ8FC˞ࢀߟϦιʔε w (BUTCZͷ44(Ͱ੩తͳ41"ϦιʔεΛग़ྗ͍ͯ͠Δ໛༷ w ੩తͳͷͰ/PEFKTαʔόʔʹґଘͤͣεέʔϧՄೳʹͳΔબ୒ w 443͠ͳ͍ͷ͸঎඼఺਺ͱߋ৽ස౓ΛؑΈΔʹ/PEFKTαʔόʔ΍ )5.-ͷણࡉͳΩϟογϡͷ؅ཧΛ͢ΔίετʹΑΔҙࢥܾఆΆ͍ w

    ܰྔͳ41"Λҡ࣋͢Δ࿹ྗͱ஌ੑΛ݉Ͷඋ͑ͨਓࡐ܈͕ඞཁ w 41"Ͱ&$Λ΍Δ΂͖Ͱͳ͍ͱ͍͏ٞ࿦΋͋Δ͕έʔεόΠέʔε
  23. UGDPO 4IPQJGZ)ZESPHFO 3FBDU4FSWFS$PNQPOFOUT ˞ࢀߟϦιʔε w 3FBDUͰ਺೥དྷଓ͍͍ͯΔ443 41"ͷྲྀΕΛ࠷దԽ͢ΔࢼΈ w )5.- γϦΞϥΠζ͞ΕͨԾ૝%0.ͷૉΛؚΉ

    ͸αʔόʔͰ΋ΫϥΠΞϯτͰ΋࡞ΒΕΔ w ΫϥΠΞϯταΠυʹঢ়ଶΛ࣋ͨͳ͍αʔόʔͷΈͰॲཧ͢ΔίϯϙʔωϯτΛ໌ࣔ͢Δ͜ ͱͰɺϒϥ΢βʹ഑৴͢Δ+4ͷྔΛݮΒ͢ w )5.-ͷ഑৴લޙʹ443ॲཧͱ41"ॳظԽ͕௚ྻͩͬͨͷΛɺͱΓ͋͑ͣ)5.-Λε τϦʔϛϯάͰฦ͠ͳ͕Β443ॲཧͱ41"ॳظԽΛฒྻԽͤͨ͞Α͏ͳΠϝʔδ w ͜Ε͕ຊ౰ʹ෱ԻΛ΋ͨΒ͢ͷ͔͸·ͩ൑ผ͕͔ͭͳ͍ॴײ w αόΫϥؒͷ௨৴ྔ΍ΩϟογϡͳͲͷ໘Ͱ໨ʹݟ͑Δӡ༻஌ݟʹ๡͍͠ނʜ
  24. UGDPO ·ͱΊʂ

  25. UGDPO ॴײ w ·ͩ41".1"͍ͬͯΜͷ͔͍ɺ͍ͬͯ͏ײ֮ͷํ͸ਖ਼ৗʂ w )5.-ɺΩϟογϡɺ+4ൺॏͱ͍͏צॴΛ্͓͑ͨ͞ͰɺͲ͏ΞϨϯ δ͍ͯ͠Δͷ͔Λ၆ᛌ͢Δͱཧղָ͕ʹͳΔͱࢥΘΕ·͢ w ͱ͜ΖͰɺ࣌୅͸ΤοδαΠυΤϯδχΞʂ͍ͬͯ͏࿩͕࣍࿮ʹ͘Δͱ ϠϚு͍ͬͯͨͷͰ͕͢ɺͲ͏΍Β֎Ε·ͨ͠

  26. UGDPO ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ʂ ෳۀస৬ϚονϯάϓϥοτϑΥʔϜ0 ff FST΋ΑΖ͘͠Ͷʂ