Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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ϑϩϯτΤϯυͷઃܭʹۜͷ஄ؙ͸͋Γ·ͤΜͰͨ͠

    View full-size slide

  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

    View full-size slide

  3. UGDPO
    l8FCϑϩϯτΤϯυͷઃܭzͷείʔϓ
    w ຊࢿྉʹ͓͚ΔείʔϓΛఆٛ͠·͢
    w جຊతʹ͸ϒϥ΢βʹ)5.-ͱαϒϦιʔεΛ഑৴ͯ͠6*Λఏڙ͢Δ෦෼
    ͷ࣮૷܈͕ର৅
    w ͍ΘΏΔ/FYU/VYUͷΑ͏ͳ#''αʔόʔ΍ɺτϥσΟγϣφϧ.7$αʔ
    όʔʹ͓͚Δ7JFX΋ؚ·ΕΔ
    w αʔόʔ͕ੜ੒ͨ͠)5.-ΛΩϟογϡ͢ΔԿΒ͔ͷ࢓૊Έ΋ؚΉ
    w ࣮૷্ͷίʔυσβΠϯ΍ϏϧυઓུͷৄࡉͳͲ͸ɺ͢΂ͯେલఏͷΞʔΩς
    Ϋνϟʹैଐ͢Δ΋ͷͱͯ͠είʔϓ֎ɻ֤छ؍ଌൣғͷภΓ͸͝༰ࣻΛɻ

    View full-size slide

  4. UGDPO
    Ͱ͸΍͍͖ͬͯ·͠ΐ͏

    View full-size slide

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

    View full-size slide

  6. UGDPO
    ༻ޠ੔ཧ
    w 41" 4JOHMF1BHF"QQMJDBUJPOʣ
    w ը໘ભҠ࣌ʹϒϥ΢β͕)5.-Λϑϧϩʔυ͢Δ୅ΘΓʹ+BWB4DSJQUͰ੍ޚ͢Δ
    w ͍͍ͩͨ$43 $MJFOU4JEF3FOEFSJOH
    ʹڧ͘ґଘ͢Δ
    w .1" .VMUJ1BHF"QQMJDBUJPOʣ
    w ը໘ભҠ࣌ʹϒϥ΢β͕৽͍͠63-͔Βऔಘͨ͠)5.-Λϑϧϩʔυ͢Δ
    w ͍͍ͩͨ443 4FSWFS4JEF3FOEFSJOH
    ʹڧ͘ґଘ͢ΔPSͨͩͷ੩త)5.-܈

    View full-size slide

  7. UGDPO
    ఆظతʹු্͢Δٞ࿦
    w 41"͸ίετ͕ߴ͍ʁSFG
    w ͳʹΛ΋ͬͯίετ͕ߴ͍ͱ͍͏ͷ͔࣍ୈͳͷ͚ͩͲŋŋŋ
    w ݸਓతʹ͸41"͕ద͞ͳ͍؀ڥɺ༻్͸ଘࡏ͢Δͱ͍͏఺͸ಉҙͰ͖Δ
    w །ҰઈରతͳΞϯαʔͷ௥ٻ͸ࡍݶ͕ͳ͍ͷͰɺΈͳ͞Μ޷͖ʹ΍Γ·͠ΐ͏
    w .1"ͰͲ͏΍ͬͯ࡞ΔͷʁSFG
    w $43'ରࡦͱ͔ϒϥ΢βόοΫͯ͠΋յΕͳ͍ϑΥʔϜͱ͔
    w τϥσΟγϣφϧ.7$ੈ୅ͱ/FYU/VYUωΠςΟϒੈ୅ͷܾఆతͳִઈ͕͋Γͦ͏
    w K2VFSZ΋ݸਓతʹ͸΋͏৮Γͨ͘ͳ͍͚Ͳɺࡉʑͱ࢒Δͷ΋ཧղͰ͖Δ

    View full-size slide

  8. UGDPO
    41".1"৅௃తͳ෼ྨͰ͸͋Δ͕
    w .1"ͷதʹہॴతͳ41"͕ຒΊࠐ·ΕΔ͜ͱ΋͋Δ͠
    w ݕࡧը໘ͷҰ෦͚ͩͱ͔ɺαʔόʔབྷΊͨঢ়ଶ؅ཧ͕໘౗ͳϑΥʔϜपΓ͚ͩͱ͔
    w /FYU/VYU΋41"͚ͩͰͳ͘44( 4UBUJD4JUF(FOFSBUJPO
    Ͱ.1"Ͱ͖Δ
    w .1"ͩͬͯ$43͢Δ͠ɺ41"ͩͬͯ443͢Δ
    w ڧ͍͍ͯ͏ͳΒ41"͸ϨΨγʔͱ͸͋·ΓݴΘΕͳ͍ٕज़܈ͳ܏޲

    View full-size slide

  9. UGDPO
    41"PS.1"Ͱରൺͯ͠
    ٞ࿦͢Δ͸طʹແཧےͬΆ͍

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. UGDPO
    8FCͷઃܭʹ͓͍ͯԿΛॏཁࢹ͍ͯ͠Δͷ͔
    w ੑೳʢύϑΥʔϚϯεʣ͸ιϑτ΢ΣΞͷॏཁͳՁ஋Ͱ͋Δ
    w ఏڙ෺ͷಛੑˠ࣮ݱ͍ͨ͠Ϣʔβʔମݧ͔ΒΞʔΩςΫνϟΛٯࢉ
    w ฒߦͯ͠ɺίʔυͷϝϯςφϯεੑ΍शख़౓ɺطଘٕज़ʹ߹Θͤͨํ਑͕࿅ΒΕΔ
    w ΞʔΩςΫνϟͷલఏ੍໿৚݅ͱͯ͠૊৫౎߹Λ͢Γ߹ΘͤΔ෦෼͸େ୾ʹׂѪ
    w τϥσΟγϣφϧ.7$ͷ΄͏͕ख׳Εͨ૊৫΋͋Ε͹ɺ/FYU/VYU͡Όͳ͍ͱ࡞Γ
    Α͏͕ແ͍૊৫ͩͬͯ͋Δ
    w ࣮ߦ࣌ͷੑೳ͸ͦͦ͜͜ʹɺѹ౗తϝϯςφϯεੑ΍ӡ༻ೳྗ͕ඞཁͳ৔໘΋͋Δ
    w ۚમίετ౳ɺຊདྷߟ͑ΒΕΔͦͷଞͷ؍఺͸೴಺ิ׬͓ئ͍͠·͢ʂ

    View full-size slide

  13. UGDPO
    େ͖͍ؔ৺ࣄ͸)5.-ͷલޙΛ଎͘͢Δ͜ͱ
    w )5.-ΛಡΈࠐΉ·Ͱ
    w ϒϥ΢β͕)5.-Λϩʔυ͢Δ·Ͱɺయܕతʹ͸ΩϟογϡʹΑΔฦ٫଎౓Ͱղܾ
    w Ϣʔβʔґଘ৘ใ͕ͨ͘͞Μؚ·ΕΔͱΩϟογϡͰ͖ͳ͍ͷͰࠔΔ͜ͱ͸͋Δ
    w શൠతʹૣ͍ʹӽͨ͜͠ͱ͸ͳ͍ɺઃܭΛϛεΒͳ͚Ε͹ͦ͏ͦ͏஗͘ͳΒͳ͍
    w )5.-ΛಡΈࠐΜͩޙ
    w ϒϥ΢β͕αϒϦιʔεΛϩʔυͯ͠ɺϢʔβʔʹදࣔͱૢ࡞Λఏڙ͢Δ·Ͱ
    w ϨϯμϦϯάύεͷ࠷దԽ͸΋ͪΖΜɺۙ೥ͩͱ+4όϯυϧͷංେԽ͕૦ۄͷର৅
    w ϝσΟΞαΠτͰ༨ܭͳ͜ͱͯ͠஗͍ͱ൵͍͕͠ɺ4BB4ͩͱڐ༰͠΍͢͞͸͋Δ

    View full-size slide

  14. UGDPO
    Ͳ͜Ͱ)5.-Λੜ੒͢Δ͔
    Ͳ͜ͷΩϟογϡΛޮ͔ͤΔ͔
    ͲΕ͘Β͍+BWB4DSJQUϔϏʔʹ͢Δ͔

    View full-size slide

  15. UGDPO
    Ͳ͜Ͱ)5.-Λੜ੒͢Δ͔
    w αʔόʔαΠυ
    w Α͏͸443ɺ/PEFKTҰ଒Ͱ΋8PSE1SFTTͰ΋3VCZPO3BJMTͰ΋͍͍
    w ΫϥΠΞϯταΠυ
    w Α͏͸$43ɺ͓Εͨͪͷ+BWB4DSJQUͱ%0."1*
    w $43ΦϯϦʔͳΒඞཁʹԠͯ͡Ϋϩʔϥʔ޲͚ͷ੩త)5.-ੜ੒αʔϏε͕෇ਵ
    w ΤοδαΠυ
    w ۙ೥ɺ$%/ʙΫϥ΢υۀऀΛத৺ʹΤοδͰॲཧͰ͖Δ؀ڥ͕੔͍ͭͭ͋Δ
    w 3FNJYͷΑ͏ʹΤοδ্Ͱͷ࣮ߦΛ೦಄ʹ͓͍ͨϑϨʔϜϫʔΫ΋ͰͯΔ

    View full-size slide

  16. UGDPO
    Ͳ͜ͷΩϟογϡΛޮ͔ͤΔ͔
    w લఏɺ৭ʑͳͱ͜ΖͰΩϟογϡ͸Ͱ͖Δ
    w αʔόʔΞϓϦέʔγϣϯʢσʔλϕʔεͿͪࠐΈͱ͔ΦϯϝϞϦͱ͔ʣ
    w ϛυϧ΢ΣΞʢOHJOYQSPYZDBDIFͱ͔ɺ7BSOJTIͱ͔ʣ
    w $%/ʢΩϟογϡ͍͖ͩ͢ίϯςϯπσϦόϦʔωοτϫʔΫ͞Μʣ
    w ϒϥ΢βʢϩʔΧϧΩϟογϡɺ4FSWJDF8PSLFS$BDIF4UPSBHFͱ͔ʣ
    w )5.-͓ΑͼࡐྉͷΩϟογϡ͸)5.-ͷલ޻ఔΛ଎͘͢Δ
    w αϒϦιʔεͷΩϟογϡ͸)5.-ͷޙ޻ఔΛ଎͘͢Δ

    View full-size slide

  17. UGDPO
    ͲΕ͘Β͍+BWB4DSJQUϔϏʔʹ͢Δ͔
    w +BWB4DSJQUͷόϯυϧαΠζ͸ɺΫϥΠΞϯταΠυͷ࢓ࣄྔͱൺྫ
    w ۃ୺ͳ࿩ɺ+BWB4DSJQUθϩͰ)5.-࠷଎ฦ٫͠·͘Δ͚ͩͰ༏উՄೳ
    w ݱ࣮ʹ͸ͦ͏΋͍͔ͳ͍ͷͰόϯυϧ෼ׂ΍ݮྔʹྭΉΘ͚Ͱ͋Δ
    w ϔϏʔʹͳΓ͏Δύϥϝʔλ
    w ϏδϡΞϧදݱͷ༗ແʢ$44ͰղܾՄೳͳ΋ͷ΋૿͍͑ͯΔ͸ͣͳΜ͕ͩʜʣ
    w ΠϯλϥΫγϣϯ͕ඞཁͳ6*ͷ༗ແɺ͓Αͼͦͷෳࡶੑ
    w $43ͷ༗ແ
    w ϑϧελοΫ41"ϑϨʔϜϫʔΫͷ ༧๷త
    ಋೖͷ༗ແ

    View full-size slide

  18. UGDPO
    ୤ઢαόΫϥؒͷঢ়ଶҾ͖ܧ͗ΛͲ͏͢Δ͔
    w +4քͰఆ൪Խͨ͠αόΫϥॲཧڞ௨ԽͰඞཁʹͳΔঢ়ଶͷҾ͖ܧ͗
    w 3FBDU͔Β)ZESBUJPOքʢͱ͸͍͍ͬͨʜʣͷ࠷ڧΛୣऔͨͦ͠͏ͳ֤Ґ
    w 2XJLɺ.BSLPɺ"TUSPɺ΄͔ʹ΋͚͋ͬͨͲ࿦ஃͷҰ෦͕݂ͷؾଟ͍
    w )ZESBUJPO࿦ஃͷུ֓ʹ͍ͭͯ
    w 3FQMBZBCMFWT3FTVNBCMFαʔόʔͰ΍ͬͨॲཧΛ΍Γ௚͔͢ɺଓ͖͔Β΍ΕΔ͔
    w "MMTUBHFWT1BSUJBMTUBUFαʔόʔ͔ΒશͯΛҾ͖ܧ͙ͷ͔ɺҰ෦Λબ୒Ͱ͖Δ͔
    w *OJUJBMMZWT1SPHSFTTJWF -B[Z
    ॳظԽѻ͍ʹͳΔͷ͔ɺඞཁʹԠͯ͡஗ԆͰ͖Δ͔

    View full-size slide

  19. UGDPO
    ఏڙ෺ͷཧ૝ঢ়ଶʹ͋Θͤͯ
    ͜ΕΒͷϙΠϯτΛ૯߹తʹ൑அ͢Δ

    View full-size slide

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

    View full-size slide

  21. UGDPO
    )PUXJSF 3VCZPO3BJMT
    ˞ࢀߟϦιʔε
    w 5VSCPಈతͳը໘ߋ৽ʹ͓͍ͯ΋)5.-ੜ੒Λαʔόʔʹୗ͢
    w ݹͷQKBY͕࢓૊Έͱͯ͠શମతʹݡ͘ͳͬͨΑ͏ͳΠϝʔδ
    w 4UJNVMVTτϥσΟγϣφϧ.7$΁ͷτοϐϯάͱͯ͠͸े෼ͦ͏
    w 3BJMT8BZʹ͓͍ͯந৅Խ͞Ε͍ͯΔ෼ϑϩϯτෳࡶҊ݅͸ݶք͋Δ͔΋ʢΤΞϓ
    w ͍ΘΏΔl8FCϑϩϯτΤϯυzͰΩϟϦΞங͍͍ͯΔਓʹ͸ʜ
    w 3FBDU/FYUKTͱ͔7VF/VYUKTΛલఏͱͨ͠शख़ͱ͸͕͢͞ʹੈք؍ͷڑ཭͕͋Δ

    View full-size slide

  22. UGDPO
    ϝϧΧϦ8FC˞ࢀߟϦιʔε
    w (BUTCZͷ44(Ͱ੩తͳ41"ϦιʔεΛग़ྗ͍ͯ͠Δ໛༷
    w ੩తͳͷͰ/PEFKTαʔόʔʹґଘͤͣεέʔϧՄೳʹͳΔબ୒
    w 443͠ͳ͍ͷ͸঎඼఺਺ͱߋ৽ස౓ΛؑΈΔʹ/PEFKTαʔόʔ΍
    )5.-ͷણࡉͳΩϟογϡͷ؅ཧΛ͢ΔίετʹΑΔҙࢥܾఆΆ͍
    w ܰྔͳ41"Λҡ࣋͢Δ࿹ྗͱ஌ੑΛ݉Ͷඋ͑ͨਓࡐ܈͕ඞཁ
    w 41"Ͱ&$Λ΍Δ΂͖Ͱͳ͍ͱ͍͏ٞ࿦΋͋Δ͕έʔεόΠέʔε

    View full-size slide

  23. UGDPO
    4IPQJGZ)ZESPHFO 3FBDU4FSWFS$PNQPOFOUT

    ˞ࢀߟϦιʔε
    w 3FBDUͰ਺೥དྷଓ͍͍ͯΔ44341"ͷྲྀΕΛ࠷దԽ͢ΔࢼΈ
    w )5.- γϦΞϥΠζ͞ΕͨԾ૝%0.ͷૉΛؚΉ

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

    View full-size slide

  24. UGDPO
    ·ͱΊʂ

    View full-size slide

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

    View full-size slide

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

    View full-size slide