Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

4d0bec5f32c219c0f5d4280a2a4b250a?s=128

Takumi Ohashi

June 10, 2016
Tweet

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠