$30 off During Our Annual Pro Sale. View Details »

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

Ayumu Sato
February 16, 2017

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

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

Ayumu Sato

February 16, 2017
Tweet

More Decks by Ayumu Sato

Other Decks in Programming

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