Legacy development meets webpack

5 月 23 日のヒカ☆ラボで登壇させて頂いた時のスライドです。一休.com レストランの web フロントエンドにビルドパイプラインを導入した経験をご紹介します。

VBScript meets Vue.js (関連スライド):
https://speakerdeck.com/simezi/vbscript-meets-vue-dot-js-20nian-yue-sifalsechu-hui-i

ヒカ☆ラボイベント詳細:
https://career.levtech.jp/hikalab/event/detail/92/

Transcript

1. Legacy development meets webpack ʙϏϧυύΠϓϥΠϯಋೖۤ࿑࿩ʙ
2. ࣗݾ঺հ Ҵඌ ༡ • Web ϑϩϯτΤϯυɾΤϯδχΞ • 2016 ೥ 10 ݄ೖࣾ • Ұٳ.com Ϩετϥϯ ॴଐ • Web ϑϩϯτΤϯυج൫վળ୲౰ • ू٬ (ച্վળ) ϓϩδΣΫτνʔϜ
3. Ұٳ.com Ϩετϥϯ 2006೥ϦϦʔε લ೥ൺ 30 ˋ Ҏ্ͷ੒௕Λଓ͚ΔϑΝΠϯμΠχϯάͷ༧໿αʔϏε https://restaurant.ikyu.com/
4. https://restaurant.ikyu.com/ ɹʊਓਓਓਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹʻ ʼɹ Ұٳ.com ϨετϥϯͰɹɹɹɹɹʻ ʼɹ ༧໿͓ͨ͠ళͳΒɺؒҧ͍ͳ͍ ɹʻ ʼɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹʻ ɹʉY^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^ʉ
5. ࠓ೔ͷ͸ͳ͠ 1. Web ϑϩϯτΤϯυͷٕज़ελοΫ (Before) 2. ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ 3. Web ϑϩϯτΤϯυͷٕज़ελοΫ (After)
6. Web ϑϩϯτΤϯυͷ ٕज़ελοΫ (Before)
7. ⸻ Web ϑϩϯτΤϯυͷٕज़ελοΫ (Before) ίʔυϕʔε: • JavaScript • (500 ϑΝΠϧɺ7 ສεςοϓ) • CSS • (700 ϑΝΠϧɺ35 ສεςοϓ) • Classic ASP • (VBScript + HTMLɺ4000 ϑΝΠϧɺ90 ສεςοϓ) • จࣈίʔυ͸ Shift_JIS +
8. ⸻ Web ϑϩϯτΤϯυͷٕज़ελοΫ (Before) ओྲྀςΩετΤσΟλ: • लؙ • UTF-8ɺShift_JIS ͷԣஅͰɺ೔ຊޠͷจࣈίʔυࣗಈ൑ఆ͕༏ल • CTags ͷλάδϟϯϓػೳ͕ඪ४૷උ • શจݕࡧػೳ͕๛෋
9. '90 ೥୅ͷٕज़ελοΫͰɺ αʔϏεϦϦʔε౰ॳ͔ΒͷίʔυϕʔεΛ ࠓͳ͓ɺอक։ൃ͠ͳ͕Βӡ༻த!
10. ͦͷҰํͰɺ લ೥ൺ 30 ˋ Ҏ্ͷ੒௕Λଓ͚Δ ߴ͍αʔϏε੒௕཰Λҡ࣋
11. Ͱ΋ɺͦΖͦΖɺ αʔϏε੒௕ୈҰͰ։ൃ͖ͯͨ͠ෛ࠴Λฦ͍ͨ͠ɻ
12. αʔϏεͷ੒௕཰ߴ͍͠ɺ ϞμϯͳϑϩϯτΤϯυ։ൃମ੍ʹͰ͖ͨΒɺ ͞Βʹ੒௕Ͱ͖ΔͷͰ͸?
13. αʔϏεͷ੒௕཰ߴ͍͠ɺ ϞμϯͳϑϩϯτΤϯυ։ൃମ੍ʹͰ͖ͨΒɺ ͞Βʹ੒௕Ͱ͖ΔͷͰ͸? ʊਓਓਓਓਓਓਓਓਓਓʊ ʼɹͷͼ͠Ζ͔͠ͳ͍ɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Yʉ
14. ϏϧυύΠϓϥΠϯͷ ಋೖͱ݁Ռ
15. ⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ϏϧυύΠϓϥΠϯͷํ਑ • ඇޮ཰ͳख࡞ۀ͸ࣗಈԽ • ͋Δ΂͖ίʔυϕʔεΛθϩ͔Βͭ͘Δ • ઌΛݟਾ͑ͨϑϩϯτΤϯυٕज़Λ࠾༻͢Δ
16. ⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ webpack Λ࠾༻ I’ve found Gulp and Grunt to be unnecessary abstractions. npm scripts are plenty powerful and often easier to live with. Why I Left Gulp and Grunt for npm Scripts https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8 • npm scripts ͱ webpack ͷബ͍ߏ੒ • ݱ࣌఺ͰͷओྲྀϏϧτπʔϧ • Twitter ΋࠾༻ͯͨؒ͠͠ҧ͍ͳ͍ͬ͠ΐ • webpack on twitter.com https://alunny.com/articles/webpack-on-twitter-com/
17. ⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ͋Δ΂͖ϑϩϯτΤϯυɾϏϧυύΠϓϥΠϯΛߏ੒ • طଘͷίʔυϕʔεͱ͸෼཭ • CSS/JS ϑΝΠϧͷѹॖͱΩϟογϡରࡦ͸ࣗಈԽ • ίʔσΟϯάن໿νΣοΫ͸ Lint ͰࣗಈԽ • Node.js ͷΤίγεςϜΛ׆༻
18. ⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ઌΛݟਾ͑ͨϑϩϯτΤϯυٕज़ελοΫ • JavaScript: Babel + ES.Next • CSS: PostCSS + cssnext • Web Components Λݟਾ͑ͨίϯϙʔωϯτ୯Ґ ͷϑΝΠϧߏ੒
19. ೖࣾޙ 1 ϲ݄΄ͲͰ ϏϧυύΠϓϥΠϯ͕׬੒ɺͦͯ͠ಋೖ!
20. ͊͞ɺΈΜͳ࢖ͬͯ
21. ୭΋࢖Θͳ͔ͬͨ...
22. WHY
23. ⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ු͖۷Γʹͳͬͨ՝୊ • σβΠφʹ͸ CSS ϓϦϓϩηοα΋ϏϧυύΠϓ ϥΠϯ΋ະ஌ͱͷૺ۰ • ΤϯδχΞਞʹϏϧυύΠϓϥΠϯͷ։ൃऀϝϦο τ͕఻Θ͍ͬͯͳ͍ • ͋ΕɺΦϨ͔͠ϝϦοτͳ͍
24. ⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ σβΠφʹ͸ CSS ϓϦϓϩηοα΋ϏϧυύΠϓϥΠϯ΋ະ ஌ͱͷૺ۰ ⸻ • Sass ΍ LESS ͷ׆༻ܦݧͷͳ͍؀ڥ • CSS ϓϦϓϩηοαͬͯͳΜ͔ͩྑ͘෼͔Βͳ͍ • BEM ౳ͷ CSS ΞʔΩςΫνϟ΋ศརͦ͏͚ͩͲ… • CSS ॻ͖͍͚ͨͩͳͷʹϏϧυ͕ඞཁ…
25. ⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ΤϯδχΞਞʹϏϧυύΠϓϥΠϯͷ։ൃऀϝϦοτ͕఻Θ͍ͬͯͳ͍ ⸻ • ASP ͱάϩʔόϧԚછ JS ࣮૷͔ΒɺϞδϡʔϧੑΛ࣮࣋ͬͨ૷΁ ͷίϯςΩετεΠον͕ਐ·ͳ͍ɻ • ES.Next ͸ษڧத͔ͩΒਖ਼͍͠ॻ͖ํ͕෼͔Βͳ͍ɻ • ΤίγεςϜͷͳ͍ ASP ͔Βɺ͍͖ͳΓύοέʔδ؅ཧ΍ npm ͷ ࿩Λͯ͠΋఻ΘΒͳ͍ɻ • ௿Ϩϕϧͳந৅Խ͔࣋ͨ͠ͳ͍ ASP ίʔυϕʔε͔Β͸ɺந৅౓ ͷߴ͍એݴతͳσʔλόΠϯσΟϯά͸Πϝʔδ͕༙͔ͳ͍ɻ
26. σβΠφʹ΋ΤϯδχΞʹ΋ɺ ·ͬͨ͘։ൃऀϝϦοτ͕఻Θ͍ͬͯͳ͔ͬͨɻ
27. ϏϧυύΠϓϥΠϯͷϦϦʔεલޙʹɺ࠲ֶΤϯ τϦΛࣾ಺Ͱڞ༗͍͕ͯͨ͠ɺৼΓฦΔͱܒ໤׆ ಈͱͯ͠͸ɺ·ͬͨ͘ෆे෼ͩͬͨɻ
28. ։ൃऀϝϦοτͷཧղʹ͸ɺ ࣮ફܦݧʹউΔ΋ͷͳ͠!
29. ͦΕͳΒ
30. ⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ϏϧυύΠϓϥΠϯʹ࣮૷ΛϩοΫΠϯ • طଘ࣮૷ΛϏϧυύΠϓϥΠϯԼʹҠ২ • ݹ͍ίʔυϕʔεͷ࣮૷Λ͞ΘΔ࣌΋ϏϧυύΠϓ ϥΠϯΛհͯ͠։ൃ͢Δ؀ڥʹͨ͠ɻ • ݹ͍ίʔυϕʔεͷҠ২͸ɺҊ݅ͷ߹ؒΛΈͳ͕Β ྗٕͰ࣮ࢪ
31. Ұٳ.com Ϩετϥϯͷओಈઢ͸ɺ4 ݄ʹ΍ͬͱɺ ϏϧυύΠϓϥΠϯΛհͨ͠։ൃʹҠߦ͠·ͨ͠
32. ⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ϏϧυύΠϓϥΠϯ΁ͷϩοΫΠϯͷ݁Ռ • σβΠφ/ΤϯδχΞਞ͕ɺঃʑʹϞμϯͳςΩετ ΤσΟλ΁Ҡߦ • UI Ҋ݅Ͱ Vue.js ͷ࠾༻͕ਐߦத • ES.Next ͷ async/await ʹΑΔγϯϓϧͳίʔσΟ ϯάɺ࣮૷ͷϞδϡʔϧԽͳͲ͕ɺঃʑʹਐߦத
33. ࣮ફΛ௨ͯ͠ɺ ։ൃऀϝϦοτ΁ͷཧղ͕গͣͭ͠ਁಁதɻ
34. Web ϑϩϯτΤϯυͷ ٕज़ελοΫ (After)
35. ⸻ Web ϑϩϯτΤϯυͷٕज़ελοΫ (After) ίʔυϕʔε: • JavaScript ES.Next • (120 ϑΝΠϧɺ3 ສεςοϓ) • CSS cssnext • (100 ϑΝΠϧɺ4 ສεςοϓ) • Classic ASP CTO ͕ϦϓϨʔεத! • ٕज़తෛ࠴ͱ޲͖߹͏https://speakerdeck.com/naoya/ji-shu-de-fu-zhai-toxiang-kihe-u • จࣈίʔυ͸ Shift_JIS UTF-8
36. ⸻ Web ϑϩϯτΤϯυͷٕज़ελοΫ (After) ओྲྀςΩετΤσΟλ: • लؙ • Visual Studio Code • Atom
37. Ұٳ.com ϨετϥϯͷϑϩϯτΤϯυ͸ Web Β͘͠ɺ ϓϩάϨογϰʹվળΛଓ͚ͯߦ͖·͢