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

1644fba8a219c89987390ef4f23d06bf?s=47 Ayumu Sato
February 16, 2017

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

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

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

February 16, 2017
Tweet

Transcript

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

  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

    鹈嫣5FDIOPMPHZ1SFWJFX ꥤ儗8FC,JU/JHIUMZ ` 黝㹅1SFWJFX3FMFBTF 4PNFEBZ 0SJHJOBMIUUQTUXJUUFSDPNLPTBNBSJTUBUVT ⚺銲ـٓؐؠך،حفر٦ز؟؎ؙٕ
  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-PWBCMF1SPEVDUך㹋植 䪮遭罏׾䎊状חׅ׷⸬腉

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

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

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

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

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

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

  24. ‣ ػؿؓ٦وٝأծ6*؝ٝه٦طٝزז׵،ؙإءؽٔذ؍ ‣ غٝسٕ儗؟؎ؤ㟓⸇ꆀծػح؛٦آ荈⡤ך⣛㶷خٔ٦ ‣ 殯暟䠬ךזׁ랲눤遭ד֮׏׋׶➭鎉铂鱐Ⰵ禸ד֮׏׋׶ ‣ קַDPOUSJCVUPSך➂侧װMBUFTUDPNNJUծ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װOQNSVOד幥׬הֿ׹ח/PEF+4ָⰅ׶鴥׬ ‣ 剑鵚כֿך⫘ぢ׾鼘ֹֽ׸זְؿء׮֮׷ךַ׮ "OUJ1BUUFSOؽٕس橆㞮وءوء IUUQTXXXJDLSDPNQIPUPTUBLFTIJL

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

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

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

  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 ! " ⌂ 5IBOLTGPSַ׻ְְؿٔ٦稆勞꧊ְ׵ׅהװ IUUQXXXJSBTVUPZBDPN