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
180
控えめな App Router と持続可能な開発 - PWA Night vol.59
ahomu
11
2.8k
GPT 生成物の評価、運用 toC 企画でのハードルと勘所
ahomu
0
270
副業をきっかけに 切り拓くキャリア形成
ahomu
1
130
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
1.7k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
4
3.6k
#TECHPLAY Talk - 理想的な Web のため MUST 駆動で主語が大きくなったキャリア
ahomu
0
250
最近の Web パフォーマンス改善について知っておきたいコト
ahomu
50
20k
Web フロントエンドで大切なことはすべて Audits が教えてくれた
ahomu
1
600
Other Decks in Programming
See All in Programming
CI改善もDatadogとともに
taumu
0
180
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
380
Rails アプリ地図考 Flush Cut
makicamel
1
130
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
890
技術を改善し続ける
gumioji
0
100
SwiftUI Viewの責務分離
elmetal
PRO
2
260
DROBEの生成AI活用事例 with AWS
ippey
0
140
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
120
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
190
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
ソフトウェアエンジニアの成長
masuda220
PRO
12
2k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Code Review Best Practice
trishagee
67
18k
Bash Introduction
62gerente
611
210k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
What's in a price? How to price your products and services
michaelherold
244
12k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Building Your Own Lightsaber
phodgson
104
6.2k
Designing for Performance
lara
604
68k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
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