フロントエンドのモダン化とJavaScriptモジュールの 依存解決

Modern Web App LT!（freee x WACUL）で発表した資料です
http://connpass.com/event/31305/

Transcript

1. ϑϩϯτΤϯυͷϞμϯԽͱ JavaScriptϞδϡʔϧͷ
 ґଘղܾ @_tohashi
2. ࿩͢ਓ • Takumi Ohashi • twitter: @_tohashi • GitHub: @tohashi • 2014/12~ freee
3. ձܭfreee • Ϋϥ΢υձܭιϑτ • 2013/03/19~ • ৽ػೳ௥Ճ΍վળΛଓ͚͍ͯ·͢
4. ձܭfreeeͷ
 ϑϩϯτΤϯυελοΫ
5. Past (~Mid 2015) • CoffeeScript • Backbone.js • eco • Bower • Sprockets
6. Now • JavaScript(ES2015) w/Babel • React.js • npm • gulp.js • Webpack
7. ͜͜ʹࢸΔ·Ͱͷ ௕͍ಓͷΓ
8. JS෼ׂ͓͡͞Μͷ஀ੜ
9. ͋Δ೔ͷQiita:Team
10. ͋Δ೔ͷQiita:Team
11. ౰࣌ͷJavaScript • શͯͷjs͕1ϑΝΠϧʹ(໿7MB) • class͸શͯҰͭͷglobalม਺ʹ֨ೲ • Ϟδϡʔϧؒͷґଘؔ܎͕ෆ໌ྎ -> ϝϯςφϏϦ ςΟͷ௿Լ • ৽͍͠ϥΠϒϥϦ΍ϑϨʔϜϫʔΫͷಋೖίετ͕ ߴ͍
12. JSϑΝΠϧΛద੾ͳ୯Ґʹ෼͚Δ • جຊ͸controllerͱ1:1 • ͦͷը໘Ͱ࢖͏Ϟδϡʔϧ͚ͩΛಡΈࠐΉ
13. SprocketsͷrequireͰղܾʁ //= require jquery //= require jquery_ujs //= require underscore/underscore //= require backbone/backbone //= require models/foo //= require collections/foo //= require views/foo //= require views/bar //= require views/baz
14. ͭΒ͍
15. Sprockets͚ͩͰ͸ݶք͕͋Δ • concat͢Δ͚ͩ • ಡΈࠐΈॱؒҧ͑Δͱࢮ • Ϟδϡʔϧͷ࿙Ε͕࣮ߦ࣌·ͰΘ͔Βͳ͔ͬͨΓ • ϑϩϯτΤϯυܥͷgem͸࢖͍ͮΒ͍ɺnpmͰ ؅ཧ͍ͨ͠
17. ࡴെͱͨ͠ϓϩμΫτʹgulp.js͕ʂʂ ʊਓਓਓਓʊ ʼɹmakeɹʻ ʉY^Y^Yʉ Brunch
18. ࡴെͱͨ͠ϓϩμΫτʹgulp.js͕ʂʂ
19. ͱWebpack
20. gulp.js & Webpackͷಋೖ • CoffeeScript, Sass, JSςϯϓϨʔτͷϏϧυΛ ׬શʹҠߦ • npm scriptͰ·ͱΊ࣮ͯߦɺ։ൃத͸watchλ εΫ • npmपΓͷΤίγεςϜ͕ར༻Մೳʹ
21. JavaScript(ES2015)΁ͷҠߦ • ਖ਼ࣜʹࡦఆ͞Ε؀ڥ͕ॆ࣮͖ͯͨ͜͠ͱ΍ɺ CoffeeScriptΛ࢖͍ଓ͚ΔϦεΫͳͲߟྀ • BabelΛ࢖༻ͯ͠τϥϯεύΠϧ • eslintʹΑΔsyntaxͷ౷Ұ
22. JS෼ׂ͓͡͞Μ࠶ͼ
23. JSϑΝΠϧ෼ׂv2 • ෼ׂ͚ͩͰ͸ͳ͘ɺϞδϡʔϧؒͷґଘؔ܎ Λղܾͯ͠WebpackͰϏϧυ͢Δ $ = require('jquery') _ = require('underscore') Backbone = require('backbone') FooModel = require('models/foo') FooView = require('views/foo')
24. ͋ͱ͸ίʔυॻ͍ͯ αΫοͱ෼ׂ͢Δ͚ͩ
25. $ find ./front/javascripts -name '*.coffee' | wc -l > 870
26. (ʌůŋωŋ`)ŷžŷž
27. ҠߦظΛઃ͚Δ • ஈ֊తʹґଘղܾ&෼ׂΛਐΊΔ • ͦͷؒ͸2λΠϓͷJSΤϯτϦʔϙΠϯτ͕ࠞࡏ • WebpackͰϏϧυ͞ΕΔϑΝΠϧ • Sprocketsͷassets pipelineͰconcat͞ΕΔϑΝΠϧ • ྆ํ͔Βࢀর͞ΕΔϞδϡʔϧ͕ଘࡏ͢Δ
28. Webpack & Sprockets྆ରԠ class views.Foo.BarView extends views.Foo.BazView initialize: -> #…
29. Webpack & Sprockets྆ରԠ require = -> unless require module = {} unless module views = Foo: BazView: require('views/foo/baz') if window.views views = window.views module.exports = class views.Foo.BarView extends views.Foo.BazView initialize: -> #…
30. Webpack & Sprockets྆ରԠ require = -> unless require module = {} unless module views = Foo: BazView: require('views/foo/baz') if window.views views = window.views module.exports = class views.Foo.BarView extends views.Foo.BazView initialize: -> #… module, require͸Կ΋͠ͳ͍ requireͰґଘ͢ΔϞδϡʔϧΛಡΈࠐΉ globalม਺Ͱ্ॻ͖
31. ஍൫͸ݻ·ͬͨ • ৽ن։ൃ΍େن໛վम͸ES2015 + React.js • طଘͷϞδϡʔϧ(CoffeeScript)͸ॱ࣍ґଘղ ܾ&෼ׂ͍ͯ͘͠ • ͦͷޙES2015ʹஔ׵
32. ࣌͸ྲྀΕ…
34. શϞδϡʔϧͷґଘղܾͱ
 ϑΝΠϧ෼ׂ͕׬ྃʂ
35. ݱࡏ • ϞδϡʔϧͷґଘղܾͱϑΝΠϧ෼ׂ͸׬ྃ • CoffeeScript͸·ͩ࢒͍ͬͯΔ • decafͳͲΛ࢖༻ͯ͠ஞҰஔ׵த • ϑϩϯτΤϯυͷςετ΋ಋೖࡁΈ
36. ϑϩϯτΤϯυͷมԽ͕
 ϓϩμΫτʹ΋ͨΒ͢Ձ஋ • υϝΠϯࣗମ͕ෳࡶ • ݩʑ͸σεΫτοϓΞϓϦέʔγϣϯͷੈք • ׬શͳSPAͰ͸ͳ͍͕ɺSPAతͳڍಈ͕ٻΊΒ ΕΔ • UIΛߟ͑Δ্Ͱͷ੍໿͸গͳ͘ॊೈͰ͋Δ΂͖
37. ల๬ • JavaScript(ES2015΁ͷ׬શҠߦ • ςετέʔεͷॆ࣮ • Sprocketsͷ׬શఫഇ • Ϗϧυߴ଎Խ
38. ͋Γ͕ͱ͏͍͟͝·ͨ͠