Legacy development meets webpack

Slide 1

Slide 1 text

Legacy development meets webpack ʙϏϧυύΠϓϥΠϯಋೖۤ࿑࿩ʙ

Slide 2

Slide 2 text

ࣗݾ঺հ Ҵඌ ༡ • Web ϑϩϯτΤϯυɾΤϯδχΞ • 2016 ೥ 10 ݄ೖࣾ • Ұٳ.com Ϩετϥϯ ॴଐ • Web ϑϩϯτΤϯυج൫վળ୲౰ • ू٬ (ച্վળ) ϓϩδΣΫτνʔϜ

Slide 3

Slide 3 text

Ұٳ.com Ϩετϥϯ 2006೥ϦϦʔε લ೥ൺ 30 ˋ Ҏ্ͷ੒௕Λଓ͚ΔϑΝΠϯμΠχϯάͷ༧໿αʔϏε https://restaurant.ikyu.com/

Slide 4

Slide 4 text

https://restaurant.ikyu.com/ ɹʊਓਓਓਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹʻ ʼɹ Ұٳ.com ϨετϥϯͰɹɹɹɹɹʻ ʼɹ ༧໿͓ͨ͠ళͳΒɺؒҧ͍ͳ͍ ɹʻ ʼɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹʻ ɹʉY^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^ʉ

Slide 5

Slide 5 text

ࠓ೔ͷ͸ͳ͠ 1. Web ϑϩϯτΤϯυͷٕज़ελοΫ (Before) 2. ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ 3. Web ϑϩϯτΤϯυͷٕज़ελοΫ (After)

Slide 6

Slide 6 text

Web ϑϩϯτΤϯυͷ ٕज़ελοΫ (Before)

Slide 7

Slide 7 text

⸻ Web ϑϩϯτΤϯυͷٕज़ελοΫ (Before) ίʔυϕʔε: • JavaScript • (500 ϑΝΠϧɺ7 ສεςοϓ) • CSS • (700 ϑΝΠϧɺ35 ສεςοϓ) • Classic ASP • (VBScript + HTMLɺ4000 ϑΝΠϧɺ90 ສεςοϓ) • จࣈίʔυ͸ Shift_JIS +

Slide 8

Slide 8 text

⸻ Web ϑϩϯτΤϯυͷٕज़ελοΫ (Before) ओྲྀςΩετΤσΟλ: • लؙ • UTF-8ɺShift_JIS ͷԣஅͰɺ೔ຊޠͷจࣈίʔυࣗಈ൑ఆ͕༏ल • CTags ͷλάδϟϯϓػೳ͕ඪ४૷උ • શจݕࡧػೳ͕๛෋

Slide 9

Slide 9 text

'90 ೥୅ͷٕज़ελοΫͰɺ αʔϏεϦϦʔε౰ॳ͔ΒͷίʔυϕʔεΛ ࠓͳ͓ɺอक։ൃ͠ͳ͕Βӡ༻த!

Slide 10

Slide 10 text

ͦͷҰํͰɺ લ೥ൺ 30 ˋ Ҏ্ͷ੒௕Λଓ͚Δ ߴ͍αʔϏε੒௕཰Λҡ࣋

Slide 11

Slide 11 text

Ͱ΋ɺͦΖͦΖɺ αʔϏε੒௕ୈҰͰ։ൃ͖ͯͨ͠ෛ࠴Λฦ͍ͨ͠ɻ

Slide 12

Slide 12 text

αʔϏεͷ੒௕཰ߴ͍͠ɺ ϞμϯͳϑϩϯτΤϯυ։ൃମ੍ʹͰ͖ͨΒɺ ͞Βʹ੒௕Ͱ͖ΔͷͰ͸?

Slide 13

Slide 13 text

αʔϏεͷ੒௕཰ߴ͍͠ɺ ϞμϯͳϑϩϯτΤϯυ։ൃମ੍ʹͰ͖ͨΒɺ ͞Βʹ੒௕Ͱ͖ΔͷͰ͸? ʊਓਓਓਓਓਓਓਓਓਓʊ ʼɹͷͼ͠Ζ͔͠ͳ͍ɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Yʉ

Slide 14

Slide 14 text

ϏϧυύΠϓϥΠϯͷ ಋೖͱ݁Ռ

Slide 15

Slide 15 text

⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ϏϧυύΠϓϥΠϯͷํ਑ • ඇޮ཰ͳख࡞ۀ͸ࣗಈԽ • ͋Δ΂͖ίʔυϕʔεΛθϩ͔Βͭ͘Δ • ઌΛݟਾ͑ͨϑϩϯτΤϯυٕज़Λ࠾༻͢Δ

Slide 16

Slide 16 text

⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ 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/

Slide 17

Slide 17 text

⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ͋Δ΂͖ϑϩϯτΤϯυɾϏϧυύΠϓϥΠϯΛߏ੒ • طଘͷίʔυϕʔεͱ͸෼཭ • CSS/JS ϑΝΠϧͷѹॖͱΩϟογϡରࡦ͸ࣗಈԽ • ίʔσΟϯάن໿νΣοΫ͸ Lint ͰࣗಈԽ • Node.js ͷΤίγεςϜΛ׆༻

Slide 18

Slide 18 text

⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ઌΛݟਾ͑ͨϑϩϯτΤϯυٕज़ελοΫ • JavaScript: Babel + ES.Next • CSS: PostCSS + cssnext • Web Components Λݟਾ͑ͨίϯϙʔωϯτ୯Ґ ͷϑΝΠϧߏ੒

Slide 19

Slide 19 text

ೖࣾޙ 1 ϲ݄΄ͲͰ ϏϧυύΠϓϥΠϯ͕׬੒ɺͦͯ͠ಋೖ!

Slide 20

Slide 20 text

͊͞ɺΈΜͳ࢖ͬͯ

Slide 21

Slide 21 text

୭΋࢖Θͳ͔ͬͨ...

Slide 22

Slide 22 text

WHY

Slide 23

Slide 23 text

⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ු͖۷Γʹͳͬͨ՝୊ • σβΠφʹ͸ CSS ϓϦϓϩηοα΋ϏϧυύΠϓ ϥΠϯ΋ະ஌ͱͷૺ۰ • ΤϯδχΞਞʹϏϧυύΠϓϥΠϯͷ։ൃऀϝϦο τ͕఻Θ͍ͬͯͳ͍ • ͋ΕɺΦϨ͔͠ϝϦοτͳ͍

Slide 24

Slide 24 text

⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ σβΠφʹ͸ CSS ϓϦϓϩηοα΋ϏϧυύΠϓϥΠϯ΋ະ ஌ͱͷૺ۰ ⸻ • Sass ΍ LESS ͷ׆༻ܦݧͷͳ͍؀ڥ • CSS ϓϦϓϩηοαͬͯͳΜ͔ͩྑ͘෼͔Βͳ͍ • BEM ౳ͷ CSS ΞʔΩςΫνϟ΋ศརͦ͏͚ͩͲ… • CSS ॻ͖͍͚ͨͩͳͷʹϏϧυ͕ඞཁ…

Slide 25

Slide 25 text

⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ΤϯδχΞਞʹϏϧυύΠϓϥΠϯͷ։ൃऀϝϦοτ͕఻Θ͍ͬͯͳ͍ ⸻ • ASP ͱάϩʔόϧԚછ JS ࣮૷͔ΒɺϞδϡʔϧੑΛ࣮࣋ͬͨ૷΁ ͷίϯςΩετεΠον͕ਐ·ͳ͍ɻ • ES.Next ͸ษڧத͔ͩΒਖ਼͍͠ॻ͖ํ͕෼͔Βͳ͍ɻ • ΤίγεςϜͷͳ͍ ASP ͔Βɺ͍͖ͳΓύοέʔδ؅ཧ΍ npm ͷ ࿩Λͯ͠΋఻ΘΒͳ͍ɻ • ௿Ϩϕϧͳந৅Խ͔࣋ͨ͠ͳ͍ ASP ίʔυϕʔε͔Β͸ɺந৅౓ ͷߴ͍એݴతͳσʔλόΠϯσΟϯά͸Πϝʔδ͕༙͔ͳ͍ɻ

Slide 26

Slide 26 text

σβΠφʹ΋ΤϯδχΞʹ΋ɺ ·ͬͨ͘։ൃऀϝϦοτ͕఻Θ͍ͬͯͳ͔ͬͨɻ

Slide 27

Slide 27 text

ϏϧυύΠϓϥΠϯͷϦϦʔεલޙʹɺ࠲ֶΤϯ τϦΛࣾ಺Ͱڞ༗͍͕ͯͨ͠ɺৼΓฦΔͱܒ໤׆ ಈͱͯ͠͸ɺ·ͬͨ͘ෆे෼ͩͬͨɻ

Slide 28

Slide 28 text

։ൃऀϝϦοτͷཧղʹ͸ɺ ࣮ફܦݧʹউΔ΋ͷͳ͠!

Slide 29

Slide 29 text

ͦΕͳΒ

Slide 30

Slide 30 text

⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ϏϧυύΠϓϥΠϯʹ࣮૷ΛϩοΫΠϯ • طଘ࣮૷ΛϏϧυύΠϓϥΠϯԼʹҠ২ • ݹ͍ίʔυϕʔεͷ࣮૷Λ͞ΘΔ࣌΋ϏϧυύΠϓ ϥΠϯΛհͯ͠։ൃ͢Δ؀ڥʹͨ͠ɻ • ݹ͍ίʔυϕʔεͷҠ২͸ɺҊ݅ͷ߹ؒΛΈͳ͕Β ྗٕͰ࣮ࢪ

Slide 31

Slide 31 text

Ұٳ.com Ϩετϥϯͷओಈઢ͸ɺ4 ݄ʹ΍ͬͱɺ ϏϧυύΠϓϥΠϯΛհͨ͠։ൃʹҠߦ͠·ͨ͠

Slide 32

Slide 32 text

⸻ ϏϧυύΠϓϥΠϯͷಋೖͱ݁Ռ ϏϧυύΠϓϥΠϯ΁ͷϩοΫΠϯͷ݁Ռ • σβΠφ/ΤϯδχΞਞ͕ɺঃʑʹϞμϯͳςΩετ ΤσΟλ΁Ҡߦ • UI Ҋ݅Ͱ Vue.js ͷ࠾༻͕ਐߦத • ES.Next ͷ async/await ʹΑΔγϯϓϧͳίʔσΟ ϯάɺ࣮૷ͷϞδϡʔϧԽͳͲ͕ɺঃʑʹਐߦத

Slide 33

Slide 33 text

࣮ફΛ௨ͯ͠ɺ ։ൃऀϝϦοτ΁ͷཧղ͕গͣͭ͠ਁಁதɻ

Slide 34

Slide 34 text

Web ϑϩϯτΤϯυͷ ٕज़ελοΫ (After)

Slide 35

Slide 35 text

⸻ 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

Slide 36

Slide 36 text

⸻ Web ϑϩϯτΤϯυͷٕज़ελοΫ (After) ओྲྀςΩετΤσΟλ: • लؙ • Visual Studio Code • Atom

Slide 37

Slide 37 text

Ұٳ.com ϨετϥϯͷϑϩϯτΤϯυ͸ Web Β͘͠ɺ ϓϩάϨογϰʹվળΛଓ͚ͯߦ͖·͢