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

by Takumi Ohashi

Slide 1

Slide 1 text

ϑϩϯτΤϯυͷϞμϯԽͱ JavaScriptϞδϡʔϧͷ  ґଘղܾ @_tohashi

Slide 2

Slide 2 text

࿩͢ਓ • Takumi Ohashi • twitter: @_tohashi • GitHub: @tohashi • 2014/12~ freee

Slide 3

Slide 3 text

ձܭfreee • Ϋϥ΢υձܭιϑτ • 2013/03/19~ • ৽ػೳ௥Ճ΍վળΛଓ͚͍ͯ·͢

Slide 4

Slide 4 text

ձܭfreeeͷ  ϑϩϯτΤϯυελοΫ

Slide 5

Slide 5 text

Past (~Mid 2015) • CoffeeScript • Backbone.js • eco • Bower • Sprockets

Slide 6

Slide 6 text

Now • JavaScript(ES2015) w/Babel • React.js • npm • gulp.js • Webpack

Slide 7

Slide 7 text

͜͜ʹࢸΔ·Ͱͷ ௕͍ಓͷΓ

Slide 8

Slide 8 text

JS෼ׂ͓͡͞Μͷ஀ੜ

Slide 9

Slide 9 text

͋Δ೔ͷQiita:Team

Slide 10

Slide 10 text

͋Δ೔ͷQiita:Team

Slide 11

Slide 11 text

౰࣌ͷJavaScript • શͯͷjs͕1ϑΝΠϧʹ(໿7MB) • class͸શͯҰͭͷglobalม਺ʹ֨ೲ • Ϟδϡʔϧؒͷґଘؔ܎͕ෆ໌ྎ -> ϝϯςφϏϦ ςΟͷ௿Լ • ৽͍͠ϥΠϒϥϦ΍ϑϨʔϜϫʔΫͷಋೖίετ͕ ߴ͍

Slide 12

Slide 12 text

JSϑΝΠϧΛద੾ͳ୯Ґʹ෼͚Δ • جຊ͸controllerͱ1:1 • ͦͷը໘Ͱ࢖͏Ϟδϡʔϧ͚ͩΛಡΈࠐΉ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ͭΒ͍

Slide 15

Slide 15 text

Sprockets͚ͩͰ͸ݶք͕͋Δ • concat͢Δ͚ͩ • ಡΈࠐΈॱؒҧ͑Δͱࢮ • Ϟδϡʔϧͷ࿙Ε͕࣮ߦ࣌·ͰΘ͔Βͳ͔ͬͨΓ • ϑϩϯτΤϯυܥͷgem͸࢖͍ͮΒ͍ɺnpmͰ ؅ཧ͍ͨ͠

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

ࡴെͱͨ͠ϓϩμΫτʹgulp.js͕ʂʂ ʊਓਓਓਓʊ ʼɹmakeɹʻ ʉY^Y^Yʉ Brunch

Slide 18

Slide 18 text

ࡴെͱͨ͠ϓϩμΫτʹgulp.js͕ʂʂ

Slide 19

Slide 19 text

ͱWebpack

Slide 20

Slide 20 text

gulp.js & Webpackͷಋೖ • CoffeeScript, Sass, JSςϯϓϨʔτͷϏϧυΛ ׬શʹҠߦ • npm scriptͰ·ͱΊ࣮ͯߦɺ։ൃத͸watchλ εΫ • npmपΓͷΤίγεςϜ͕ར༻Մೳʹ

Slide 21

Slide 21 text

JavaScript(ES2015)΁ͷҠߦ • ਖ਼ࣜʹࡦఆ͞Ε؀ڥ͕ॆ࣮͖ͯͨ͜͠ͱ΍ɺ CoffeeScriptΛ࢖͍ଓ͚ΔϦεΫͳͲߟྀ • BabelΛ࢖༻ͯ͠τϥϯεύΠϧ • eslintʹΑΔsyntaxͷ౷Ұ

Slide 22

Slide 22 text

JS෼ׂ͓͡͞Μ࠶ͼ

Slide 23

Slide 23 text

JSϑΝΠϧ෼ׂv2 • ෼ׂ͚ͩͰ͸ͳ͘ɺϞδϡʔϧؒͷґଘؔ܎ Λղܾͯ͠WebpackͰϏϧυ͢Δ $ = require('jquery') _ = require('underscore') Backbone = require('backbone') FooModel = require('models/foo') FooView = require('views/foo')

Slide 24

Slide 24 text

͋ͱ͸ίʔυॻ͍ͯ αΫοͱ෼ׂ͢Δ͚ͩ

Slide 25

Slide 25 text

$ find ./front/javascripts -name '*.coffee' | wc -l > 870

Slide 26

Slide 26 text

(ʌůŋωŋ`)ŷžŷž

Slide 27

Slide 27 text

ҠߦظΛઃ͚Δ • ஈ֊తʹґଘղܾ&෼ׂΛਐΊΔ • ͦͷؒ͸2λΠϓͷJSΤϯτϦʔϙΠϯτ͕ࠞࡏ • WebpackͰϏϧυ͞ΕΔϑΝΠϧ • Sprocketsͷassets pipelineͰconcat͞ΕΔϑΝΠϧ • ྆ํ͔Βࢀর͞ΕΔϞδϡʔϧ͕ଘࡏ͢Δ

Slide 28

Slide 28 text

Webpack & Sprockets྆ରԠ class views.Foo.BarView extends views.Foo.BazView initialize: -> #…

Slide 29

Slide 29 text

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: -> #…

Slide 30

Slide 30 text

Slide 31

Slide 31 text

஍൫͸ݻ·ͬͨ • ৽ن։ൃ΍େن໛վम͸ES2015 + React.js • طଘͷϞδϡʔϧ(CoffeeScript)͸ॱ࣍ґଘղ ܾ&෼ׂ͍ͯ͘͠ • ͦͷޙES2015ʹஔ׵

Slide 32

Slide 32 text

࣌͸ྲྀΕ…

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

ϑϩϯτΤϯυͷมԽ͕  ϓϩμΫτʹ΋ͨΒ͢Ձ஋ • υϝΠϯࣗମ͕ෳࡶ • ݩʑ͸σεΫτοϓΞϓϦέʔγϣϯͷੈք • ׬શͳSPAͰ͸ͳ͍͕ɺSPAతͳڍಈ͕ٻΊΒ ΕΔ • UIΛߟ͑Δ্Ͱͷ੍໿͸গͳ͘ॊೈͰ͋Δ΂͖

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

͋Γ͕ͱ͏͍͟͝·ͨ͠