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

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