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
2.9k
フロントエンドのモダン化と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
7.9k
How to control loading state in React
tohashi
2
190
Immutable.js with Flowtype
tohashi
0
7.1k
Other Decks in Programming
See All in Programming
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
320
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
290
Jakarta EE meets AI
ivargrimstad
0
530
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.1k
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
200
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
ヤプリ新卒SREの オンボーディング
masaki12
0
130
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
160
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
Featured
See All Featured
Speed Design
sergeychernyshev
24
610
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Raft: Consensus for Rubyists
vanstee
136
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Done Done
chrislema
181
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Scaling GitHub
holman
458
140k
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ͷશఫഇ • ϏϧυߴԽ
͋Γ͕ͱ͏͍͟͝·ͨ͠