Webフロントエンド開発のこれまでと現在

#946oss 勉強会の資料です
https://946oss.connpass.com/event/256319/

Transcript

1. ,FJTVLF4BUP
   8FCϑϩϯτΤϯυ։ൃͷ
   ͜Ε·Ͱͱݱࡏ
   ۴࿏044ษڧձʮ8FCϑϩϯτΤϯυೖ໳ʯ
   

   View Slide

2. ͜ͷ࿩ͷΰʔϧ
   ฉ͘ͻͱ͕ΤϯδχΞͱ͸ݶΒͳ͍͠ɺٕज़΋஌Βͳ͍લఏͰ࢝ΊΑ͏
   w ۴࿏044ษڧձͰʮ8FCϑϩϯτΤϯυʯͬͯݴͬͨͱ͖ͷೝࣝΛ߹ΘͤΔ
   w ࣍ͷʮ͜Ε͔Β࢝ΊΔʯ࿩ʹܨ͕ΔΑ͏ʹɺ·ͣ͸ʮ͜Ε·ͰʯΛͬ͘͞Γ
   ஌Δ
   w ͜Ε͔ΒΑ͘ग़ͯ͘ΔͰ͋Ζ͏୯ޠʹܰ͘৮ΕΔ
   w ٯʹ࿩Λ΍΍͘͜͠͠ͳ͍Α͏ɺ͋͑ͯશ͘৮Εͳ͍෦෼΋ଟͦ͏ͳ༧ײ
   

   View Slide

3. 8FCϑϩϯτΤϯυ
   

   View Slide

4. 8FCϑϩϯτΤϯυ
   ʮϑϩϯτΤϯυʯͱݴͬͯ͠·͏ͱͪΐͬͱ޿͗͢ΔͷͰͶ
   

   View Slide

5. ࠓճ͸ϒϥ΢βͰݟ͍͑ͯΔ΋ͷͱ͍͏ҙຯͰ
   w Կ͔͠Βͷ΢ΣϒαʔϏεɾϖ
   ʔδʹ͓͍ͯɺϢʔβʔ͕΢Σϒ
   ϒϥ΢βܦ༝Ͱද͍ࣔͯ͠Δί
   ϯςϯπͷ෦෼
   8FCϑϩϯτΤϯυ
   

   View Slide

6. w αʔόʔ͔Βऔಘͨ͠)5.-
   $44+4Λղऍͯ͠ਓ͕ݟ΍͢
   ͍ܗʹ͢Δ΋ͷ
   w (PPHMF$ISPNF4BGBSJ
   &EHF'JSFGPYͱ͔
   ΢Σϒϒϥ΢β
   ຊ೔ͷϝΠϯొ৔ਓ෺
   8FCαʔϏεͷٕज़͸ɺ͍͔ʹ͍ͭ͜ΒΛ͏·͘࢖͏͔
   ͱ͍͏ͱ͜ΖΛΈΜͳͰؤு͖ͬͯͨͱݴͬͯ΋աݴͰ͸ͳ͍͔΋ɻ
   ݫີʹ͍͏ͱαʔόʔʹݶΒͳ͍͚ͲͶ
   

   View Slide

7. ΢Σϒϒϥ΢β
   

   View Slide

8. ΍΍ݹ͍8FCαʔϏεͷߏ੒
   ·ͩ+BWB4DSJQU͸Ϛ΢εΧʔιϧΩϥΩϥͤͨ͞Γͱ͔ʹ࢖ΘΕͯͨΑͶ
   )5.-
   αʔόʔͰϖʔδΛؙ͝ͱੜ੒ͯ͠Ϣʔβʔʹฦ͢
   

   View Slide

9. গ͠ਐาͨ͠8FCαʔϏεͷߏ੒
   (NBJMͱ͔(PPHMF.BQTͱ͔͕ग़͖ͯͨ"KBY࣌୅
   ϖʔδΛදࣔ͢ΔͷʹɺԿ౓͔ϦΫΤετͨ͠Γ
   ϘλϯΛԡͨ࣌͠ͱ͔ʹϖʔδભҠͤͣʹߋ৽ͨ͠Γ
   

   View Slide

10. ΋͏গ͠ਐาͨ͠8FCαʔϏεͷߏ੒
    K2VFSZͰͪ·ͪ·ॻ͘ͷ͸ਏ͔ͬͨ
    ,OPDLPVUKT #BDLCPOFKT &NCFSKT "OHVMBS+4
    ͳͲͷϑϨʔϜϫʔΫ͕࢖ΘΕ࢝ΊΔ
    

    View Slide

11. ൺֱత࠷ۙͷ8FCαʔϏεͷߏ੒
    ϒϥ΢βଆͰ΍Δ͜ͱଟ͍͔ΒɺͦΕલఏʹ
    ϖʔδભҠͷॲཧ͢Β΋ΫϥΠΞϯτଆͰ΍ͬͨΓ
    ࣗಈͰදࣔ಺༰͕ߋ৽͞ΕͨΓ
    ͲΜͲΜϦονʹ
    ωοτϫʔΫ͕ශऑͳʢ৔߹΋͋ΔʣεϚϗͷීٴ΋ҰҼ
    αʔόʔαΠυͷॲཧΛ଴ͭΑΓɺωοτϫʔΫ͕Өڹ͠ͳ͍
    ୺຤ଆͰॲཧΛ͍ͨ͠χʔζ
    αʔόʔαΠυ͸ɺ+40/΍
    (SBQI2-Λѻ͏͚ͩͷଘࡏʹ
    

    View Slide

12. มԽ͕ͱͯ΋ૣ͍෼໺
    

    View Slide

13. lϑϩϯτΤϯυΤϯδχΞz
    ͜ͷݺ͹Εํɺ͜͜೥͘Β͍ͷ࿩͔΋
    w ͻͱੲલ͸ɺαʔόʔαΠυͰ)5.-Λ૊Έཱ͍ͯͯͨਓ͕ͦΕʹ͍ۙ
    w ೥લ͘Β͍ʹ3FBDU+4͕ొ৔ͯ͠Ұؾʹ޿·ͬͨײʢݸਓతײ૝ʣ
    w ݱࡏ͸ɺϒϥ΢βͰಈ͘ίʔυΛॻ͘ਓͷ͜ͱΛ͍͏͜ͱ͕ଟͦ͏
    w ͦͷதͰ΋σΩΔਓ͸ɺαʔόʔαΠυͷίʔυ΋ಡΈॻ͖Ͱ͖Δ
    w දࣔͷमਖ਼Ͱ"1*ͷमਖ਼͕ඞཁʹͳΔ͜ͱ΋Α͋͘ΔͷͰ
    w ࢖͏ٕज़ݴޠͷҠΓมΘΓ
    

    View Slide

14. ࣍͸ʮ͜Ε͔Β࢝ΊΔʹ͸ʯͱ͍͏࿩
    

    View Slide