Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドのモダン化とJavaScriptモジュールの 依存解決
Search
Takumi Ohashi
June 10, 2016
Programming
8
3.1k
フロントエンドのモダン化とJavaScriptモジュールの 依存解決
Modern Web App LT!(freee x WACUL)で発表した資料です
http://connpass.com/event/31305/
Takumi Ohashi
June 10, 2016
Tweet
Share
More Decks by Takumi Ohashi
See All by Takumi Ohashi
freee Tech Night #2 会計freee 7年目のフロントエンド開発
tohashi
1
8.5k
How to control loading state in React
tohashi
2
210
Immutable.js with Flowtype
tohashi
0
7.3k
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
120
品質ワークショップをやってみた
nealle
0
590
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
CSC305 Lecture 10
javiergs
PRO
0
220
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
240
Pythonに漸進的に型をつける
nealle
1
100
iOSでSVG画像を扱う
kishikawakatsumi
0
150
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
400
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
AkarengaLT vol.38
hashimoto_kei
1
110
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
7
560
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Side Projects
sachag
455
43k
Statistics for Hackers
jakevdp
799
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
GitHub's CSS Performance
jonrohan
1032
470k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Transcript
ϑϩϯτΤϯυͷϞμϯԽͱ JavaScriptϞδϡʔϧͷ ґଘղܾ @_tohashi
͢ਓ • Takumi Ohashi • twitter: @_tohashi • GitHub: @tohashi
• 2014/12~ freee
ձܭfreee • Ϋϥυձܭιϑτ • 2013/03/19~ • ৽ػೳՃվળΛଓ͚͍ͯ·͢
ձܭfreeeͷ ϑϩϯτΤϯυελοΫ
Past (~Mid 2015) • CoffeeScript • Backbone.js • eco •
Bower • Sprockets
Now • JavaScript(ES2015) w/Babel • React.js • npm • gulp.js
• Webpack
͜͜ʹࢸΔ·Ͱͷ ͍ಓͷΓ
JSׂ͓͡͞Μͷੜ
͋ΔͷQiita:Team
͋ΔͷQiita:Team
࣌ͷJavaScript • શͯͷjs͕1ϑΝΠϧʹ(7MB) • classશͯҰͭͷglobalมʹ֨ೲ • Ϟδϡʔϧؒͷґଘ͕ؔෆ໌ྎ -> ϝϯςφϏϦ ςΟͷԼ
• ৽͍͠ϥΠϒϥϦϑϨʔϜϫʔΫͷಋೖίετ͕ ߴ͍
JSϑΝΠϧΛదͳ୯Ґʹ͚Δ • جຊcontrollerͱ1:1 • ͦͷը໘Ͱ͏Ϟδϡʔϧ͚ͩΛಡΈࠐΉ
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
ͭΒ͍
Sprockets͚ͩͰݶք͕͋Δ • concat͢Δ͚ͩ • ಡΈࠐΈॱؒҧ͑Δͱࢮ • Ϟδϡʔϧͷ࿙Ε͕࣮ߦ࣌·ͰΘ͔Βͳ͔ͬͨΓ • ϑϩϯτΤϯυܥͷgem͍ͮΒ͍ɺnpmͰ ཧ͍ͨ͠
None
ࡴെͱͨ͠ϓϩμΫτʹgulp.js͕ʂʂ ʊਓਓਓਓʊ ʼɹmakeɹʻ ʉY^Y^Yʉ Brunch
ࡴെͱͨ͠ϓϩμΫτʹgulp.js͕ʂʂ
ͱWebpack
gulp.js & Webpackͷಋೖ • CoffeeScript, Sass, JSςϯϓϨʔτͷϏϧυΛ શʹҠߦ • npm
scriptͰ·ͱΊ࣮ͯߦɺ։ൃதwatchλ εΫ • npmपΓͷΤίγεςϜ͕ར༻Մೳʹ
JavaScript(ES2015)ͷҠߦ • ਖ਼ࣜʹࡦఆ͞Εڥ͕ॆ࣮͖ͯͨ͜͠ͱɺ CoffeeScriptΛ͍ଓ͚ΔϦεΫͳͲߟྀ • BabelΛ༻ͯ͠τϥϯεύΠϧ • eslintʹΑΔsyntaxͷ౷Ұ
JSׂ͓͡͞Μ࠶ͼ
JSϑΝΠϧׂv2 • ׂ͚ͩͰͳ͘ɺϞδϡʔϧؒͷґଘؔ Λղܾͯ͠WebpackͰϏϧυ͢Δ $ = require('jquery') _ = require('underscore')
Backbone = require('backbone') FooModel = require('models/foo') FooView = require('views/foo')
͋ͱίʔυॻ͍ͯ αΫοͱׂ͢Δ͚ͩ
$ find ./front/javascripts -name '*.coffee' | wc -l > 870
(ʌůŋωŋ`)ŷžŷž
ҠߦظΛઃ͚Δ • ஈ֊తʹґଘղܾ&ׂΛਐΊΔ • ͦͷؒ2λΠϓͷJSΤϯτϦʔϙΠϯτ͕ࠞࡏ • WebpackͰϏϧυ͞ΕΔϑΝΠϧ • Sprocketsͷassets pipelineͰconcat͞ΕΔϑΝΠϧ
• ྆ํ͔Βࢀর͞ΕΔϞδϡʔϧ͕ଘࡏ͢Δ
Webpack & Sprockets྆ରԠ class views.Foo.BarView extends views.Foo.BazView initialize: -> #…
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: -> #…
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มͰ্ॻ͖
൫ݻ·ͬͨ • ৽ن։ൃେنվमES2015 + React.js • طଘͷϞδϡʔϧ(CoffeeScript)ॱ࣍ґଘղ ܾ&ׂ͍ͯ͘͠ • ͦͷޙES2015ʹஔ
࣌ྲྀΕ…
None
શϞδϡʔϧͷґଘղܾͱ ϑΝΠϧׂ͕ྃʂ
ݱࡏ • ϞδϡʔϧͷґଘղܾͱϑΝΠϧׂྃ • CoffeeScript·͍ͩͬͯΔ • decafͳͲΛ༻ͯ͠ஞҰஔத • ϑϩϯτΤϯυͷςετಋೖࡁΈ
ϑϩϯτΤϯυͷมԽ͕ ϓϩμΫτʹͨΒ͢Ձ • υϝΠϯࣗମ͕ෳࡶ • ݩʑσεΫτοϓΞϓϦέʔγϣϯͷੈք • શͳSPAͰͳ͍͕ɺSPAతͳڍಈ͕ٻΊΒ ΕΔ •
UIΛߟ͑Δ্Ͱͷ੍গͳ͘ॊೈͰ͋Δ͖
ల • JavaScript(ES2015ͷશҠߦ • ςετέʔεͷॆ࣮ • Sprocketsͷશఫഇ • ϏϧυߴԽ
͋Γ͕ͱ͏͍͟͝·ͨ͠