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
3k
フロントエンドのモダン化と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.2k
How to control loading state in React
tohashi
2
200
Immutable.js with Flowtype
tohashi
0
7.2k
Other Decks in Programming
See All in Programming
Discover Metal 4
rei315
2
130
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
890
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Rails Girls Zürich Keynote
gr2m
95
14k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Writing Fast Ruby
sferik
628
62k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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ͷશఫഇ • ϏϧυߴԽ
͋Γ͕ͱ͏͍͟͝·ͨ͠