Web フロントエンドの変遷とこれから / Transition of Web Frontend

2017年2月16日に開催された Developers Summit 2017 ( http://event.shoeisha.jp/devsumi/20170216/ ) の「Web フロントエンドの変遷とこれから」のセッション前半の資料です。セッション後半の資料は https://speakerdeck.com/ahomu/web-hurontoendoniqi-dai-sarerushi-ying-toxin-chen-dai-xie by @ahomu

Transcript

1. %FWFMPQFST4VNNJU
   
   !DI4IPHP4FOTVJ
   8FCؿٗٝزؒٝسך
   㢌鼂הֿ׸ַ׵
   

   View Slide

2. !DI
   

   View Slide

3. !DI
   ‣ 4IPHP4FOTVJ
   ‣ BLBDIPO*OUFSOFU
   ‣ $ZCFS"HFOU *OD
   ‣ 8FC*OJUJBUJWF$FOUFS
   ‣ 4PGUXBSF&OHJOFFS
   ‣ 8FCDMJFOUTJEFEFWFMPQNFOU
   ‣ 0QFO4PVSDF4PGUXBSF
   

   View Slide

4. ➙傈תדך8FCך䮶׶鵤׶
   

   View Slide

5. ـٓؐؠ✼䳔䚍ך蕱䝢<Y⵸劍>
   ؎ٝةؙٓذ؍ـז8FC<Y䖓劍>
   ،٦ؗذؙثٍך醱꧟⻉<_>
   ط؎ذ؍ـ،فٔךꥐ渿<_>
   

   View Slide

6. ـٓؐؠ✼䳔䚍ך蕱䝢<Y⵸劍>
   ؎ٝةؙٓذ؍ـז8FC<Y䖓劍>
   ،٦ؗذؙثٍך醱꧟⻉<_>
   ط؎ذ؍ـ،فٔךꥐ渿<_>
   

   View Slide

7. h⣂뇸
   

   View Slide

8. View Slide

9. View Slide

10. *&Ⰻ渿劍הـٓؐؠ✼䳔䚍
    ‣ ـٓؐؠ✼䳔䚍׾ٓ؎ـٓٔד㙵׭׋ְ
    ‣ %0."1*כֶ׹ַծ$44ך㹋鄲׮وثوث
    ‣ 8FC䪮遭ָ垥彊⻉ח׬ֽג㼰׃׆א⹛ֹ⳿ׅ
    

    View Slide

11. ـٓؐؠ✼䳔䚍ך蕱䝢<Y⵸劍>
    ؎ٝةؙٓذ؍ـז8FC<Y䖓劍>
    ،٦ؗذؙثٍך醱꧟⻉<_>
    ط؎ذ؍ـ،فٔךꥐ渿<_>
    

    View Slide

12. 2008೥ iPhone 3G ൃച
    

    View Slide

13. ̔
    

    View Slide

14. →
    غؤٙ٦سה׃גך)5.-
    ‣ 8FC垥彊䪮遭ך㣐䌴ח،حفر٦زׁ׸׋
    ‣ وٕثًر؍،٥أزٖ٦آ٥$44זו
    ‣ ؟٦سػ٦ذ؍פך⣛㶷ַ׵)5.-פך獳遤
    ‣ 'MBTIװ+BWB"QQMFUזוךفٓحزؿؓ٦ي邜鷌
    ‣ 8FCךؔ٦فٝ⻉ָ鹌׬
    

    View Slide

15. ـٓؐؠ✼䳔䚍ך蕱䝢<Y⵸劍>
    ؎ٝةؙٓذ؍ـז8FC<Y䖓劍>
    ،٦ؗذؙثٍך醱꧟⻉<_>
    ط؎ذ؍ـ،فٔךꥐ渿<_>
    

    View Slide

16. View Slide

17. ،٦ؗذؙثٍך醱꧟⻉
    ‣ ➭ⴓꅿַ׵فؚٗٓي䭷ぢך鱐Ⰵ
    ‣ .7$ծ.77.ծ؝ٝه٦طٝزծFUD
    ‣ 圓鸡⻉׾⤛ׅٓ؎ـٓٔװؿٖ٦يٙ٦ؙך钰欰
    ‣ ؙٓ؎،ٝز؟؎س杝荈ך涪㾜
    ‣ 4JOHMF1BHF"QQMJDBUJPOװ4&0㼎瘻זוזו
    ‣ ؙٓ؎،ٝز؟؎س،٦ؗذؙثٍפךꟼ䗰
    

    View Slide

18. View Slide

19. /PEFKTד佄ִ׷8FCꟚ涪
    ‣ /PEFKTח״׷ぐ珏⡲噟ך荈⹛⻉
    ‣ ا٦أך穠さװ㖇簭ծٓ؎ـٔٗ٦سծFUD
    ‣ (SVOUծCPXFSծZFPNBOծHVMQծFUD
    ‣ ֿך鴟׶ַ׵ؿٗٝزؒٝسָ㣕׶׌ׅ
    

    View Slide

20. ⽃♧ا٦أד
    䲿⣘דֹ׷
    ؎ٝأز٦ٕ♶銲
    فؚٓ؎ٝꬊ⣛㶷
    فٓحزؿؓ٦يך
    ⵖ秈׾「ֽזְ
    ٔحثז邌植ָ〳腉
    63-דⰟ剣דֹ׷
    

    View Slide

21. ـٓؐؠ✼䳔䚍ך蕱䝢<Y⵸劍>
    ؎ٝةؙٓذ؍ـז8FC<Y䖓劍>
    ،٦ؗذؙثٍך醱꧟⻉<_>
    ط؎ذ؍ـ،فٔךꥐ渿<_>
    

    View Slide

22. View Slide

23. 'BDFCPPLָ)5.-׾䰍ג׷
    ‣ ٌغ؎ٕדךػؿؓ٦وٝأָ♶⼧ⴓ
    ‣ 甧׍כ׌ַ׷)5.-䲽歗ך㠖
    ‣ ـٓؐؠ׌ה堣腉꬗ד♶⼧ⴓ
    ‣ فحءُ鸐濼װرغ؎أ،ؙإأזו
    ‣ 垥彊⻉ָ䗳銲ז8FCךفٓحزؿؓ٦ي暴䚍
    ‣ ٌغ؎ٕꟚ涪ָ䚈慧חط؎ذ؍ـפءؿزׅ׷
    

    View Slide

24. View Slide

25. فٓحزؿؓ٦يפך⣛㶷
    ‣ ط؎ذ؍ـ،فٔך䭁⯍ָ鹌׬
    ‣ 8FCדכזֻ"QQ4UPSFװ1MBZ4UPSFָ⯍㹋ׅ׷
    ‣ 8FCדכזֻأز،ד嗚稊׃גتؐٝٗ٦سׅ׷
    ‣ ،فٔהְֲ؝ٝذؗأزך嗂ִ➰ֽ
    

    View Slide

26. ـٓؐؠ✼䳔䚍ך蕱䝢<Y⵸劍>
    ؎ٝةؙٓذ؍ـז8FC<Y䖓劍>
    ،٦ؗذؙثٍך醱꧟⻉<_>
    ط؎ذ؍ـ،فٔךꥐ渿<_>
    

    View Slide

27. 1SPHSFTTJWF8FC"QQT
    ط؎ذ؍ـ儗➿ח8FCך⣣⦼׾鋅湫ׅ
    

    View Slide

28. 48׾⢪׏׋ؔؿٓ؎ٝ㼎䘔
    

    View Slide

29. 8FCז׵דכך暴䗙
    ‣ 4FDVSF㸜Ⰻד֮׷
    ‣ -JOLBCMFؙٔٝדֹ׷⛓
    ‣ *OEFYBCMF؎ٝرحؙأׁ׸׷
    ‣ $PNQPTBCMFⱄ圓䧭דֹ׷
    ‣ &QIFNFSBM♧儗涸חⵃ欽דֹ׷
    

    View Slide

30. 8FCPSط؎ذ؍ـ
    ‣ 劤勻涸חכ،فַٔ8FCַ׾ِ٦ؠ٦כ䠐陎׃זְ
    ‣ 堣腉׾䬐⥂דֹגְ׸ל8FCד׮葺ְ
    ‣ 1$ז׵8FC،فٔ׾⢪ֲء٦ٝכ׋ֻׁ׿֮׷
    ‣ &YDFMַ׵(PPHMF4QSFBE4IFFUפ
    ‣ ع؎ألحؙז橆㞮ד֮׸ל׬׃׹8FC،فָٔ⤑ⵃ
    

    View Slide

31. 18"הך鸬䵿׾䓼׭׷⹛ֹ
    IUUQTCMPHDISPNJVNPSHJOUFHSBUJOHQSPHSFTTJWFXFCBQQTEFFQMZIUNM
    

    View Slide

32. &YUFOTJCMF8FC
    Ꟛ涪罏ָ荈歋ח䭁䓸דֹ׷8FC
    

    View Slide

33. FYUFOEUIFXFCGPSXBSE
    IUUQTFYUFOTJCMFXFCNBOJGFTUPPSH
    

    View Slide

34. さ陽ⵖז➬圫瘻㹀ךꣲ歲
    ‣ ⡚ٖكٕ"1*דꟚ涪罏ָ䭁䓸דֹ׷8FCחׅ׷
    ‣ 劻♳ד䬄韋⻉׃ג⢪ְחְֻ؛٦أָ㢳ղ֮׏׋
    ‣ ⡚ٖكٕכ넝ٖكٕ׾Ⱟי׷
    ‣ 䧭擾ח䗳銲זؿ؍٦سغحؙٕ٦فך넝鸞⻉
    ‣ 垥彊⻉穈籼׌ֽדכזֻծꟚ涪罏ָ⿫⸇דֹ׷
    

    View Slide

35. 垥彊⻉ח《׶鴥ת׸׋⢽
    ‣ K2VFSZךإؙٖة"1*װ%0.乼⡲
    ‣ RVFSZ4FMFDUPSծ%0.ծ8FC"OJNBUJPOT
    ‣ 4BTTװ-&44זוך㢌侧װꟼ侧
    ‣ $44$VTUPN1SPQFSUJFTծ!BQQMZ
    

    View Slide

36. ⡚ٖكٕ"1*ך⢽✊
    ‣ 8FC$PNQPOFOUTךꟼ鸬"1*
    ‣ $VTUPN&MFNFOUTծ4IBEPX%0.ծ5FNQMBUF
    ‣ 4FSWJDF8PSLFSךꟼ鸬"1*
    ‣ 'FUDI"1*ծ$BDIF"1*
    ‣ $44)PVEJOJ
    

    View Slide

37. 8FCؿٗٝزؒٝسך
    䪮遭㢌鼂ך傍ׁך姻⡤
    

    View Slide

38. 8FCؿٗٝزؒٝسך㢸僇ֽ
    劢䧭擾זفٓحز
    ؿؓ٦يפך气䒦
    䚈慧ֺׅ׷鹌⻉פ
    鷄䖞ׅ׷⸕⸂
    ➙תדזַ׏׋
    ַ׵鳞ְ
    俑〣鎉׏גג׮
    ➬倯זְ
    →
    →
    

    View Slide

39. 8FCفٓحزؿؓ٦ي
    耵腉ה׃גך8FC䪮遭罏
    ׉׸׊׸ך麓床劍
    

    View Slide

40. 5PCFDPOUJOVFE
    ˟إحءّٝכ竲ֹתׅ
    

    View Slide