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
Getting Started with RequireJS
Search
Ayumu Sato
November 16, 2012
Programming
10
4.7k
Getting Started with RequireJS
社内勉強会で利用した資料から、いろいろ調整したりしてうp
Ayumu Sato
November 16, 2012
Tweet
Share
More Decks by Ayumu Sato
See All by Ayumu Sato
なぜ「無責任な横軸」がうまくいかないのか 〜 組織の生産性にインパクトを与える振る舞いを考える
ahomu
17
17k
Web 開発の長距離走と持続可能性 - TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来
ahomu
1
270
控えめな App Router と持続可能な開発 - PWA Night vol.59
ahomu
12
3k
GPT 生成物の評価、運用 toC 企画でのハードルと勘所
ahomu
0
310
副業をきっかけに 切り拓くキャリア形成
ahomu
1
170
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
1.7k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
5
3.8k
#TECHPLAY Talk - 理想的な Web のため MUST 駆動で主語が大きくなったキャリア
ahomu
0
320
最近の Web パフォーマンス改善について知っておきたいコト
ahomu
50
20k
Other Decks in Programming
See All in Programming
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
CSC509 Lecture 03
javiergs
PRO
0
330
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
190
CSC509 Lecture 04
javiergs
PRO
0
300
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
980
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3k
Swift Concurrency - 状態監視の罠
objectiveaudio
2
460
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
CSC509 Lecture 06
javiergs
PRO
0
240
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Fireside Chat
paigeccino
40
3.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Designing Experiences People Love
moore
142
24k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Become a Pro
speakerdeck
PRO
29
5.5k
Speed Design
sergeychernyshev
32
1.1k
The Invisible Side of Design
smashingmag
301
51k
Raft: Consensus for Rubyists
vanstee
139
7.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Transcript
(FUUJOH4UBSUFE 3FRVJSF+4 ࣾษڧձ 1
!BIPNV IUUQBIPNV 2
1SPCMFNT .PEVMBS+BWB4DSJQU $BTF4UVEZ )BOET0O 3
✓+BWB4DSJQUॻ͍ͯΔͻͱ͚ ✓खΛಈ͔͢ΩοΧέΛͭ͘Ζ͏ ✓࣮ྫ·͑ͯ͡ɺ༰͞͠Ί 4
1SPCMFNT தنҎ্ͷ+BWB4DSJQUΛཧ͢Δ্Ͱͷ 5
6 Bad Context Plugins Libs of choice jQuery Backbone Your
Code source. Dependency Management with RequireJS
7 Good Context Plugins Libs of choice jQuery Backbone Your
Code source. Dependency Management with RequireJS
8 Dependencies Plugins Libs of choice jQuery Backbone Your Code
source. Dependency Management with RequireJS
$PNNPOJTTVFT 9 ΘΕΘΕͷѻ͏ίʔυେͰ͋Δ ݸʑͷίʔυཻΛͦΖ͍͑ͨ ࠶ར༻Ͱ͖ΔΑ͏ʹ͍ͨ͠ ґଘؔΛཧ͍ͨ͠
ͳΜͱ͔͍ͨ͠
.PEVMBS +BWB4DSJQU 10 Ϟδϡϥʔͳ+BWB4DSJQUͰ͋Δ͜ͱͷ͓͞Β͍
&YBNQMFT 11
FH5)&#*(0/& (function() { var Application = { foo: function() {...},
bar: function() {...} }; // long historical stacking code... new Application(); })(); 12 ߦ͑ͨ͋ͨΓͰڰؾ ࡍݶͳ͘ॏ͘ͳΔΤσΟλ
FH/BNFTQBDF 13 // main.js window.NS = {}; // page.js
window.NS.Page = { initialize: function() {}, getContent: function() {}, render : function() {} }; // util.js window.NS.Util = {};
FH/BNFTQBDF // first <script src=”js/main.js”></script> <script src=”js/util.js”></script> <script src=”js/page.js”></script>
14 Αׂ͘͞ΕͯΔΑ͏ʹݟ͑Δ
FH/BNFTQBDF // finally <script src=”js/main.js”></script> <script src=”js/util.js”></script> <script src=”js/module_1.js”></script>
<script src=”js/module_6.js”></script> <script src=”js/module_5.js”></script> <script src=”js/module_2.js”></script> <script src=”js/module_3.js”></script> <script src=”js/module_4.js”></script> <script src=”js/module_7.js”></script> <script src=”js/page.js”></script> 15 ಡΈࠐΈॱͱ͍͏໊ͷґଘੑࠈ ͍ͯ͏͔खॻ͖ϜϦ
3FRVJSF+4 16 ࡴെͱͨ͠ґଘղܾࠈʹࢀ্ ʋcɾ㱼ɾcϊ
AEFpOFA /** * @method define * * @param {String} [id]
* @param {Array} dependencies * @param {Function} factory */ define(id, dependencies, factory); 17
+BWB4DSJQU QBHFKT // page.js (depend moduleA & Util) define(['moduleA', 'util'],
function(moduleA, Util) { function Page($elm) { this.$elm = $elm Util.greatFunction(); } Page.prototype.render = function() { return this.$elm.html(moduleA.getContent()); } return Page; }); 18
+BWB4DSJQU NBJOKT // main.js define(['jquery', 'page'], function($, Page) { //
initialize new Page($('#container')); // some business Page.render(); }); 19
)5.- <!-- Simple! --> <script data-main="main" src="require.js"> </script> 20 ղܾ͞Εͨʂ
<!-- Same code --> <script src="require.js"></script> <script> require(['main'], function(Main) { }); </script>
IUUQSFRVJSFKTPSHEPDTXIZBNEIUNM
".% "TZODISPOPVT.PEVMF%FpOJUJPO ґଘఆٛͷղܾXJUIඇಉظϩʔμʔ )5.-γϯϓϧʹఆٛͯ͠ࡁ·͢ 1$ڥ͚ͳΒɺ".%ͷ··Ͱྑͦ͞͏ 22
(JWFOCFOFpUT 3FRVJSF+4ඇৗʹݡ͍ ґଘղܾ͕γϯϓϧʹͳΔ EFpOFΛར༻ͨ͠ύλʔϯ͕ڧ੍͞ΕΔ ίʔσΟϯάύλʔϯͷ౷੍͕औΓ͍͢
ϞδϡϥʔͰ͋Δ͜ͱΛҙࣝ͘͢͠ͳΔ 23
$BTF4UVEZ 24 ։ൃதϓϩδΣΫτతͳࣄྫհ
6TJOHMJCSBSJFT 25 3FRVJSF+4 #BDLCPOFKT MPEBTI ;FQUP
+BTNJOF 4JOPO $PGGFF 5FTUFN
5PVS #BDLCPOFࠈʢϑΝΠϧ͘Β͍ʣ +BTNJOFͷ͋ͨΓ (SVOUͰ͔ͨΊͯΔͱ͜Ζ %FWFM
#VJME 26
5)&#*(0/&"("*/ 1SPEVDUJPOͰϑΝΠϧʹ͍ͨ͠ΑͶ )551ϦΫΤετ͕গͳ͍ͷྑ͍͜ͱͩ AHSVOUSFRVJSFKTAͰɺͻͱ·ͱΊʹग़ྗ ͍ͭͰʹ6HMJGZ+4ͰPQUJNJ[F 27
%J⒎FSFODFGSPNDPODBU খʙதنͰ͋ΕDPODBUͰྑ͍͔ͳɺͱ γϯϓϧͩ͠ ͕ɺDPODBUґଘੑΛࣔͤͳ͍ ͕ɺDPODBU࠶ར༻ੑΛαϙʔτ͠ͳ͍
ͳͥͳΒɺԿͷύλʔϯఏࣔ͠ͳ͍͔Β 28
4FFNTMJLFHPPE 29 ґଘΛҙࣝ͢Δྑ͍श׳ ݟ௨͠ྑ͘ͳΔ
%FFQEFQFOEFODJFT 30 ͕ɺᥨͷΛݟͯෆ҆ʹͳΔ
$BMMTUBDL)FMM 31
6NN 32 ·͋ɺؾʹ͠ͳ͍͜ͱʹͨ͠ ;FQUP6OEFSTDPSF MPEBTI ͷΑ͏ʹ HMPCBMʹFYQPSU͢ΔౕΒαϘͬͨ
ςετपΓ͏ͪΐ͍ɺͲ͏ʹ͔͍ͨ͠
)BOET0O ϒϥβ".%ˍSKT0QUJNJ[F 33
"HFOEB ϒϥβ্Ͱ͍ΘΏΔ".% SFRVJSFKTDPOpH͢Δ SKTͰPQUJNJ[F BMNPOEʹࠩ͠ସ͑ͯ
HSVOUSFRVJSFKTͯ͠ΈΔʢ͍͚Δ͔ʁʣ 34
%PDVNFOUT IUUQSFRVJSFKTPSHEPDTTUBSUIUNM IUUQSFRVJSFKTPSHEPDTFSSPSTIUNM IUUQTHJUIVCDPNKSCVSLFSKTCMPC NBTUFSCVJMEFYBNQMFCVJMEKT IUUQTHJUIVCDPNKSCVSLFBMNPOE
35
5SZ".%4UFQT KTNBJOKTͷதͰɺEFpOFͯ͠ΈΔ EBUBNBJOͰಡΜͰΈΔ KTTVCKTEFpOFͯ͠ΈΔ KTNBJOKTΛKTTVCKTʹґଘͤ͞Δ 36
$POpHVSBUJPO4UFQT SFRVJSFKTDPOpH ͰCBTF6SM͢Δ KTMJC KTΛQBUIT͢Δ TIJN͢Δ 37
*OTUBMMSKT # άϩʔόϧʹΠϯετʔϧ % npm install -g requirejs # ύε͕௨͍ͬͯΕɺr.js͕ར༻ՄೳʹͳΔ
% r.js See https://github.com/jrburke/r.js for usage 38
6TJOHSKT % r.js -o out=js/all.js\ baseUrl=js\ name=bootstrap\ mainConfigFile=js/bootstrap.js # mainConfigFileʹؚ·ΕΔbaseUrlɺ
# ࢦఆϑΝΠϧ͔Βͷ૬ରʹͳͬͯ͠·͏ͷͰɺ # ΦϓγϣϯͰࢦఆ͢Δ΄͏͕Α͍ 39
"MNPOE % r.js -o out=js/all.js\ baseUrl=js\ name=lib/almond\ include=bootstrap\ mainConfigFile=js/bootstrap.js #
ඇಉظϩʔυॲཧͳͲɺෆཁͳػೳΛআ͍ͨshim # 1ϑΝΠϧʹ·ͱΊΔ͜ͱ # ґଘϞδϡʔϧ໊Λಈతʹࢦఆ͠ͳ͍͜ͱ 40
HSVOUSFRVJSFKT % npm install -g grunt % npm link %
grunt requirejs 41
define(['backbone'], function(Backbone) { return Backbone.Model.extend({ url: 'path/to', defaults: { foo:
'bar' }, validation: { // ... } }); // ऄ newͨ͠ͷΛreturn͢ΔͱsingletonΆ͍ }); 42 "QQFOEJYXJUI#BDLCPOF
"QQFOEJYXJUI+BTNJOF // SpecRunner.html require(['spec/util', 'spec/main'], function() { var env =
jasmine.getEnv(); env.addReporter(new jasmine.HtmlReporter); env.execute(); }); // spec.coffee define ['util'], (Util)-> describe 'Commmon Utilities', -> util = null beforeEach -> util = new Util it 'Should `plzTruthy` returns true', -> expect(Util.plzTruthy()).toBe true 43
"QQFOEJY&YJTUJOH.PEVMF // ͨͱ͑ Zepto ($) // `define`͕ఆٛ͞Ε͍ͯͯɺAMDΆ͔ͬͨΒ... if (typeof define
=== 'function' && define.amd) { define([], function() { return Zepto; }); } 44
"QQFOEJY$PNNPO+44VHBS define(function(require) { var hoge = require('hoge'), fuga = require('fuga'),
piyo = require('piyo'); return { hogehoge: hoge.toString(), fugafuga: fuga.toString(), piyopiyo: piyo.toString() } }); 45
"QQFOEJYNBEHF # https://github.com/pahen/node-madge % npm install -g madge % brew
install graphviz # ϞδϡʔϧͷґଘؔΛՄࢹԽ % madge --image out.png --format amd ./app 46
$PODMVTJPO 3FRVJSF+4ϥΠϒϥϦͰ͋Γͭͭɹɹɹɹ ґଘղܾ͢ΔͨΊͷϞμϯύλʔϯͦͷͷ ͨॻ͖ͷ+4͔Βɺૄ݁߹ͳ+4ʹ ूஂ։ൃظϦϑΝΫλϦϯάΛݟӽͯ͠ ಋೖ͢Δͱɺ͞ΒʹՁ͕͋Δͣ
ͥͻݱͰల։͍͚ͯͨͩ͠Δͱ͍ 47
͓ΘΓ 48 ͋Γ͕ͱ͏͍͟͝·ͨ͠
1BSJT+43FRVJSF+4 TMJEF .PEVMBS+BWB4DSJQUXJUI".%BOE3FRVJSF+4 3FRVJSF+4 1IPOF(BQ (FUUJOH4UBSUFE.BOBHJOH$MJFOU4JEF4DSJQUTXJUI3FRVJSFKT
m*"N/PU.ZTFMG /BNFTQBDFTBSF0ME4DIPPM]#MPH].JMMFS.FEFJSPT ".%JT/PUUIF"OTXFS5PN%BMF +BWB4DSJQUNPEVMFMPBEFSTOFDFTTBSZFWJM ]3VCFO 7FSCPSHI KBQI S CZ$ISJT4USPN1SFUUZ#BDLCPOFKT7JFXTXJUI 3FRVJSFKT 49