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

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Ͱ ؅ཧ͍ͨ͠

16. None

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. ࣌͸ྲྀΕ…

33. None

34. શϞδϡʔϧͷґଘղܾͱ
 ϑΝΠϧ෼ׂ͕׬ྃʂ

35. ݱࡏ • ϞδϡʔϧͷґଘղܾͱϑΝΠϧ෼ׂ͸׬ྃ • CoffeeScript͸·ͩ࢒͍ͬͯΔ • decafͳͲΛ࢖༻ͯ͠ஞҰஔ׵த • ϑϩϯτΤϯυͷςετ΋ಋೖࡁΈ

36. ϑϩϯτΤϯυͷมԽ͕
 ϓϩμΫτʹ΋ͨΒ͢Ձ஋ • υϝΠϯࣗମ͕ෳࡶ • ݩʑ͸σεΫτοϓΞϓϦέʔγϣϯͷੈք • ׬શͳSPAͰ͸ͳ͍͕ɺSPAతͳڍಈ͕ٻΊΒ ΕΔ •

    UIΛߟ͑Δ্Ͱͷ੍໿͸গͳ͘ॊೈͰ͋Δ΂͖

37. ల๬ • JavaScript(ES2015΁ͷ׬શҠߦ • ςετέʔεͷॆ࣮ • Sprocketsͷ׬શఫഇ • Ϗϧυߴ଎Խ

38. ͋Γ͕ͱ͏͍͟͝·ͨ͠