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
16
13k
Web 開発の長距離走と持続可能性 - TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来
ahomu
1
220
控えめな App Router と持続可能な開発 - PWA Night vol.59
ahomu
12
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
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
180
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
PipeCDのプラグイン化で目指すところ
warashi
1
300
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
890
生成AI時代のコンポーネントライブラリの作り方
touyou
1
280
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1k
Featured
See All Featured
Visualization
eitanlees
146
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Balancing Empowerment & Direction
lara
1
450
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Gamification - CAS2011
davidbonilla
81
5.4k
Code Reviewing Like a Champion
maltzj
524
40k
Statistics for Hackers
jakevdp
799
220k
Making Projects Easy
brettharned
116
6.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Done Done
chrislema
184
16k
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