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.6k
Getting Started with RequireJS
社内勉強会で利用した資料から、いろいろ調整したりしてうp
Ayumu Sato
November 16, 2012
Tweet
Share
More Decks by Ayumu Sato
See All by Ayumu Sato
なぜ「無責任な横軸」がうまくいかないのか 〜 組織の生産性にインパクトを与える振る舞いを考える
ahomu
11
11k
Web 開発の長距離走と持続可能性 - TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来
ahomu
1
210
控えめな App Router と持続可能な開発 - PWA Night vol.59
ahomu
11
3k
GPT 生成物の評価、運用 toC 企画でのハードルと勘所
ahomu
0
300
副業をきっかけに 切り拓くキャリア形成
ahomu
1
170
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
1.7k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
5
3.7k
#TECHPLAY Talk - 理想的な Web のため MUST 駆動で主語が大きくなったキャリア
ahomu
0
290
最近の Web パフォーマンス改善について知っておきたいコト
ahomu
50
20k
Other Decks in Programming
See All in Programming
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
技術同人誌をMCP Serverにしてみた
74th
1
640
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
13
3.5k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
29k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
XP, Testing and ninja testing
m_seki
3
240
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
How GitHub (no longer) Works
holman
314
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Invisible Side of Design
smashingmag
301
51k
Being A Developer After 40
akosma
90
590k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
BBQ
matthewcrist
89
9.7k
Into the Great Unknown - MozCon
thekraken
40
1.9k
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