Web フロントエンドに期待される適応と新陳代謝

デブサミ 2017 http://event.shoeisha.jp/devsumi/20170216 で使用したスライドです。本編20分。

Transcript

1. 8FCؿٗٝزؒٝسח
   劍䖉ׁ׸׷黝䘔ה倜꤫➿闐
   %FWFMPQFST4VNNJUխ& 䖓⼱
   
   !BIPNV"ZVNV4BUP
   

   View Slide

2. ֶכ״ֲ׀ְׂתׅ
   !BIPNVדׅ
   

   View Slide

3. ‣ ⡟谏娄ׁהֲ֮ײ׬
   ‣ せ〢㾊ה幪靼׾䖂䗁⚥ך8FCر؍كٗحػ٦
   ‣ 剑鵚ךꟼ䗰כXFCQFSGהBZה➂✲罋铬
   ‣ 吳
   $ZCFS"HFOUַ׵ 吳
   "CFNB57⳿ぢ⚥
   ًر؍،窟䭍䪮遭䨌殛㹓䪮遭劤鿇8FC*OJUJBUJWF$FOUFS
   !BIPNV
   

   View Slide

4. ℹ
   ‣ ؿٗٝزؒٝسח劍䖉ׁ׸׷
   黝䘔ה㢌⻉
   ‣ 劍䖉ח䘔ִ竲ֽ׷׋׭ך
   崞涪ז倜꤫➿闐
   

   View Slide

5. 8FCؿٗٝزؒٝسח
   劍䖉ׁ׸׷黝䘔ה㢌⻉
   

   View Slide

6. ‣ 倜׃ְرغ؎أװ8FC䪮遭ך㹋遤橆㞮זוך涫㜥
   ‣ رغ؎أװطحزٙ٦ؙך䚍腉ぢ♳ծⵃ欽أة؎ٕך㢌⻉
   ‣ 8FC垥彊➬圫װـٓؐؠ㹋鄲ך،حفر٦ز
   ‣ ׉ך➭ծ/PEFKTװ؎ٝؿٓծؙٓؐسזוꦄ䱸ⴓꅿך涪㾜
   8FCؿٗٝزؒٝسワ鴟ך㢌⻉
   

   View Slide

7. 倜׃ְرغ؎أװ8FC䪮遭ך㹋遤橆㞮זוך涫㜥
   73؜٦ي׾فٖ؎ׅ׷➂ך؎ٓأزIUUQXXXJSBTVUPZBDPNWS@IUNM
   "3٥䭁䓸植㹋ך؎ٓأزIUUQXXXJSBTVUPZBDPNBSIUNM
   

   View Slide

8. رغ؎أװطحزٙ٦ؙך䚍腉ぢ♳ծⵃ欽أة؎ٕך㢌⻉
   ةـٖحز׾ؗ٦ن٦سד乼⡲ׅ׷➂ך؎ٓأزIUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM
   ةـٖحزדٖءؾ׾鋅׷➂ך؎ٓأزIUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM
   搀简طحزٙ٦ؙך؎ٓأزIUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM
   

   View Slide

9. 鹈嫣
   鹈嫣
   黝㹅%FWFMPQFS&EJUJPO
   嫣兓/JHIUMZ
   鹈嫣
   嫣鹈
   鹈嫣
   ꥤ儗$BOBSZ
   ꥤ儗$ISPNJVN
   4PNFEBZ
   鹈嫣5FDIOPMPHZ1SFWJFX
   ꥤ儗8FC,JU/JHIUMZ
   `
   黝㹅1SFWJFX3FMFBTF 4PNFEBZ
   0SJHJOBMIUUQTUXJUUFSDPNLPTBNBSJTUBUVT
   ⚺銲ـٓؐؠך،حفر٦ز؟؎ؙٕ
   

   View Slide

10. ׉ך➭ծ/PEFKTװ؎ٝؿٓծؙٓؐسזוꦄ䱸ⴓꅿך涪㾜
    ػا؝ٝך؛٦ـٕח駈׾䒷׏䱦ֽ׋➂ך؎ٓأزIUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM
    ؟٦غ٦ך؎ٓأزIUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM
    ؙٓؐس؝ٝؾُ٦ذ؍ؚٝך؎ٓأزIUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM
    

    View Slide

11. ‣ K2VFSZؒ؝ءأذيً؎ٝأزٔ٦ي儗➿ך穄提
    8FC䪮遭ה銲実ך넝䏝⻉ח״׷8FC،فٔך醱꧟⻉
    ‣ /PEFKTח״׷ؽٕسفٗإأװزٓٝأػ؎ٓך兛⿹
    8FCؿٗٝزؒٝس䖞✲罏ךإٔؗإحزך㢌⻉
    ‣ ؙٓ؎،ٝز؟؎سٖٝتؚٔٝך♧菙⻉͑41"ך兛⿹
    رغ؎أװطحزٙ٦ؙך䚍腉ぢ♳ծ"KBY⵸䲿ז،٦ؗذؙثٍ銲実
    ワ鴟ך㢌⻉הծֿ׸תדך⳿勻✲
    

    View Slide

12. ؟٦غծ؎ٝؿٓծؙٓؐس
    ꦄ䱸걄㚖ך鹌娄
    رغ؎أծطحزٙ٦ؙ
    ؙٓ؎،ٝز橆㞮ך㢌⻉
    8FCծ؎ٝة٦طحز
    ـٓؐؠ䪮遭ך涪㾜
    8FCؿٗٝزؒٝس
    ワ鴟橆㞮ך㢌⻉װ䪮遭ך鹌娄ח
    黝䘔ׅ׷㢌⻉ָ䗳銲
    

    View Slide

13. ‣ ؙٓ؎،ٝز؟؎سכ湡ח鋅ִ׷ٌظזךד꤫臰⻉ָ湡甧א
    ‣ 実׭׵׸׷㢌⻉ך鸞䏝כ؝ٝذؗأزח״׏ג殯ז׷
    ‣ 劍䖉ח䘔ִ׵׸׷ؙٓ؎،ٝز؟؎سד㖈׶竲ֽ׷ֿה
    ‣ ֿ׸׾植㜥ָ㹋植דֹ׷فٗتؙزכ䓼ֻז׷
    黝䘔ך׋׭ח㢌⻉ָ実׭׵׸竲ֽ׷
    

    View Slide

14. 劍䖉ח䘔ִ竲ֽ׷׋׭ך
    崞涪ז倜꤫➿闐
    

    View Slide

15. 崞涪ז倜꤫➿闐ך䠐纏
    䗳銲ח䘔ׄג❛䳔ծ灶唱זו׾׃אא黝䏝ח倜׃ְ朐䡾ח⥂׍竲ֽ׷ֿה
    

    View Slide

16. ‣ ؙٓ؎،ٝز橆㞮װ銲⟝ך㢌⻉ח㼎ׅ׷鴼鸞ז㼎䘔黝䘔
    ‣ ـٓؐؠ䪮遭ך涪㾜ח⠵ֲػؿؓ٦وٝأぢ♳
    ‣ 䪮遭涸頾⫈ך؝ٝزٗ٦ٕ
    ‣ 䪮遭罏ך䎊状䏝
    崞涪ז倜꤫➿闐ך䗳銲䚍
    

    View Slide

17. ‣ 儗➿鹼׸זֿה׾׃גְזְהְֲ㸜䗰䠬䋐㜥⣣⦼
    ‣ 䪮遭涸ז胜兝ח鸬竲䚍ָ֮׷㷕统ծ穗꿀ך栻䖤
    ‣ 㥨ֹ㱾ְכה׮ַֻ秛䖤דֹ׷䠐䙼寸㹀
    Ꟛ涪罏חה׏גך.JOJNBM-PWBCMF1SPEVDUך㹋植
    䪮遭罏׾䎊状חׅ׷⸬腉
    

    View Slide

18. 崞涪ז倜꤫➿闐ך笝䭯
    劍䖉ח䘔ִ׷׋׭ծ䪮遭涸頾⫈׾؝ٝزٗ٦ٕ׃אא㢌⻉׃竲ֽ׷׋׭ך䠐䙼寸㹀
    

    View Slide

19. ⚠
    ‣ 葿ղזٓ؎ـٓٔך穈׫さ׻ׇח״׷醱꧟䚍ך㟓⸇
    ‣ 花㣐ז⣛㶷ػح؛٦آח״׷ًٝذشٝأ؝أز㟓⸇
    ‣ רֻךַ׿ִָ׋剑䓼ך䪮遭涸頾⫈
    鵚䎃ך獺ח״ֻ֮׷زٓـٕ
    

    View Slide

20. ⢪ְ׋ְػح؛٦آ׾鋅אֽ׷
    TDSJQUך鎸鶢װDPODBUך鏣㹀׾鷄⸇
    ꟼ鸬ؿ؋؎ٕ׾تؐٝٗ٦س
    فٗآؙؑزⰻחꂁ縧
    䩛⡲噟דꟼ鸬ؿ؋؎ٕ׾刿倜
    OQNJOTUBMMQBDLBHFOBNF
    ؝٦سⰻדJNQPSUSFRVJSFׅ׷
    CSPXTFSJGZXFCQBDLדؽٕسׅ׷
    OQNVQEBUF
    

    View Slide

21. `
    "OHVMBS
    3FBDU 7VFKT 8FC$PNQPOFOUT 1PMZNFS
    6*ך؝ٝه٦طٝز⻉ה
    ػح؛٦آה׃גך،حفر٦ز⫘ぢ
    

    View Slide

22. Generated by https://chrisbateman.github.io/webpack-visualizer
    

    View Slide

23. 崞涪ז倜꤫➿闐׾竲ֽ׷׋׭חכ
    ⣛㶷ػح؛٦آך⿑鼅ה
    ،ٝثػة٦ٝך㔐鼘ָ♶〳妀
    

    View Slide

24. ‣ ػؿؓ٦وٝأծ6*؝ٝه٦طٝزז׵،ؙإءؽٔذ؍
    ‣ غٝسٕ儗؟؎ؤ㟓⸇ꆀծػح؛٦آ荈⡤ך⣛㶷خٔ٦
    ‣ 殯暟䠬ךזׁ랲눤遭ד֮׏׋׶➭鎉铂鱐Ⰵ禸ד֮׏׋׶
    ‣ קַDPOUSJCVUPSך➂侧װMBUFTUDPNNJUծWFSTJPOזו
    ػح؛٦آ鼅㹀ך♧菙涸錁挿
    

    View Slide

25. ‣ זֻג׮ז׿הַז׷ِ٦ذ؍ٔذ؍װ䬄韋
    ‣ ׋הִלꟼ侧㘗זו暴㹀ך0QJOJPOBUFEזٓ؎ـٓٔ
    ‣ 麣Ⱗ׾ֲתֻ⢪ֲֿהכծְא׮䟝⫷״׶ꨇ׃ְ
    ‣ 㼰׃ך堣腉׾⢪ֲ׋׭חؿ؋؎ٕ؟؎ؤ׾肍㣐⻉ׇׁ׋׶
    "OUJ1BUUFSO⤑ⵃ䬄韋ٌٌٔٔ
    IUUQTXXXJDLSDPNQIPUPTOPSJPOBLBZBNB
    

    View Slide

26. MPEBTI,#
    
    SFBDUEPN,#
    
    SY,#
    
    BDNFKT,#
    
    DPSFKT,#
    
    WFMPDJUZBOJNBUF,#
    
    JNNVUBCMF,#
    
    SFBDU,#
    
    ˟NJOJGZ黝欽䖓ծH[JQ黝欽⵸
    Generated by https://alexkuz.github.io/webpack-chart
    

    View Slide

27. ‣ فؚٓ؎ٝך㢳欽ח״׷⣛㶷خٔ٦ך肍㣐⻉
    ‣ 㡪㣐זؽٕس橆㞮הꞿ㣐ז鏣㹀ؿ؋؎ٕ
    ‣ NBLFװOQNSVOד幥׬הֿ׹ח/PEF+4ָⰅ׶鴥׬
    ‣ 剑鵚כֿך⫘ぢ׾鼘ֹֽ׸זְؿء׮֮׷ךַ׮
    "OUJ1BUUFSOؽٕس橆㞮وءوء
    IUUQTXXXJDLSDPNQIPUPTUBLFTIJL
    

    View Slide

28. ‣ ❌ꅾ⾨ז穈׫さ׻ׇח״׏ג䧭׶甧אكأزז圓䧭
    ؽٕس鏣㹀װٓ؎ـٓٔ׾穈׫さ׻ׇ׷䱸滠㾴ָ⾨ֻז׷ה⽬זְ
    ‣ ✅搀椚ךזְ穈׫さ׻ׇח״׏ג䧭׶甧אىصوٕז圓䧭
    䗳銲⟃♳ך䬄韋⻉װِ٦ذ؍ٔذ؍׾Ⰵ׸זְד剑㼭圓䧭ח⸕׭׷
    "OUJ1BUUFSOרֻך罋ִ׋剑䓼
    

    View Slide

29. ‣ ⢽ה׃ג3FBDUך41"443ꟼ鸬כأؙٓحثָꨇ׃ְ
    ZBIPPVYJCMF葺ַ׏׋ծXBMNBSUFMFDUSPEFזוָ⯓➂ך濼䜋
    ‣ ꅾ㣐זٗحؙ؎ٝחז׷ָ؎ثַ׵圓眠ׅ׷״׶وء
    ‣ ؟٦غ٦ؿٖ٦يٙ٦ؙ➰㾩ךأُ٦ءّٝכ ٥٥
    
    ⯓➂ח״׷鑐遤ꐪ铎ך䛷䜋
    

    View Slide

30. ֮׷㉏겗׾鍑ֻ麓玎דծ׉ך㉏겗״׶׮
    ꨇ׃ְ㉏겗׾鍑ְגכז׵זְ
    ⯋כ堣唒㷕统ך俑腞דծ然桦㺘䏝׾実׭׷ֿהכػة٦ٝ钠陎׉׸荈⡤״׶׮ꨇ׃ְ㉏겗ד֮׶
    ׉׸׾鼘ֽג鍑寸׾㔳׷然桦㺘䏝嫰׾実׭׷קֲָ葺ְהְֲ鑧ך״ֲדׅ
    7BQOJL 7/4UBUJTUJDBMMFBSOJOHUIFPSZ
    8IFOTPMWJOHBQSPCMFNPGJOUFSFTU EPOPUTPMWFBNPSFHFOFSBMQSPCMFNBTBOJOUFSNFEJBUFTUFQ
    5SZUPHFUUIFBOTXFSUIBUZPVSFBMMZOFFECVUOPUBNPSFHFOFSBMPOF
    

    View Slide

31. 8FC*OJUJBUJWF$FOUFS
    ؐؑـ؎صء،ذ؍ـإٝة٦$ZCFS"HFOUًر؍،盖鱥ך8FC埆鯥穈籼
    

    View Slide

32. ‣ ،ؙإءؽٔذ؍ⵃ⤑䚍ךぢ♳
    ֮׵ײ׷ؼزծ堣唒ծرغ؎أחה׏ג⢪ְװְֿׅהפךꂁ䣁
    ‣ ػؿؓ٦وٝأ䘯黝䚍ךぢ♳
    넝鸞ח⹛⡲׃ג䘯黝ח⢪ִ׷ֿהח״׷ِ٦ؠ٦⡤꿀
    ‣ 倜׃ְ8FC䪮遭׾⢪׏׋ثٍٖٝآ
    倜꤫➿闐ך⚥דծ8FC䪮遭ךثؕٓ׾䌢ח䒷ֹ⳿ׅ׋׭ך鑐׫
    8FCה׃גךㅷ颵׾넝׭׷׮ךבֻ׶
    

    View Slide

33. 8FCָ䲿⣘דֹ׷⣣⦼ך
    剑㣐⻉ת׋כ⾱挿㔐䌓
    

    View Slide

34. תה׭
    

    View Slide

35. ‣ اؿزؐؑ،ծع٦سؐؑ،ծٓ؎ؿأة؎ٕFUD
    ‣ 8FCؿٗٝزؒٝس׾《׶䋆ֻ橆㞮כ㢌⻉׾竲ֽגְ׷
    ‣ ؙٓ؎،ٝز؟؎سכ׉׸ח黝䘔׃竲ֽ׷ֿהָ実׭׵׸׷
    ؙٓ؎،ٝز橆㞮ך㢌⻉ח黝䘔׃竲ֽ׷
    

    View Slide

36. ‣ 劍䖉ח䘔ִ׷׋׭ך㢌⻉FUDך׋׭崞涪ז倜꤫➿闐ָ䗳銲
    ‣ 㢳圫䚍הぢֹさְזָ׵ծ䪮遭涸頾⫈׾؝ٝزٗ٦ٕׅ׷
    ‣ 䗳銲⟃♳ח醱꧟זֿה׾׃גזְַ孡׾אֽ׷
    8FCفٗتؙز׾肪ג׷׋׭ך倜꤫➿闐
    

    View Slide

37. 劍䖉ח䘔ִ竲ֽ׷׋׭ך黝䘔ֿ׉ָ
    8FCؿٗٝزؒٝسך植㜥ח䗳銲ז㢌⻉
    

    View Slide

38. 2VFTUJPO
    IUUQBIPNV
    !BIPNV
    HJUIVCDPNBIPNV
    !
    "
    ⌂
    5IBOLTGPSַ׻ְְؿٔ٦稆勞꧊ְ׵ׅהװ
    IUUQXXXJSBTVUPZBDPN
    

    View Slide