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
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
120
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
410
JVM の仕組みを理解して PHP で実装してみよう
m3m0r7
PRO
1
240
PT AI без купюр
v0lka
0
160
事業KPIを基に価値の解像度を上げる
nealle
0
190
漸進。
ssssota
0
110
人には人それぞれのサービス層がある
shimabox
3
410
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
160
CursorとDevinが仲間!?AI駆動で新規プロダクト開発に挑んだ3ヶ月を振り返る / A Story of New Product Development with Cursor and Devin
rkaga
5
1.9k
Design Pressure
hynek
0
1.4k
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
580
TypeScriptのmoduleオプションを改めて整理する
bicstone
4
400
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
52
7.6k
GraphQLとの向き合い方2022年版
quramy
46
14k
Documentation Writing (for coders)
carmenintech
71
4.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Bash Introduction
62gerente
613
210k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How STYLIGHT went responsive
nonsquared
100
5.6k
Music & Morning Musume
bryan
47
6.5k
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ͷશఫഇ • ϏϧυߴԽ
͋Γ͕ͱ͏͍͟͝·ͨ͠