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
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
PicoRuby on Rails
makicamel
2
130
Goで作る、開発・CI環境
sin392
0
230
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Adopting Sorbet at Scale
ufuk
77
9.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Balancing Empowerment & Direction
lara
1
430
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How to Ace a Technical Interview
jacobian
278
23k
It's Worth the Effort
3n
185
28k
Building an army of robots
kneath
306
45k
The Language of Interfaces
destraynor
158
25k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Pragmatic Product Professional
lauravandoore
35
6.7k
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ͷશఫഇ • ϏϧυߴԽ
͋Γ͕ͱ͏͍͟͝·ͨ͠