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

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

Transcript

1. 8FC
   ؿٗٝزؒٝسח
   劍䖉ׁ׸׷黝䘔ה倜꤫➿闐 
   
   
   
   %FWFMPQFST
   4VNNJU
   խ&
   䖓⼱
   !BIPNV
   
   "ZVNV
   4BUP
2. ֶכ״ֲ׀ְׂתׅ
   !BIPNVדׅ
3. ‣ ⡟谏
   娄ׁהֲ
   ֮ײ׬
   ‣ せ〢㾊ה幪靼׾䖂䗁⚥ך
   8FC
   ر؍كٗحػ٦
   ‣ 剑鵚ךꟼ䗰כ
   XFCQFSG
   ה
   BZ
   ה➂✲罋铬
   ‣ 吳
   $ZCFS"HFOU
   ַ׵
   吳
   "CFNB57
   ⳿ぢ⚥
    ًر؍،窟䭍
   䪮遭䨌殛㹓
   
   䪮遭劤鿇
   8FC
   *OJUJBUJWF
   $FOUFS !BIPNV
4. ℹ ‣ ؿٗٝزؒٝسח劍䖉ׁ׸׷ 黝䘔ה㢌⻉
   ‣ 劍䖉ח䘔ִ竲ֽ׷׋׭ך 崞涪ז倜꤫➿闐
5. 8FC
   ؿٗٝزؒٝسח
   劍䖉ׁ׸׷黝䘔ה㢌⻉
6. ‣ 倜׃ְرغ؎أװ
   8FC
   䪮遭ך㹋遤橆㞮זוך涫㜥
   ‣ رغ؎أװطحزٙ٦ؙך䚍腉ぢ♳ծⵃ欽أة؎ٕך㢌⻉
   ‣ 8FC
   垥彊➬圫װـٓؐؠ㹋鄲ך،حفر٦ز
   ‣ ׉ך➭ծ/PEFKT
   װ؎ٝؿٓծؙٓؐسזוꦄ䱸ⴓꅿך涪㾜 8FC
   ؿٗٝزؒٝسワ鴟ך㢌⻉
7. 倜׃ְرغ؎أװ
   8FC
   䪮遭ך㹋遤橆㞮זוך涫㜥 73؜٦ي׾فٖ؎ׅ׷➂ך؎ٓأز
   IUUQXXXJSBTVUPZBDPNWS@IUNM "3٥䭁䓸植㹋ך؎ٓأز
   IUUQXXXJSBTVUPZBDPNBSIUNM
8. رغ؎أװطحزٙ٦ؙך䚍腉ぢ♳ծⵃ欽أة؎ٕך㢌⻉ ةـٖحز׾ؗ٦ن٦سד乼⡲ׅ׷➂ך؎ٓأز
   IUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM ةـٖحزדٖءؾ׾鋅׷➂ך؎ٓأز
   IUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM 搀简طحزٙ٦ؙך؎ٓأز
   IUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM
9. 鹈嫣 鹈嫣 黝㹅
   
   %FWFMPQFS
   &EJUJPO 嫣兓
   
   /JHIUMZ 鹈嫣 嫣鹈 鹈嫣 ꥤ儗
   
   $BOBSZ ꥤ儗
   
   $ISPNJVN 4PNFEBZ 鹈嫣
   
   5FDIOPMPHZ
   1SFWJFX ꥤ儗
   
   8FC,JU
   /JHIUMZ ` 黝㹅
   
   1SFWJFX
   3FMFBTF 4PNFEBZ 0SJHJOBM
   IUUQTUXJUUFSDPNLPTBNBSJTUBUVT ⚺銲ـٓؐؠך،حفر٦ز؟؎ؙٕ
10. ׉ך➭ծ/PEFKT
    װ؎ٝؿٓծؙٓؐسזוꦄ䱸ⴓꅿך涪㾜 ػا؝ٝך؛٦ـٕח駈׾䒷׏䱦ֽ׋➂ך؎ٓأز
    IUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM ؟٦غ٦ך؎ٓأز
    IUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM ؙٓؐس؝ٝؾُ٦ذ؍ؚٝך؎ٓأز
    IUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM
11. ‣ K2VFSZ
    ؒ؝ءأذي
    
    ً؎ٝأزٔ٦ي
    儗➿ך穄提
     8FC
    䪮遭ה銲実ך넝䏝⻉ח״׷
    8FC
    ،فٔך醱꧟⻉
    ‣ /PEFKT
    ח״׷ؽٕسفٗإأװزٓٝأػ؎ٓך兛⿹
     8FC
    ؿٗٝزؒٝس䖞✲罏ךإٔؗإحزך㢌⻉
    ‣ ؙٓ؎،ٝز؟؎سٖٝتؚٔٝך♧菙⻉͑
    41"
    ך兛⿹
     رغ؎أװطحزٙ٦ؙך䚍腉ぢ♳ծ"KBY⵸䲿ז،٦ؗذؙثٍ銲実 ワ鴟ך㢌⻉הծֿ׸תדך⳿勻✲
12. ؟٦غծ؎ٝؿٓծؙٓؐس
    ꦄ䱸걄㚖ך鹌娄 رغ؎أծطحزٙ٦ؙ
    ؙٓ؎،ٝز橆㞮ך㢌⻉ 8FCծ؎ٝة٦طحز
    ـٓؐؠ䪮遭ך涪㾜 8FC
    ؿٗٝزؒٝس ワ鴟橆㞮ך㢌⻉װ䪮遭ך鹌娄ח
    黝䘔ׅ׷㢌⻉ָ䗳銲
13. ‣ ؙٓ؎،ٝز؟؎سכ湡ח鋅ִ׷ٌظזךד꤫臰⻉ָ湡甧א
    ‣ 実׭׵׸׷㢌⻉ך鸞䏝כ؝ٝذؗأزח״׏ג殯ז׷
    ‣ 劍䖉ח䘔ִ׵׸׷ؙٓ؎،ٝز؟؎سד㖈׶竲ֽ׷ֿה
    ‣ ֿ׸׾植㜥ָ㹋植דֹ׷فٗتؙزכ䓼ֻז׷ 黝䘔ך׋׭ח㢌⻉ָ実׭׵׸竲ֽ׷
14. 劍䖉ח䘔ִ竲ֽ׷׋׭ך
    崞涪ז倜꤫➿闐
15. 崞涪ז倜꤫➿闐ך䠐纏 䗳銲ח䘔ׄג❛䳔ծ灶唱זו׾׃אא黝䏝ח倜׃ְ朐䡾ח⥂׍竲ֽ׷ֿה
16. ‣ ؙٓ؎،ٝز橆㞮װ銲⟝ך㢌⻉ח㼎ׅ׷鴼鸞ז㼎䘔黝䘔
    ‣ ـٓؐؠ䪮遭ך涪㾜ח⠵ֲػؿؓ٦وٝأぢ♳
    ‣ 䪮遭涸頾⫈ך؝ٝزٗ٦ٕ
    ‣ 䪮遭罏ך䎊状䏝
    崞涪ז倜꤫➿闐ך䗳銲䚍
17. ‣ 儗➿鹼׸זֿה׾׃גְזְהְֲ㸜䗰䠬䋐㜥⣣⦼
    ‣ 䪮遭涸ז胜兝ח鸬竲䚍ָ֮׷㷕统ծ穗꿀ך栻䖤
    ‣ 㥨ֹ㱾ְכה׮ַֻ秛䖤דֹ׷䠐䙼寸㹀
     Ꟛ涪罏חה׏גך
    .JOJNBM
    -PWBCMF
    1SPEVDU
    ך㹋植 䪮遭罏׾䎊状חׅ׷⸬腉
18. 崞涪ז倜꤫➿闐ך笝䭯 劍䖉ח䘔ִ׷׋׭ծ䪮遭涸頾⫈׾؝ٝزٗ٦ٕ׃אא㢌⻉׃竲ֽ׷׋׭ך䠐䙼寸㹀
19. ⚠ ‣ 葿ղזٓ؎ـٓٔך穈׫さ׻ׇח״׷醱꧟䚍ך㟓⸇
    ‣ 花㣐ז⣛㶷ػح؛٦آח״׷ًٝذشٝأ؝أز㟓⸇
    ‣ רֻךַ׿ִָ׋剑䓼ך䪮遭涸頾⫈ 鵚䎃ך獺ח״ֻ֮׷زٓـٕ
20. ⢪ְ׋ְػح؛٦آ׾鋅אֽ׷ TDSJQU
    ך鎸鶢װ
    DPODBU
    ך鏣㹀׾鷄⸇ ꟼ鸬ؿ؋؎ٕ׾تؐٝٗ٦س فٗآؙؑزⰻחꂁ縧 䩛⡲噟דꟼ鸬ؿ؋؎ٕ׾刿倜 OQN
    JOTUBMM
    QBDLBHFOBNF ؝٦سⰻד
    JNQPSUSFRVJSF
    ׅ׷ CSPXTFSJGZXFCQBDL
    דؽٕسׅ׷ OQN
    VQEBUF
21. ` "OHVMBS 3FBDU 7VFKT 8FC
    $PNQPOFOUT 1PMZNFS 6*
    ך؝ٝه٦طٝز⻉ה
    ػح؛٦آה׃גך،حفر٦ز⫘ぢ
22. Generated by https://chrisbateman.github.io/webpack-visualizer
23. 崞涪ז倜꤫➿闐׾竲ֽ׷׋׭חכ
    ⣛㶷ػح؛٦آך⿑鼅ה
    ،ٝثػة٦ٝך㔐鼘ָ♶〳妀
24. ‣ ػؿؓ٦وٝأծ6*
    ؝ٝه٦طٝزז׵،ؙإءؽٔذ؍
    ‣ غٝسٕ儗؟؎ؤ㟓⸇ꆀծػح؛٦آ荈⡤ך⣛㶷خٔ٦
    ‣ 殯暟䠬ךזׁ랲눤遭ד֮׏׋׶➭鎉铂鱐Ⰵ禸ד֮׏׋׶
    ‣ קַ
    DPOUSJCVUPS
    ך➂侧װ
    MBUFTU
    DPNNJUծWFSTJPO
    זו ػح؛٦آ鼅㹀ך♧菙涸錁挿
25. ‣ זֻג׮ז׿הַז׷ِ٦ذ؍ٔذ؍װ䬄韋
    ‣ ׋הִלꟼ侧㘗זו暴㹀ך
    0QJOJPOBUFE
    זٓ؎ـٓٔ
    ‣ 麣Ⱗ׾ֲתֻ⢪ֲֿהכծְא׮䟝⫷״׶ꨇ׃ְ
    ‣ 㼰׃ך堣腉׾⢪ֲ׋׭חؿ؋؎ٕ؟؎ؤ׾肍㣐⻉ׇׁ׋׶ "OUJ1BUUFSO
    ⤑ⵃ䬄韋ٌٌٔٔ IUUQTXXXJDLSDPNQIPUPTOPSJPOBLBZBNB
26. MPEBTI
    
    ,#
    
    SFBDUEPN
    
    ,#
    
    SY
    
    ,#
    
    BDNFKT
    ,#
    
    DPSFKT
    
    ,#
    
    WFMPDJUZBOJNBUF
    ,#
    
    JNNVUBCMF
    
    ,#
    
    SFBDU
    
    ,#
     ˟
    NJOJGZ
    黝欽䖓ծH[JQ
    黝欽⵸ Generated by https://alexkuz.github.io/webpack-chart
27. ‣ فؚٓ؎ٝך㢳欽ח״׷⣛㶷خٔ٦ך肍㣐⻉
    ‣ 㡪㣐זؽٕس橆㞮הꞿ㣐ז鏣㹀ؿ؋؎ٕ
    ‣ NBLF
    װ
    OQN
    SVO
    ד幥׬הֿ׹ח
    /PEF+4
    ָⰅ׶鴥׬
    ‣ 剑鵚כֿך⫘ぢ׾鼘ֹֽ׸זְؿء׮֮׷ךַ׮ "OUJ1BUUFSO
    ؽٕس橆㞮وءوء IUUQTXXXJDLSDPNQIPUPTUBLFTIJL
28. ‣ ❌
    ꅾ⾨ז穈׫さ׻ׇח״׏ג䧭׶甧אكأزז圓䧭
     ؽٕس鏣㹀װٓ؎ـٓٔ׾穈׫さ׻ׇ׷䱸滠㾴ָ⾨ֻז׷ה⽬זְ
    ‣ ✅
    搀椚ךזְ穈׫さ׻ׇח״׏ג䧭׶甧אىصوٕז圓䧭
     䗳銲⟃♳ך䬄韋⻉װِ٦ذ؍ٔذ؍׾Ⰵ׸זְד剑㼭圓䧭ח⸕׭׷ "OUJ1BUUFSO
    רֻך罋ִ׋剑䓼
29. ‣ ⢽ה׃ג
    3FBDU
    ך
    41"
    
    443
    ꟼ鸬כأؙٓحثָꨇ׃ְ
     ZBIPPVYJCMF葺ַ׏׋ծXBMNBSUFMFDUSPEF
    זוָ⯓➂ך濼䜋
    ‣ ꅾ㣐זٗحؙ؎ٝחז׷ָ؎ثַ׵圓眠ׅ׷״׶وء
    ‣ ؟٦غ٦ؿٖ٦يٙ٦ؙ➰㾩ךأُ٦ءّٝכ ٥٥ ⯓➂ח״׷鑐遤ꐪ铎ך䛷䜋
30. ֮׷㉏겗׾鍑ֻ麓玎דծ׉ך㉏겗״׶׮
    ꨇ׃ְ㉏겗׾鍑ְגכז׵זְ ⯋כ堣唒㷕统ך俑腞דծ然桦㺘䏝׾実׭׷ֿהכػة٦ٝ钠陎׉׸荈⡤״׶׮ꨇ׃ְ㉏겗ד֮׶
    ׉׸׾鼘ֽג鍑寸׾㔳׷然桦㺘䏝嫰׾実׭׷קֲָ葺ְהְֲ鑧ך״ֲדׅ 7BQOJL
    7
    /
    
    4UBUJTUJDBM
    MFBSOJOH
    UIFPSZ 8IFO
    TPMWJOH
    B
    QSPCMFN
    PG
    JOUFSFTU
    EP
    OPU
    TPMWF
    B
    NPSF
    HFOFSBM
    QSPCMFN
    BT
    BO
    JOUFSNFEJBUF
    TUFQ
    
    5SZ
    UP
    HFU
    UIF
    BOTXFS
    UIBU
    ZPV
    SFBMMZ
    OFFE
    CVU
    OPU
    B
    NPSF
    HFOFSBM
    POF
31. 8FC
    *OJUJBUJWF
    $FOUFS ؐؑـ؎صء،ذ؍ـإٝة٦$ZCFS"HFOU
    ًر؍،盖鱥ך
    8FC
    埆鯥穈籼
32. ‣ ،ؙإءؽٔذ؍ⵃ⤑䚍ךぢ♳
     ֮׵ײ׷ؼزծ堣唒ծرغ؎أחה׏ג⢪ְװְֿׅהפךꂁ䣁
    ‣ ػؿؓ٦وٝأ䘯黝䚍ךぢ♳
     넝鸞ח⹛⡲׃ג䘯黝ח⢪ִ׷ֿהח״׷ِ٦ؠ٦⡤꿀
    ‣ 倜׃ְ
    8FC
    䪮遭׾⢪׏׋ثٍٖٝآ
     倜꤫➿闐ך⚥דծ8FC
    䪮遭ךثؕٓ׾䌢ח䒷ֹ⳿ׅ׋׭ך鑐׫ 8FC
    ה׃גךㅷ颵׾넝׭׷׮ךבֻ׶
33. 8FC
    ָ䲿⣘דֹ׷⣣⦼ך
    剑㣐⻉ת׋כ⾱挿㔐䌓
34. תה׭
35. ‣ اؿزؐؑ،ծع٦سؐؑ،ծٓ؎ؿأة؎ٕ
    FUD
    ‣ 8FC
    ؿٗٝزؒٝس׾《׶䋆ֻ橆㞮כ㢌⻉׾竲ֽגְ׷
    ‣ ؙٓ؎،ٝز؟؎سכ׉׸ח黝䘔׃竲ֽ׷ֿהָ実׭׵׸׷ ؙٓ؎،ٝز橆㞮ך㢌⻉ח黝䘔׃竲ֽ׷
36. ‣ 劍䖉ח䘔ִ׷׋׭ך㢌⻉
    FUD
    ך׋׭崞涪ז倜꤫➿闐ָ䗳銲
    ‣ 㢳圫䚍הぢֹさְזָ׵ծ䪮遭涸頾⫈׾؝ٝزٗ٦ٕׅ׷
    ‣ 䗳銲⟃♳ח醱꧟זֿה׾׃גזְַ孡׾אֽ׷ 8FC
    فٗتؙز׾肪ג׷׋׭ך倜꤫➿闐
37. 劍䖉ח䘔ִ竲ֽ׷׋׭ך黝䘔ֿ׉ָ
    8FC
    ؿٗٝزؒٝسך植㜥ח䗳銲ז㢌⻉
38. 2VFTUJPO
    
    IUUQBIPNV
    
    
    !BIPNV
    
    
    HJUIVCDPNBIPNV
    ! " ⌂ 5IBOLT
    GPS
    ַ׻ְְؿٔ٦稆勞꧊
    ְ׵ׅהװ
    IUUQXXXJSBTVUPZBDPN