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

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

26a00012c475c2380cd98cfe5e2e70ef?s=47 ozaki25
February 16, 2021

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

26a00012c475c2380cd98cfe5e2e70ef?s=128

ozaki25

February 16, 2021
Tweet

Transcript

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

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

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

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

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

  6. "+BWB4DSJQU͕ॾѱͷࠜݯ 

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

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

  9. 41"ͱ.1" 

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

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

  12. .1"ͱ͸ʁ w .1"ʹΑΔϖʔδભҠᶃ  IPNF͕දࣔ͞Ε͍ͯΔ

  13. .1"ͱ͸ʁ w .1"ʹΑΔϖʔδભҠᶄ  ΫϦοΫ͢ΔͱIFMMPʹΞΫηε

  14. .1"ͱ͸ʁ w .1"ʹΑΔϖʔδભҠᶅ  ΫϦοΫ͢ΔͱIFMMPʹΞΫηε αʔό /hello

  15. .1"ͱ͸ʁ w .1"ʹΑΔϖʔδભҠᶆ  ΫϦοΫ͢ΔͱIFMMPʹΞΫηε αʔό /hello /helloͷHTMLΛߏங

  16. .1"ͱ͸ʁ w .1"ʹΑΔϖʔδભҠᶇ  αʔό /hello HTMLΛฦ٫ ΫϦοΫ͢ΔͱIFMMPʹΞΫηε

  17. .1"ͱ͸ʁ w .1"ʹΑΔϖʔδભҠᶈ  αʔό /hello HTMLΛฦ٫ IFMMP͕දࣔ͞ΕΔ

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

  19. 41"ͱ͸ʁ w +BWB4DSJQUʹΑΔϖʔδભҠͷ͔ͨ͠ᶃ  IFMMP͕දࣔ͞Ε͍ͯΔ

  20. 41"ͱ͸ʁ w +BWB4DSJQUʹΑΔϖʔδભҠͷ͔ͨ͠ᶄ  ΫϦοΫ͢Δͱ+BWB4DSJQUΛ࢖ͬͯ 63-ΛIPNFʹॻ͖׵͑Δ

  21. 41"ͱ͸ʁ w +BWB4DSJQUʹΑΔϖʔδભҠͷ͔ͨ͠ᶅ  63-͕IPNFʹมΘΔ

  22. 41"ͱ͸ʁ w +BWB4DSJQUʹΑΔϖʔδભҠͷ͔ͨ͠ᶆ  63-ͷมߋΛݕ஌ͯ͠ϖʔδΛॻ͖׵͑ ඞཁʹԠͯ͡αʔό͔ΒσʔλΛऔಘͨ͠Γ΋͢Δ

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

     w .1" w ϖʔδભҠͷ౓ʹ௨৴͕ඞཁ w +BWB4DSJQU͸ඞਢͰ͸ͳ͍ w +BWB4DSJQUΛ࢖͍͗͢Δͱϝ ϯς͕ਏ͘ͳΔ
  24. 41"Λ࢖͍͍ͨ৔໘ w ᶃΫϥΠΞϯτͰෳࡶͳಈ͖Λ࣮ݱ͍ͨ͠৔໘ w ϖʔδભҠͷύϑΥʔϚϯεΛ௥ٻ͍ͨ͠ w +BWB4DSJQUΛ࢖ͬͨಈతͳ6*Λ࣮ݱ͍ͨ͠ w ΫϥΠΞϯτͷίʔυ΋ϝϯςφϒϧʹ͍ͨ͠ w

    ᶄαʔόαΠυ͕ܰྔͳ৔໘ w ֎෦"1*΁ͷΞΫηε΍'BB4Ͱࣄ଍ΓΔ w αʔόαΠυͷܰྔͳͷͰ41"ͰΫϥΠΞϯτͷ࣮૷ʹूத͍ͨ͠ 
  25. +BWB4DSJQUΛ࢖͏ͱͳͥෳࡶʹͳΔͷ͔ 

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

  27. ϒϥ΢β্Ͱಈ࡞͢Δͱ͍͏੍໿ w ࣮ߦ؀ڥ͕ϒϥ΢βͱ͍͏͜ͱ͸
 ΫϥΠΞϯτͷ؀ڥʹΑ࣮ͬͯߦ؀ڥ͕ҟͳΔͱ͍͏͜ͱ 

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

    ϒϥ΢β͔Βಉ࣌ʹ௨৴Ͱ͖Δ਺͕ܾ·ͬͯΔʢ͍͍ͨͯຊʣ w ͳͷͰେྔͷϑΝΠϧΛಡΈࠐΉ͜ͱ͸ආ͚͍ͨ
 
  29. ϒϥ΢β্Ͱಈ࡞͢Δͱ͍͏੍໿ w +BWB4DSJQUͷόʔδϣϯ໰୊ w ϒϥ΢βʹΑͬͯαϙʔτ͍ͯ͠Δόʔδϣϯ͕ҟͳΔ w ͔ͱ͍ͬͯݹ͍ํʹ߹ΘͤΔͷ΋φϯηϯε
 ˰࠷৽ͷه๏Ͱॻ͍ͯݹ͍όʔδϣϯʹτϥϯεύΠϧ͢Ε͹͍͍ w ಉ࣌઀ଓ਺ͷ੍ݶ

    w ϒϥ΢β͔Βಉ࣌ʹ௨৴Ͱ͖Δ਺͕ܾ·ͬͯΔʢ͍͍ͨͯຊʣ w ͳͷͰେྔͷϑΝΠϧΛಡΈࠐΉ͜ͱ͸ආ͚͍ͨ
 ˰ͭͷϑΝΠϧʹόϯυϧ͢Ε͹͍͍ 
  30. ࢀߟ +BWB4DSJQUͷ࢓༷ w +BWB4DSJQUͷ࢓༷͸&$."4DSJQUͰఆΊΒΕ͍ͯΔ w &$."4DSJQU͸όʔδϣϯ·Ͱ͸࿈൪Ͱ೥͔Β͸ຖ೥ 761͍ͯ͠ΔͷͰ੢ྐྵ͕όʔδϣϯͱ͚ͯͭ͠ΒΕΔ w &$."4DSJQU͸&4ͱུ͞Εόʔδϣϯͱ߹ΘͤͯҎԼͷΑ͏ʹ ݺ͹ΕΔ

    w FY&4 &4 &4 
  31. όʔδϣϯͷτϥϯεύΠϧ w ಈ࡞؀ڥʹԠͯ͡ݹ͍όʔδϣϯʹτϥϯεύΠϧ͍ͨ͠
 χʔζ͕͋Δ w #BCFMΛ࢖͏͜ͱͰ࣮ݱͰ͖Δ  #BCFMΛ࢖ͬͯ τϥϯεύΠϧ

  32. +BWB4DSJQUϑΝΠϧͷόϯυϧ w Ϟδϡʔϧόϯυϥʔͱݺ͹ΕΔπʔϧΛ࢖͏͜ͱͰ
 +BWB4DSJQUͷґଘؔ܎Λղܾͯͭ͠ͷϑΝΠϧʹ
 ·ͱΊΔ͜ͱ͕Ͱ͖Δ  ผϑΝΠϧʹґଘ ֎෦ϥΠϒϥϦʹґଘ CVOEMFKT ͭͷϑΝΠϧʹ·ͱ·ͬ

    ͨ΋ͷ͕ੜ੒͞ΕΔ ϞδϡʔϧόϯυϥʔΛ௨͢
  33. +BWB4DSJQUϑΝΠϧͷόϯυϧ w ϞδϡʔϧόϯυϥʔͷॲཧͷதͰ#BCFMΛ࣮ߦ͢Δέʔε΋ଟ͍  YYYKT YYYKT YYYKT CVOEMFKT #BCFMͰ چόʔδϣϯʹ

    τϥϯεύΠϧ ґଘؔ܎ͷղܾ ϞδϡʔϧόϯυϥʔΛ௨͢
  34. +BWB4DSJQUϑΝΠϧͷόϯυϧ w ϞδϡʔϧόϯυϥʔͷॲཧͷதͰ#BCFMΛ࣮ߦ͢Δέʔε΋ଟ͍  YYYKT YYYKT YYYKT CVOEMFKT #BCFMͰ چόʔδϣϯʹ

    τϥϯεύΠϧ ґଘؔ܎ͷղܾ ϞδϡʔϧόϯυϥʔΛ௨͢ ଞʹ΋͍Ζ͍ΖͳॲཧΛ ϞδϡʔϧόϯυϥʔͰ࣮ߦͰ͖Δ
  35. ͜͜·Ͱͷ͓͞Β͍ 

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

    ͭͷϑΝΠϧʹόϯυϧ͍ͨ͠ w Ϟδϡʔϧόϯυϥʔͱ#BCFMΛ࢖͏ͱղܾͰ͖Δ 
  37. ͜ΕҎ֎ʹ΋՝୊͕͍Ζ͍Ζ͋Δ 

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

  39. 5ZQF4DSJQUΛ࢖͍͍ͨ 

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

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

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

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

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

  45. $PEF4QMJUUJOHͷ࢓૊Έ w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍  IPNF IFMMP BCPVU શ෦Ͱϖʔδ͋Δͱ͢Δ

  46. $PEF4QMJUUJOHͷ࢓૊Έ w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍  IPNF IFMMP BCPVU +BWB4DSJQUΛ෼ׂͯ͠ੜ੒ BCPVUKT IFMMPKT

    IPNFKT NBJOKT
  47. $PEF4QMJUUJOHͷ࢓૊Έ w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍  IPNF IFMMP BCPVU શϖʔδڞ௨Ͱ࢖ΘΕΔίʔυ BCPVUKT IFMMPKT

    IPNFKT NBJOKT
  48. $PEF4QMJUUJOHͷ࢓૊Έ w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍  IPNF IFMMP BCPVU ֤ϖʔδڞ͚ͩͰ࢖ΘΕΔίʔυ BCPVUKT IFMMPKT

    IPNFKT NBJOKT ֤ϖʔδڞ͚ͩͰ࢖ΘΕΔίʔυ ֤ϖʔδڞ͚ͩͰ࢖ΘΕΔίʔυ
  49. $PEF4QMJUUJOHͷ࢓૊Έ w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍  IPNF IPNFʹΞΫηε

  50. $PEF4QMJUUJOHͷ࢓૊Έ w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍  IPNF ඞཁͳϑΝΠϧ͚ͩऔಘ IPNFKT NBJOKT

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

  52. $PEF4QMJUUJOHͷ࢓૊Έ w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍  IFMMP IFMMPʹΞΫηε IPNFKT NBJOKT

  53. $PEF4QMJUUJOHͷ࢓૊Έ w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍  IFMMP IPNFKT NBJOKT ௥ՃͰඞཁͳ ϑΝΠϧ͚ͩऔಘ IFMMPKT

  54. $PEF4QMJUUJOHͷ࢓૊Έ w ϖʔδ୯ҐͰ෼ׂ͢Δέʔε͕ଟ͍  IFMMP IPNFKT NBJOKT IFMMPΛදࣔ IFMMPKT

  55. $PEF4QMJUUJOHͷ࣮ݱ w Ϟδϡʔϧόϯυϥʔͷػೳͱͯ͠$PEF4QMJUUJOHΛ࣮ݱͰ͖Δ  YYYKT YYYKT YYYKT CVOEMFKT #BCFMͰ چόʔδϣϯʹ

    τϥϯεύΠϧ ґଘؔ܎ͷղܾ ϞδϡʔϧόϯυϥʔΛ௨͢ $PEF4QMJUUJOH ͢Δ
  56. ·ͱΊ 

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

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

  59. ͦΜͳ͜ͱ͸ͳ͍ʂ 

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

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