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
Web 開発の長距離走と持続可能性 - TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来
ahomu
1
200
控えめな App Router と持続可能な開発 - PWA Night vol.59
ahomu
11
2.9k
GPT 生成物の評価、運用 toC 企画でのハードルと勘所
ahomu
0
290
副業をきっかけに 切り拓くキャリア形成
ahomu
1
140
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
1.7k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
4
3.7k
#TECHPLAY Talk - 理想的な Web のため MUST 駆動で主語が大きくなったキャリア
ahomu
0
280
最近の Web パフォーマンス改善について知っておきたいコト
ahomu
50
20k
Web フロントエンドで大切なことはすべて Audits が教えてくれた
ahomu
1
620
Other Decks in Programming
See All in Programming
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
130
鯛変だったRubyKaigi 2025 ── それでも楽しかった!
pndcat
0
130
抽象データ型について学んだ
ryounasso
0
200
iOSアプリ開発もLLMで自動運転する
hiragram
6
2k
ts-morph実践:型を利用するcodemodのテクニック
ypresto
1
510
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
580
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
620
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
seike460
PRO
2
700
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
470
Parallel::Pipesの紹介
skaji
2
790
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
oyamakei
0
580
テスト分析入門/Test Analysis Tutorial
goyoki
10
2.6k
Featured
See All Featured
KATA
mclloyd
29
14k
For a Future-Friendly Web
brad_frost
178
9.7k
How GitHub (no longer) Works
holman
314
140k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Music & Morning Musume
bryan
47
6.5k
Automating Front-end Workflow
addyosmani
1370
200k
Typedesign – Prime Four
hannesfritz
41
2.6k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
It's Worth the Effort
3n
184
28k
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