Getting Started with RequireJS

Slide 1

Slide 1 text

(FUUJOH4UBSUFE 3FRVJSF+4 ࣾ಺ษڧձ 1

Slide 2

Slide 2 text

!BIPNV IUUQBIPNV 2

Slide 3

Slide 3 text

1SPCMFNT .PEVMBS+BWB4DSJQU $BTF4UVEZ )BOET0O 3

Slide 4

Slide 4 text

✓+BWB4DSJQUॻ͍ͯΔͻͱ޲͚ ✓खΛಈ͔͢ΩοΧέΛͭ͘Ζ͏ ✓࣮ྫ·͑ͯ͡ɺ಺༰΍͞͠Ί 4

Slide 5

Slide 5 text

1SPCMFNT தن໛Ҏ্ͷ+BWB4DSJQUΛ؅ཧ͢Δ্Ͱͷ໰୊ 5

Slide 6

Slide 6 text

6 Bad Context Plugins Libs of choice jQuery Backbone Your Code source. Dependency Management with RequireJS

Slide 7

Slide 7 text

7 Good Context Plugins Libs of choice jQuery Backbone Your Code source. Dependency Management with RequireJS

Slide 8

Slide 8 text

8 Dependencies Plugins Libs of choice jQuery Backbone Your Code source. Dependency Management with RequireJS

Slide 9

Slide 9 text

$PNNPOJTTVFT 9 ΘΕΘΕͷѻ͏ίʔυ͸๲େͰ͋Δ ݸʑͷίʔυ͸ཻ౓ΛͦΖ͍͑ͨ ࠶ར༻Ͱ͖ΔΑ͏ʹ͍ͨ͠ ґଘؔ܎Λ੔ཧ͍ͨ͠ ͳΜͱ͔͍ͨ͠

Slide 10

Slide 10 text

.PEVMBS +BWB4DSJQU 10 Ϟδϡϥʔͳ+BWB4DSJQUͰ͋Δ͜ͱͷ͓͞Β͍

Slide 11

Slide 11 text

&YBNQMFT 11

Slide 12

Slide 12 text

FH5)&#*(0/& (function() { var Application = { foo: function() {...}, bar: function() {...} }; // long historical stacking code... new Application(); })(); 12 ߦ௒͑ͨ͋ͨΓͰڰؾ ࡍݶͳ͘ॏ͘ͳΔΤσΟλ

Slide 13

Slide 13 text

FH/BNFTQBDF 13 // main.js window.NS = {}; // page.js window.NS.Page = { initialize: function() {}, getContent: function() {}, render : function() {} }; // util.js window.NS.Util = {};

Slide 14

Slide 14 text

FH/BNFTQBDF // first 14 Α͘෼ׂ͞ΕͯΔΑ͏ʹݟ͑Δ

Slide 15

Slide 15 text

FH/BNFTQBDF // finally 15 ಡΈࠐΈॱͱ͍͏໊ͷґଘੑ஍ࠈ ͍ͯ͏͔खॻ͖ϜϦ

Slide 16

Slide 16 text

3FRVJSF+4 16 ࡴെͱͨ͠ґଘղܾ஍ࠈʹࢀ্ ʋcɾ㱼ɾcϊ

Slide 17

Slide 17 text

AEFpOFA /** * @method define * * @param {String} [id] * @param {Array} dependencies * @param {Function} factory */ define(id, dependencies, factory); 17

Slide 18

Slide 18 text

+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

Slide 19

Slide 19 text

+BWB4DSJQU NBJOKT // main.js define(['jquery', 'page'], function($, Page) { // initialize new Page($('#container')); // some business Page.render(); }); 19

Slide 20

Slide 20 text

)5.- 20 ໰୊͸ղܾ͞Εͨʂ require(['main'], function(Main) { });

Slide 21

Slide 21 text

IUUQSFRVJSFKTPSHEPDTXIZBNEIUNM

Slide 22

Slide 22 text

".% "TZODISPOPVT.PEVMF%FpOJUJPO ґଘఆٛͷղܾXJUIඇಉظϩʔμʔ )5.-͸γϯϓϧʹఆٛͯ͠ࡁ·͢ 1$؀ڥ޲͚ͳΒɺ".%ͷ··Ͱ΋ྑͦ͞͏ 22

Slide 23

Slide 23 text

(JWFOCFOFpUT 3FRVJSF+4͸ඇৗʹݡ͍ ґଘղܾ͕γϯϓϧʹͳΔ EFpOFΛར༻ͨ͠ύλʔϯ͕ڧ੍͞ΕΔ ίʔσΟϯάύλʔϯͷ౷੍͕औΓ΍͍͢ ϞδϡϥʔͰ͋Δ͜ͱΛҙࣝ͠΍͘͢ͳΔ 23

Slide 24

Slide 24 text

$BTF4UVEZ 24 ։ൃதϓϩδΣΫτతͳࣄྫ঺հ

Slide 25

Slide 25 text

6TJOHMJCSBSJFT 25 3FRVJSF+4 #BDLCPOFKT MPEBTI ;FQUP +BTNJOF4JOPO$PGGFF5FTUFN

Slide 26

Slide 26 text

5PVS #BDLCPOF஍ࠈʢϑΝΠϧ͘Β͍ʣ +BTNJOFͷ͋ͨΓ (SVOUͰ͔ͨΊͯΔͱ͜Ζ %FWFM #VJME 26

Slide 27

Slide 27 text

5)&#*(0/&"("*/ 1SPEVDUJPOͰ͸ϑΝΠϧʹ͍ͨ͠ΑͶ )551ϦΫΤετ͕গͳ͍ͷ͸ྑ͍͜ͱͩ AHSVOUSFRVJSFKTAͰɺͻͱ·ͱΊʹग़ྗ ͍ͭͰʹ6HMJGZ+4ͰPQUJNJ[F 27

Slide 28

Slide 28 text

%J⒎FSFODFGSPNDPODBU খʙதن໛Ͱ͋Ε͹DPODBUͰྑ͍͔ͳɺͱ γϯϓϧͩ͠ ͕ɺDPODBU͸ґଘੑΛࣔͤͳ͍ ͕ɺDPODBU͸࠶ར༻ੑΛαϙʔτ͠ͳ͍ ͳͥͳΒɺԿͷύλʔϯ΋ఏࣔ͠ͳ͍͔Β 28

Slide 29

Slide 29 text

4FFNTMJLFHPPE 29 ґଘΛҙࣝ͢Δྑ͍श׳ ݟ௨͠΋ྑ͘ͳΔ

Slide 30

Slide 30 text

%FFQEFQFOEFODJFT 30 ͕ɺ஖ᥨͷ૥Λݟͯෆ҆ʹͳΔ

Slide 31

Slide 31 text

$BMMTUBDL)FMM 31

Slide 32

Slide 32 text

6NN 32 ·͋ɺؾʹ͠ͳ͍͜ͱʹͨ͠ ;FQUP΍6OEFSTDPSF MPEBTI ͷΑ͏ʹ HMPCBMʹFYQPSU͢ΔౕΒ͸αϘͬͨ ςετपΓ͸΋͏ͪΐ͍ɺͲ͏ʹ͔͍ͨ͠

Slide 33

Slide 33 text

)BOET0O ϒϥ΢β".%ˍSKT0QUJNJ[F 33

Slide 34

Slide 34 text

"HFOEB ϒϥ΢β্Ͱ͍ΘΏΔ".% SFRVJSFKTDPOpH͢Δ SKTͰPQUJNJ[F BMNPOEʹࠩ͠ସ͑ͯ HSVOUSFRVJSFKTͯ͠ΈΔʢ͍͚Δ͔ʁʣ 34

Slide 35

Slide 35 text

%PDVNFOUT IUUQSFRVJSFKTPSHEPDTTUBSUIUNM IUUQSFRVJSFKTPSHEPDTFSSPSTIUNM IUUQTHJUIVCDPNKSCVSLFSKTCMPC NBTUFSCVJMEFYBNQMFCVJMEKT IUUQTHJUIVCDPNKSCVSLFBMNPOE 35

Slide 36

Slide 36 text

5SZ".%4UFQT KTNBJOKTͷதͰɺEFpOFͯ͠ΈΔ EBUBNBJOͰಡΜͰΈΔ KTTVCKT΋EFpOFͯ͠ΈΔ KTNBJOKTΛKTTVCKTʹґଘͤ͞Δ 36

Slide 37

Slide 37 text

$POpHVSBUJPO4UFQT SFRVJSFKTDPOpH ͰCBTF6SM͢Δ KTMJCKTΛQBUIT͢Δ TIJN͢Δ 37

Slide 38

Slide 38 text

*OTUBMMSKT # άϩʔόϧʹΠϯετʔϧ % npm install -g requirejs # ύε͕௨͍ͬͯΕ͹ɺr.js͕ར༻ՄೳʹͳΔ % r.js See https://github.com/jrburke/r.js for usage 38

Slide 39

Slide 39 text

6TJOHSKT % r.js -o out=js/all.js\ baseUrl=js\ name=bootstrap\ mainConfigFile=js/bootstrap.js # mainConfigFileʹؚ·ΕΔbaseUrl͸ɺ # ࢦఆϑΝΠϧ͔Βͷ૬ରʹͳͬͯ͠·͏ͷͰɺ # ΦϓγϣϯͰࢦఆ͢Δ΄͏͕Α͍ 39

Slide 40

Slide 40 text

"MNPOE % r.js -o out=js/all.js\ baseUrl=js\ name=lib/almond\ include=bootstrap\ mainConfigFile=js/bootstrap.js # ඇಉظϩʔυॲཧͳͲɺෆཁͳػೳΛআ͍ͨshim # 1ϑΝΠϧʹ·ͱΊΔ͜ͱ # ґଘϞδϡʔϧ໊Λಈతʹࢦఆ͠ͳ͍͜ͱ 40

Slide 41

Slide 41 text

HSVOUSFRVJSFKT % npm install -g grunt % npm link % grunt requirejs 41

Slide 42

Slide 42 text

define(['backbone'], function(Backbone) { return Backbone.Model.extend({ url: 'path/to', defaults: { foo: 'bar' }, validation: { // ... } }); // ऄ଍ newͨ͠ͷΛreturn͢ΔͱsingletonΆ͍ }); 42 "QQFOEJYXJUI#BDLCPOF

Slide 43

Slide 43 text

"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

Slide 44

Slide 44 text

"QQFOEJY&YJTUJOH.PEVMF // ͨͱ͑͹ Zepto ($) // `define`͕ఆٛ͞Ε͍ͯͯɺAMDΆ͔ͬͨΒ... if (typeof define === 'function' && define.amd) { define([], function() { return Zepto; }); } 44

Slide 45

Slide 45 text

"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

Slide 46

Slide 46 text

"QQFOEJYNBEHF # https://github.com/pahen/node-madge % npm install -g madge % brew install graphviz # Ϟδϡʔϧͷґଘؔ܎ΛՄࢹԽ % madge --image out.png --format amd ./app 46

Slide 47

Slide 47 text

$PODMVTJPO 3FRVJSF+4͸ϥΠϒϥϦͰ͋Γͭͭɹɹɹɹ ґଘղܾ͢ΔͨΊͷϞμϯύλʔϯͦͷ΋ͷ ΂ͨॻ͖ͷ+4͔Βɺૄ݁߹ͳ+4ʹ ूஂ։ൃ΍௕ظϦϑΝΫλϦϯάΛݟӽͯ͠ ಋೖ͢Δͱɺ͞ΒʹՁ஋͕͋Δ͸ͣ ͥͻݱ৔Ͱల։͍͚ͯͨͩ͠Δͱ޾͍ 47

Slide 48

Slide 48 text

͓ΘΓ 48 ͋Γ͕ͱ͏͍͟͝·ͨ͠

Slide 49

Slide 49 text

1BSJT+43FRVJSF+4 TMJEF .PEVMBS+BWB4DSJQUXJUI".%BOE3FRVJSF+4 3FRVJSF+41IPOF(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