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

Webフロントエンドはなぜ複雑なのか

ozaki25
February 16, 2021

 Webフロントエンドはなぜ複雑なのか

ozaki25

February 16, 2021
Tweet

More Decks by ozaki25

Other Decks in Technology

Transcript

  1. 8FCϑϩϯτΤϯυ͸
    ͳͥෳࡶͳͷ͔

    View Slide

  2. ͸͡Ίʹ
    w 8FCϑϩϯτΤϯυ͸ෳࡶʁ
    w ϥΠϒϥϦ΍πʔϧ͕ཚཱͯ͠Α͘Θ͔ΒΜʂ
    w )5.-Λ࡞Δ͚ͩԿʹͳΜͰΊΜͲ͍͘͞ͷʁ

    View Slide

  3. ͸͡Ίʹ
    w 8FCϑϩϯτΤϯυ͸ෳࡶʁ
    w ϥΠϒϥϦ΍πʔϧ͕ཚཱͯ͠Α͘Θ͔ΒΜʂ
    w )5.-Λ࡞Δ͚ͩԿʹͳΜͰΊΜͲ͍͘͞ͷʁ
    ˰͜ΕΒͷٙ໰ͷճ౴ͷҰ෦Λ঺հ͠·͢

    View Slide

  4. 8FCϑϩϯτΤϯυෳࡶԽͷཁҼ

    View Slide

  5. 2ͳͥ8FCϑϩϯτΤϯυ͸ෳࡶ͔

    View Slide

  6. "+BWB4DSJQU͕ॾѱͷࠜݯ

    View Slide

  7. Ͱ΋+BWB4DSJQU͕ඞཁ͔ͩΒ
    ؤுΔ͔͠ͳ͍

    View Slide

  8. +BWB4DSJQU͕ෆཁͳ৔໘Ͱ͸
    ෳࡶͰ͸ͳ͍8FCϑϩϯτΤϯυΛ
    ᨳՎ͢Ε͹Α͍

    View Slide

  9. 41"ͱ.1"

    View Slide

  10. 41"ͱ.1"
    w .1"Ͱ໰୊ͳ͍ͳΒෳࡶͰͳ͍8FCϑϩϯτΤϯυͰ0,
    w 41"͕͍͍ͳΒؤுΔඞཁ͕͋Δ

    View Slide

  11. .1"ͱ͸ʁ
    w αʔό͔Β৽͍͠ϖʔδΛऔಘͯ͠ϖʔδભҠ͢Δ
    w ᶃભҠઌͷ63-ʹΞΫηε
    w ᶄ63-ʹରԠ͢ΔϖʔδΛαʔόͰߏங
    w ᶅߏஙͨ͠ϖʔδΛΫϥΠΞϯτʹฦͯ͠දࣔ͢Δ

    View Slide

  12. .1"ͱ͸ʁ
    w .1"ʹΑΔϖʔδભҠᶃ

    IPNF͕දࣔ͞Ε͍ͯΔ

    View Slide

  13. .1"ͱ͸ʁ
    w .1"ʹΑΔϖʔδભҠᶄ

    ΫϦοΫ͢ΔͱIFMMPʹΞΫηε

    View Slide

  14. .1"ͱ͸ʁ
    w .1"ʹΑΔϖʔδભҠᶅ

    ΫϦοΫ͢ΔͱIFMMPʹΞΫηε
    αʔό
    /hello

    View Slide

  15. .1"ͱ͸ʁ
    w .1"ʹΑΔϖʔδભҠᶆ

    ΫϦοΫ͢ΔͱIFMMPʹΞΫηε
    αʔό
    /hello
    /helloͷHTMLΛߏங

    View Slide

  16. .1"ͱ͸ʁ
    w .1"ʹΑΔϖʔδભҠᶇ

    αʔό
    /hello
    HTMLΛฦ٫
    ΫϦοΫ͢ΔͱIFMMPʹΞΫηε

    View Slide

  17. .1"ͱ͸ʁ
    w .1"ʹΑΔϖʔδભҠᶈ

    αʔό
    /hello
    HTMLΛฦ٫
    IFMMP͕දࣔ͞ΕΔ

    View Slide

  18. 41"ͱ͸ʁ
    w +BWB4DSJQUΛ࢖ͬͯϖʔδભҠ͢Δ8FCΞϓϦ
    w ᶃ+BWB4DSJQUͰ63-Λॻ͖׵͑Δ
    w ᶄ63-ͷมߋΛτϦΨʔʹ+BWB4DSJQUͰϖʔδΛॻ͖׵͑Δ

    View Slide

  19. 41"ͱ͸ʁ
    w +BWB4DSJQUʹΑΔϖʔδભҠͷ͔ͨ͠ᶃ

    IFMMP͕දࣔ͞Ε͍ͯΔ

    View Slide

  20. 41"ͱ͸ʁ
    w +BWB4DSJQUʹΑΔϖʔδભҠͷ͔ͨ͠ᶄ

    ΫϦοΫ͢Δͱ+BWB4DSJQUΛ࢖ͬͯ
    63-ΛIPNFʹॻ͖׵͑Δ

    View Slide

  21. 41"ͱ͸ʁ
    w +BWB4DSJQUʹΑΔϖʔδભҠͷ͔ͨ͠ᶅ

    63-͕IPNFʹมΘΔ

    View Slide

  22. 41"ͱ͸ʁ
    w +BWB4DSJQUʹΑΔϖʔδભҠͷ͔ͨ͠ᶆ

    63-ͷมߋΛݕ஌ͯ͠ϖʔδΛॻ͖׵͑
    ඞཁʹԠͯ͡αʔό͔ΒσʔλΛऔಘͨ͠Γ΋͢Δ

    View Slide

  23. 41"ͱ.1"ͷಛ௃
    w 41"
    w +BWB4DSJQUͰϖʔδΛॻ͖׵
    ͑ΔͷͰભҠ͕ߴ଎
    w +BWB4DSJQUΛ࢖͍·͘Δ
    w σʔλ͸"1*ΞΫηεͰऔಘ

    w .1"
    w ϖʔδભҠͷ౓ʹ௨৴͕ඞཁ
    w +BWB4DSJQU͸ඞਢͰ͸ͳ͍
    w +BWB4DSJQUΛ࢖͍͗͢Δͱϝ
    ϯς͕ਏ͘ͳΔ

    View Slide

  24. 41"Λ࢖͍͍ͨ৔໘
    w ᶃΫϥΠΞϯτͰෳࡶͳಈ͖Λ࣮ݱ͍ͨ͠৔໘
    w ϖʔδભҠͷύϑΥʔϚϯεΛ௥ٻ͍ͨ͠
    w +BWB4DSJQUΛ࢖ͬͨಈతͳ6*Λ࣮ݱ͍ͨ͠
    w ΫϥΠΞϯτͷίʔυ΋ϝϯςφϒϧʹ͍ͨ͠
    w ᶄαʔόαΠυ͕ܰྔͳ৔໘
    w ֎෦"1*΁ͷΞΫηε΍'BB4Ͱࣄ଍ΓΔ
    w αʔόαΠυͷܰྔͳͷͰ41"ͰΫϥΠΞϯτͷ࣮૷ʹूத͍ͨ͠

    View Slide

  25. +BWB4DSJQUΛ࢖͏ͱͳͥෳࡶʹͳΔͷ͔

    View Slide

  26. ϒϥ΢β্Ͱಈ࡞͢Δͱ͍͏੍໿
    w 8FCΞϓϦ͸ϒϥ΢β্Ͱಈ࡞͢Δ
    w ͭ·Γ+BWB4DSJQU͸ϒϥ΢β্Ͱ࣮ߦ͞ΕΔ

    ϒϥ΢β αʔό
    +BWB4DSJQU͸ͬͪ͜Ͱಈ͘

    View Slide

  27. ϒϥ΢β্Ͱಈ࡞͢Δͱ͍͏੍໿
    w ࣮ߦ؀ڥ͕ϒϥ΢βͱ͍͏͜ͱ͸

    ΫϥΠΞϯτͷ؀ڥʹΑ࣮ͬͯߦ؀ڥ͕ҟͳΔͱ͍͏͜ͱ

    View Slide

  28. ϒϥ΢β্Ͱಈ࡞͢Δͱ͍͏੍໿
    w +BWB4DSJQUͷόʔδϣϯ໰୊
    w ϒϥ΢βʹΑͬͯαϙʔτ͍ͯ͠Δόʔδϣϯ͕ҟͳΔ
    w ͔ͱ͍ͬͯݹ͍ํʹ߹ΘͤΔͷ΋φϯηϯε

    w ಉ࣌઀ଓ਺ͷ੍ݶ
    w ϒϥ΢β͔Βಉ࣌ʹ௨৴Ͱ͖Δ਺͕ܾ·ͬͯΔʢ͍͍ͨͯຊʣ
    w ͳͷͰେྔͷϑΝΠϧΛಡΈࠐΉ͜ͱ͸ආ͚͍ͨ


    View Slide

  29. ϒϥ΢β্Ͱಈ࡞͢Δͱ͍͏੍໿
    w +BWB4DSJQUͷόʔδϣϯ໰୊
    w ϒϥ΢βʹΑͬͯαϙʔτ͍ͯ͠Δόʔδϣϯ͕ҟͳΔ
    w ͔ͱ͍ͬͯݹ͍ํʹ߹ΘͤΔͷ΋φϯηϯε

    ˰࠷৽ͷه๏Ͱॻ͍ͯݹ͍όʔδϣϯʹτϥϯεύΠϧ͢Ε͹͍͍
    w ಉ࣌઀ଓ਺ͷ੍ݶ
    w ϒϥ΢β͔Βಉ࣌ʹ௨৴Ͱ͖Δ਺͕ܾ·ͬͯΔʢ͍͍ͨͯຊʣ
    w ͳͷͰେྔͷϑΝΠϧΛಡΈࠐΉ͜ͱ͸ආ͚͍ͨ

    ˰ͭͷϑΝΠϧʹόϯυϧ͢Ε͹͍͍

    View Slide

  30. ࢀߟ
    +BWB4DSJQUͷ࢓༷
    w +BWB4DSJQUͷ࢓༷͸&$."4DSJQUͰఆΊΒΕ͍ͯΔ
    w &$."4DSJQU͸όʔδϣϯ·Ͱ͸࿈൪Ͱ೥͔Β͸ຖ೥
    761͍ͯ͠ΔͷͰ੢ྐྵ͕όʔδϣϯͱ͚ͯͭ͠ΒΕΔ
    w &$."4DSJQU͸&4ͱུ͞Εόʔδϣϯͱ߹ΘͤͯҎԼͷΑ͏ʹ
    ݺ͹ΕΔ
    w FY&4 &4 &4

    View Slide

  31. όʔδϣϯͷτϥϯεύΠϧ
    w ಈ࡞؀ڥʹԠͯ͡ݹ͍όʔδϣϯʹτϥϯεύΠϧ͍ͨ͠

    χʔζ͕͋Δ
    w #BCFMΛ࢖͏͜ͱͰ࣮ݱͰ͖Δ

    #BCFMΛ࢖ͬͯ
    τϥϯεύΠϧ

    View Slide

  32. +BWB4DSJQUϑΝΠϧͷόϯυϧ
    w Ϟδϡʔϧόϯυϥʔͱݺ͹ΕΔπʔϧΛ࢖͏͜ͱͰ

    +BWB4DSJQUͷґଘؔ܎Λղܾͯͭ͠ͷϑΝΠϧʹ

    ·ͱΊΔ͜ͱ͕Ͱ͖Δ

    ผϑΝΠϧʹґଘ
    ֎෦ϥΠϒϥϦʹґଘ
    CVOEMFKT
    ͭͷϑΝΠϧʹ·ͱ·ͬ
    ͨ΋ͷ͕ੜ੒͞ΕΔ
    ϞδϡʔϧόϯυϥʔΛ௨͢

    View Slide

  33. +BWB4DSJQUϑΝΠϧͷόϯυϧ
    w ϞδϡʔϧόϯυϥʔͷॲཧͷதͰ#BCFMΛ࣮ߦ͢Δέʔε΋ଟ͍

    YYYKT
    YYYKT
    YYYKT
    CVOEMFKT
    #BCFMͰ
    چόʔδϣϯʹ
    τϥϯεύΠϧ
    ґଘؔ܎ͷղܾ
    ϞδϡʔϧόϯυϥʔΛ௨͢

    View Slide

  34. +BWB4DSJQUϑΝΠϧͷόϯυϧ
    w ϞδϡʔϧόϯυϥʔͷॲཧͷதͰ#BCFMΛ࣮ߦ͢Δέʔε΋ଟ͍

    YYYKT
    YYYKT
    YYYKT
    CVOEMFKT
    #BCFMͰ
    چόʔδϣϯʹ
    τϥϯεύΠϧ
    ґଘؔ܎ͷղܾ
    ϞδϡʔϧόϯυϥʔΛ௨͢
    ଞʹ΋͍Ζ͍ΖͳॲཧΛ
    ϞδϡʔϧόϯυϥʔͰ࣮ߦͰ͖Δ

    View Slide

  35. ͜͜·Ͱͷ͓͞Β͍

    View Slide

  36. ͜͜·Ͱͷ͓͞Β͍
    w 8FCϑϩϯτΤϯυͷෳࡶ͞ͷࠜݯ͸+BWB4DSJQU
    w 41"Λ࠾༻͍ͨ͠৔߹͸͜ͷෳࡶ͔͞ΒಀΕΒΕͳ͍
    w ϒϥ΢βͰಈ࡞͢Δͱ͍͏ੑ্࣭ҎԼͷ఺ߟྀ͕ඞཁ
    w ݹ͍όʔδϣϯͰ΋ಈ࡞͢ΔΑ͏ʹ͍ͨ͠
    w ͭͷϑΝΠϧʹόϯυϧ͍ͨ͠
    w Ϟδϡʔϧόϯυϥʔͱ#BCFMΛ࢖͏ͱղܾͰ͖Δ

    View Slide

  37. ͜ΕҎ֎ʹ΋՝୊͕͍Ζ͍Ζ͋Δ

    View Slide

  38. ͦΕΒΛղܾ͢ΔͨΊʹ
    ͍Ζ͍Ζग़ͯ͘Δ

    View Slide

  39. 5ZQF4DSJQUΛ࢖͍͍ͨ

    View Slide

  40. 5ZQF4DSJQUͱ͸
    w +BWB4DSJQUͷ֦ுݴޠ
    w ͬͬ͘͟Γݴ͏ͱ੩తͳܕఆ͕ٛ௥Ճ͞Εͨ+BWB4DSJQU
    w ͦͷ··Ͱ͸ಈ͔ͳ͍ͷͰ+BWB4DSJQUʹτϥϯεύΠͯ͠࢖͏

    +BWB4DSJQU 5ZQF4DSJQU

    View Slide

  41. 5ZQF4DSJQUͷτϥϯεύΠϧ
    w 5ZQF4DSJQUΛ+BWB4DSJQUʹτϥϯεύΠϧ͢Δॲཧ΋Ϗϧυͷྲྀ
    Εʹ૊ΈࠐΉ͜ͱʹͳΔ
    w τϥϯεύΠϧʹ͸UTD UTMPBEFS #BCFMͷ͍ͣΕ͔Λ࢖͏

    YYYKT
    YYYKT
    YYYUT
    CVOEMFKT
    #BCFMͰ
    چόʔδϣϯʹ
    τϥϯεύΠϧ
    ґଘؔ܎ͷղܾ
    ϞδϡʔϧόϯυϥʔΛ௨͢
    5ZQF4DSJQUΛ
    +BWB4DSJQUʹ
    τϥϯεύΠϧ

    View Slide

  42. $PEF4QMJUUJOH͍ͨ͠

    View Slide

  43. $PEF4QMJUUJOHͱ͸
    w શͯͷϑΝΠϧΛͭʹόϯυϧ͢ΔͱϑΝΠϧαΠζ͕࣍ୈʹ
    େ͖͘ͳͬͯ͘Δ
    w ϑΝΠϧαΠζ͕େ͖͍ͱಡΈࠐΈʹ͕͔͔࣌ؒͬͯදࣔ଎౓
    ͕௿Լͯ͠͠·͏

    View Slide

  44. $PEF4QMJUUJOHͱ͸
    w શͯͷϑΝΠϧΛͭʹόϯυϧ͢ΔͱϑΝΠϧαΠζ͕࣍ୈʹ
    େ͖͘ͳͬͯ͘Δ
    w ϑΝΠϧαΠζ͕େ͖͍ͱಡΈࠐΈʹ͕͔͔࣌ؒͬͯදࣔ଎౓
    ͕௿Լͯ͠͠·͏
    ˰ϑΝΠϧΛ෼͚ͯඞཁͳ΋ͷ͚ͩऔಘ͢ΔΑ͏ʹ͠Α͏

    View Slide

  45. $PEF4QMJUUJOHͷ࢓૊Έ
    w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍

    IPNF IFMMP BCPVU
    શ෦Ͱϖʔδ͋Δͱ͢Δ

    View Slide

  46. $PEF4QMJUUJOHͷ࢓૊Έ
    w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍

    IPNF IFMMP BCPVU
    +BWB4DSJQUΛ෼ׂͯ͠ੜ੒
    BCPVUKT
    IFMMPKT
    IPNFKT
    NBJOKT

    View Slide

  47. $PEF4QMJUUJOHͷ࢓૊Έ
    w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍

    IPNF IFMMP BCPVU
    શϖʔδڞ௨Ͱ࢖ΘΕΔίʔυ
    BCPVUKT
    IFMMPKT
    IPNFKT
    NBJOKT

    View Slide

  48. $PEF4QMJUUJOHͷ࢓૊Έ
    w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍

    IPNF IFMMP BCPVU
    ֤ϖʔδڞ͚ͩͰ࢖ΘΕΔίʔυ
    BCPVUKT
    IFMMPKT
    IPNFKT
    NBJOKT
    ֤ϖʔδڞ͚ͩͰ࢖ΘΕΔίʔυ
    ֤ϖʔδڞ͚ͩͰ࢖ΘΕΔίʔυ

    View Slide

  49. $PEF4QMJUUJOHͷ࢓૊Έ
    w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍

    IPNF
    IPNFʹΞΫηε

    View Slide

  50. $PEF4QMJUUJOHͷ࢓૊Έ
    w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍

    IPNF
    ඞཁͳϑΝΠϧ͚ͩऔಘ
    IPNFKT
    NBJOKT

    View Slide

  51. $PEF4QMJUUJOHͷ࢓૊Έ
    w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍

    IPNF
    IPNFΛදࣔ
    IPNFKT
    NBJOKT

    View Slide

  52. $PEF4QMJUUJOHͷ࢓૊Έ
    w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍

    IFMMP
    IFMMPʹΞΫηε
    IPNFKT
    NBJOKT

    View Slide

  53. $PEF4QMJUUJOHͷ࢓૊Έ
    w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍

    IFMMP
    IPNFKT
    NBJOKT
    ௥ՃͰඞཁͳ
    ϑΝΠϧ͚ͩऔಘ
    IFMMPKT

    View Slide

  54. $PEF4QMJUUJOHͷ࢓૊Έ
    w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍

    IFMMP
    IPNFKT
    NBJOKT
    IFMMPΛදࣔ
    IFMMPKT

    View Slide

  55. $PEF4QMJUUJOHͷ࣮ݱ
    w Ϟδϡʔϧόϯυϥʔͷػೳͱͯ͠$PEF4QMJUUJOHΛ࣮ݱͰ͖Δ

    YYYKT
    YYYKT
    YYYKT
    CVOEMFKT
    #BCFMͰ
    چόʔδϣϯʹ
    τϥϯεύΠϧ
    ґଘؔ܎ͷղܾ
    ϞδϡʔϧόϯυϥʔΛ௨͢
    $PEF4QMJUUJOH
    ͢Δ

    View Slide

  56. ·ͱΊ

    View Slide

  57. ·ͱΊ
    w +BWB4DSJQU͸༷ʑͳࣄ৘͔ΒίʔυʹखΛՃ͑Δχʔζ͕͋Δ
    w ͦͷͨΊʹ͍Ζ͍ΖͳπʔϧΛ࢖ͬͯෳࡶʹͳ͍ͬͯΔ
    w ࠓճ঺հ͍ͯ͠ͳ͍ࣄ৘΋·ͩͨ͘͞Μ͋ΔͷͰͱͯ΋ෳࡶ
    w ྫ͑͹։ൃத͸ϗοτϦϩʔυ͍ͨ͠ͱ͔

    View Slide

  58. ͜ΕΒΛશ෦ཧղ͠ͳ͍ͱ
    8FCϑϩϯτΤϯυͷ։ൃ͸Ͱ͖ͳ͍ͷʁ

    View Slide

  59. ͦΜͳ͜ͱ͸ͳ͍ʂ

    View Slide

  60. εςοϓΞοϓͷ͔ͨ͠
    w ηοτΞοϓࡁΈͷ؀ڥΛߏஙͰ͖ΔHFOFSBUPS͕ॆ࣮ͯ͠Δ
    w 3FBDUͳΒ$SFBUF3FBDU"QQɺ7VFͳΒ7VF$-*ͳͲͳͲ
    w ॳ৺ऀͷ͏ͪ͸ͦΕΒʹཔͬͯ։ൃΛਐΊΕ͹0,
    w HFOFSBUPSͷઃఆΛม͑ΔඞཁੑΛײ͖ͯͨ͡Β

    ͲΜͳ͜ͱΛ΍͍ͬͯΔͷֶ͔ͼ࢝ΊΕ͹Α͍

    View Slide

  61. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide