Slide 1
Slide 1 text
https://flic.kr/p/7g1xov
ιʔεϨϏϡʔ͔ΒֶͿ
+BWB4DSJQU
)5.-ϏΪφʔζ
.VOFTBEB:PIFJ
Slide 2
Slide 2 text
About me
㾎 फఆ༸ฏ
㾎 גࣜձࣾϒοΫςʔϒϧ
㾎 !ZPIFJ.VOF
㾎 IUUQXXXZPIFJNOFU
㾎 )5.-ϏΪφʔζελοϑ
㾎 δʔεΞΧσϛʔϝϯλʔ
㾎 ࠷ۙͷڵຯɿ1ZUIPO
ػցֶश
ֶ
౷ܭ
Slide 3
Slide 3 text
㾎 εϚϗ͚ిࢠॻ੶αΠτ
㾎 IUUQTEPLVTIPPKJLBOKQUPQ
✓ jQuery, Handlebars
✓ Single Page Architecture
ಡॻͷ͓࣌ؒͰ͢
Slide 4
Slide 4 text
1PJOUPG7JFX
ϨϏϡʔͰݟ͍ͯΔϙΠϯτʁ
Slide 5
Slide 5 text
1PJOUPG7JFX
όά͕ͳͯ͘ಡΈ͍͢
Slide 6
Slide 6 text
1PJOUPG7JFX
όά͕ͳͯ͘ಡΈ͍͢
Slide 7
Slide 7 text
1PJOUPG7JFX
όά͕ͳͯ͘ಡΈ͍͢
νʔϜͷ
Slide 8
Slide 8 text
όά͕ͳ͍ίʔυʁ
Slide 9
Slide 9 text
όά͕ͳ͍
ᶃ༷௨Γʹಈ͘
w ༷ͷ௨Γʹಈ͘
w ແବͳ͜ͱ͠ͳ͍
w ͋Γ͑ΔΤϥʔέʔεʹରԠ͍ͯ͠Δ
ᶄ Ћ
কདྷతʹόάʹͳΓͮΒ͍
w ࠓޙ͋Γͦ͏ͳมߋʹ͑͏ΔઃܭͰ͋Δ
w ࠓ࣮͢Δඞཁͳ͍͚Ͳ
Slide 10
Slide 10 text
༷௨Γʹಈ͘
model.book.fetchOne = function (bookName, callback) {
var url = '/api/book/search';
var params = {name: bookName};
api(url, params).then(function (books) {
callback(books[0]);
});
}
Slide 11
Slide 11 text
ແବͳ͜ͱ͠ͳ͍όά͕ͳ͍
// OK
model.book.fetchOne = function (bookName, callback) {
var url = '/api/book/search';
var params = {name: bookName};
api(url, params).then(function (books) {
callback(books[0]);
});
}
Slide 12
Slide 12 text
ແବͳ͜ͱ͠ͳ͍όά͕ͳ͍
// NG
model.book.fetchOne = function (bookName, callback) {
var url = '/api/book/search';
var params = {name: bookName};
api(url, params).then(function (books) {
$(‘.mypage #btn’).addClass('enable'); ແବͳ͜ͱ
callback(books[0]);
});
}
Slide 13
Slide 13 text
ΤϥʔέʔεʹରԠ͍ͯ͠Δόά͕ͳ͍
model.book.fetchOne = function (bookName, callback) {
var url = '/api/book/search';
var params = {name: bookName};
api(url, params).then(function (books) {
callback(books[0]);
});
}
Slide 14
Slide 14 text
ΤϥʔέʔεʹରԠ͍ͯ͠Δόά͕ͳ͍
model.book.fetchOne = function (bookName, callback) {
var url = ‘/api/book/search';
// 1. bookName͕ະࢦఆʁ
var params = {name: bookName};
api(url, params).then(function (books) {
// 2. ݕࡧ݁Ռͳ͠ʢnull͕ฦͬͯ͘Δʣʁ
// 3. callback͕ະࢦఆʁ
callback(books[0]);
});
}
Slide 15
Slide 15 text
ΤϥʔέʔεʹରԠ͍ͯ͠Δόά͕ͳ͍
model.book.fetchOne = function (bookName, callback) {
var url = ‘/api/book/search';
// 1. bookName͕ະࢦఆʁ => ࠓճؾʹ͠ͳ͍
var params = {name: bookName};
api(url, params).then(function (books) {
// 2. ݕࡧ݁Ռͳ͠ʢۭͷྻ͕ฦͬͯ͘Δʣ=> nullνΣοΫ
// 3. callback͕ະࢦఆʁ => ؾʹ͠ͳ͍
callback(books && books[0]);
});
}
Slide 16
Slide 16 text
ࠓޙͷมߋʹڧ͍όά͕ͳ͍
model.book.fetchOne = function (bookName, callback) {
var url = '/api/book/search';
var params = {name: bookName};
api(url, params).then(function (books) {
callback(books[0]);
});
}
Slide 17
Slide 17 text
ࠓޙͷมߋʹڧ͍όά͕ͳ͍
// ύϥϝʔλ͕૿͑Δʁ
model.book.fetchOne = function (bookName, callback) {
var url = '/api/book/search';
var params = {name: bookName};
api(url, params).then(function (books) {
callback(books[0]);
});
}
Slide 18
Slide 18 text
ࠓޙͷมߋʹڧ͍όά͕ͳ͍
// ύϥϝʔλ͕૿͑Δʁ => ҾΛՃ͢Δ
model.book.fetchOne = function (name, callback, genre, author) {
var url = '/api/book/search';
var params = {name: bookName};
api(url, params).then(function (books) {
callback(books[0]);
});
}
Slide 19
Slide 19 text
ࠓޙͷมߋʹڧ͍όά͕ͳ͍
// ύϥϝʔλ͕૿͑Δʁ
model.book.fetchOne = function (name, callback, genre, author) {
var url = '/api/book/search';
var params = {name: bookName};
api(url, params).then(function (books) {
callback(books[0]);
});
}
Slide 20
Slide 20 text
ࠓޙͷมߋʹڧ͍όά͕ͳ͍
// ύϥϝʔλ͕૿͑Δʁ => ෳࢦఆՄೳʹ
model.book.fetchOne = function (conditions, callback) {
var url = '/api/book/search';
api(url, conditions).then(function (books) {
callback(books[0]);
});
}
// ͍ํ
model.book.fetchOne({name:’φϧτ’}, callback: function () {});
Slide 21
Slide 21 text
3Fɿόά͕ͳ͍
ᶃ༷௨Γʹಈ͘
w ༷ͷ௨Γʹಈ͘
w ແବͳ͜ͱ͠ͳ͍
w ͋Γ͑ΔΤϥʔέʔεʹରԠ͍ͯ͠Δ
ᶄ Ћ
কདྷతʹόάʹͳΓͮΒ͍
w ࠓޙ͋Γͦ͏ͳมߋʹ͑͏ΔઃܭͰ͋Δ
w ࠓ࣮͢Δඞཁͳ͍͚Ͳ
Slide 22
Slide 22 text
ಡΈ͍͢ίʔυ
https://flic.kr/p/aAvh9L
Slide 23
Slide 23 text
ಡΈ͍͢ίʔυʁ
Slide 24
Slide 24 text
ಡΈ͍͢ίʔυʁ
ຊޠͷจষͱಉ͡
Slide 25
Slide 25 text
͡Ό͕ͷ࡞Γํ
δϟΨΠϞͱਓࢀେ͖ΊͷཚΓʹͯ͠ۄͶ͗͘͠Γɺ͠
Β͖ͨચͬͯదʹ͖Γ·͢ɻத՚ುʹ༉Λେ̎ೖΕڧՐʹ͠ɺ
ΛೖΕ৭͕มΘΔ·ͰᖱΊͨΒ̍ೖΕܰ͘ᖱΊ·̇ࣽ͢ोͷ
ࡐྉΛೖΕಅͨ͠ΒփोΛऔΓനୌΛೖΕࠞͥதڧՐͷ··མ
֖͠Λࣽ͠ो͕ແ͘ͳΔ·Ͱఔࣽ٧Ί·͢ɻࣽ٧Ί
ͨॴͰҰࠞͥɺ࠶མ֖͠Λͯࣽ͠ो͕ͳ͘ͳΔ·Ͱ༷ࢠΛݟ
ͳ͕ΒߋʹҐࣽ٧Ί͍͖ͯ·͢ɻࣽो͕ແ͘ͳͬͨΒՐΛࢭ
Ίམ֖͠Λͨ͠··ؒɺৠΒ͠·̇͢ຯ͕ߋʹછΈࠐΈ·
͢ΐʂ͜͜େࣄʂͦͯ͠Ͱ̇͢
ʼʻɻɻɻ
http://cookpad.com/recipe/1519259
Slide 26
Slide 26 text
͡Ό͕ͷ࡞Γํ
Լ४උ
ɹδϟΨΠϞେ͖ΊͷཚΓʹͯ͠ۄͶ͗͘͠Γɺ͠Β͖ͨચͬͯదʹ͖Γ·͢ɻ
ᖱΊΔ
ɹத՚ುʹ༉Λେ̎ೖΕڧՐʹ͠ɺΛೖΕ৭͕มΘΔ·ͰᖱΊͨΒ̍ೖΕܰ͘ᖱΊ·̇͢
ࣽΔ
ɹࣽोͷࡐྉΛೖΕಅͨ͠ΒփोΛऔΓനୌΛೖΕࠞͥதڧՐͷ··མ֖͠Λࣽ͠ो͕ແ͘ͳΔ·Ͱ
ఔࣽ٧Ί·͢ɻࣽ٧ΊͨॴͰҰࠞͥɺ࠶མ֖͠Λͯࣽ͠ो͕ͳ͘ͳΔ·Ͱ༷ࢠΛݟͳ͕Β
ߋʹҐࣽ٧Ί͍͖ͯ·͢ɻࣽो͕ແ͘ͳͬͨΒՐΛࢭΊམ֖͠Λͨ͠··ؒɺৠΒ͠·̇͢ຯ
͕ߋʹછΈࠐΈ·͢ΐʂ͜͜େࣄʂͦͯ͠Ͱ̇͢
?Т?
http://cookpad.com/recipe/1519259
Slide 27
Slide 27 text
ಡΈ͍͢ຊޠͷϙΠϯτ
ͭͷஈམʹͭͷ༰ʹߜΔ
μϥμϥͱ͍จষΛॻ͔ͳ͍
൱ఆจΑΓߠఆจΛ͏
͘ॻ͘
ಡΈखʹΘΔݴ༿ΛબͿ
Slide 28
Slide 28 text
ಡΈ͍͢ຊޠͷϙΠϯτ
ͭͷஈམʹͭͷ༰ʹߜΔ
ɹɹ ॲཧΛؔͱͯ͠Γग़͢୯Ұͷݪଇ
μϥμϥͱ͍จষΛॻ͔ͳ͍
ɹɹ ؔ࠷େߦҎ
൱ఆจΑΓߠఆจΛ͏
ɹɹ OPU)FBWZ6TFS
Ͱͳ͘JT)FBWZ6TFS
͘ॻ͘
ɹɹ ࡾ߲ԋࢉࢠΛ͏υɾϞϧΨϯͰׂ͢Δ
ಡΈखʹΘΔݴ༿ΛબͿ
ɹɹ దͳม໊Λ͏
Slide 29
Slide 29 text
ಡΈ͍͢ιʔείʔυΛॻ͘ʹʁ
㾎 ॲཧΛׂ͢Δ
㾎 Θ͔Γ͍͢ม໊Λ͚ͭΔ
㾎 దͳίϝϯτΛ͚ͭΔ
㾎 ΠϯσϯτΛదʹͱΔ
㾎 ൱ఆΑΓߠఆΛ͏
㾎 ωετΛઙ͘͢Δ
㾎 ؆ܿʹॻ͘
㾎 HPUPจΛΘͳ͍
㾎 είʔϓͷൣғ࠷খݶʹ͢Δ
㾎 ୯Ұͷݪଇ
㾎 ίʔυΛখ͘͞อͭ
㾎 ࣮ͷҙਤΛ͢
㾎 ໊લ͖Ҿ
㾎 Ҿͷͭ·Ͱ
㾎 ૬ޓࢀরΛආ͚Δ
㾎 ίʔϧόοΫࠈΛආ͚Δ
㾎 ΦϒδΣΫτͷґଘΛԼ͛Δ
㾎 ͳͲ
Slide 30
Slide 30 text
ࢀߟਤॻ
Slide 31
Slide 31 text
ಡΈ͍͢ιʔείʔυΛॻ͘ʹʁ
㾎 ॲཧΛׂ͢Δ
㾎 Θ͔Γ͍͢ม໊Λ͚ͭΔ
㾎 దͳίϝϯτΛ͚ͭΔ
㾎 ΠϯσϯτΛదʹͱΔ
㾎 ൱ఆΑΓߠఆΛ͏
㾎 ωετΛઙ͘͢Δ
㾎 ؆ܿʹॻ͘
㾎 HPUPจΛΘͳ͍
㾎 είʔϓͷൣғ࠷খݶʹ͢Δ
㾎 ୯Ұͷݪଇ
㾎 ίʔυΛখ͘͞อͭ
㾎 ࣮ͷҙਤΛ͢
㾎 ໊લ͖Ҿ
㾎 Ҿͷͭ·Ͱ
㾎 ૬ޓࢀরΛආ͚Δ
㾎 ίʔϧόοΫࠈΛආ͚Δ
㾎 ΦϒδΣΫτͷґଘΛԼ͛Δ
㾎 ͳͲ
Slide 32
Slide 32 text
͔Γ͍͢ม໊Λ͚ͭΔ
// Is it an array? -> isArray -> Yes / No (True / False)
function isArray (arrayObject) {}
// Does this array contain the item ? => Yes / No (True / False)
function contains(array, item) {}
// ಈࢺ + తޠ
function fetchBooks () {}
// ಈࢺΛબͿ => ӳޠྗ + ͕ࣝඞཁ
function push() / append() / put() / add() / enqueue() / etc
// ಈࢺ͡Όͳͯ͘໌֬ͳ߹
function api () {}
Slide 33
Slide 33 text
ಡΈ͍͢ιʔείʔυΛॻ͘ʹʁ
㾎 ॲཧΛׂ͢Δ
㾎 Θ͔Γ͍͢ม໊Λ͚ͭΔ
㾎 దͳίϝϯτΛ͚ͭΔ
㾎 ΠϯσϯτΛదʹͱΔ
㾎 ൱ఆΑΓߠఆΛ͏
㾎 ωετΛઙ͘͢Δ
㾎 ؆ܿʹॻ͘
㾎 HPUPจΛΘͳ͍
㾎 είʔϓͷൣғ࠷খݶʹ͢Δ
㾎 ୯Ұͷݪଇ
㾎 ίʔυΛখ͘͞อͭ
㾎 ࣮ͷҙਤΛ͢
㾎 ໊લ͖Ҿ
㾎 Ҿͷͭ·Ͱ
㾎 ૬ޓࢀরΛආ͚Δ
㾎 ίʔϧόοΫࠈΛආ͚Δ
㾎 ΦϒδΣΫτͷґଘΛԼ͛Δ
㾎 ͳͲ
Slide 34
Slide 34 text
νʔϜͷΛଅ͢
https://flic.kr/p/7aFKv2
Slide 35
Slide 35 text
νʔϜͷΛଅ͢
ᶃΈΜͳͰϨϏϡʔ͢Δ
w ଞͷਓͷίʔυΛݟֶͯͿ
w ଞͷਓͷࢦఠΛݟֶͯͿ
w ࢦఠͰ͖Δྔ࣭ͷมԽ͔ΒεΩϧΞοϓ͕࣮ײͰ͖Δ
Slide 36
Slide 36 text
https://flic.kr/p/aAvcFL
Summary
Slide 37
Slide 37 text
·ͱΊ
ᶃόά͕ͳ͍
w ༷௨Γʹಈ͖ɺΤϥʔέʔεͷߟྀ͋Δ
w কདྷతʹόάʹͳΓͮΒ͍
ᶄಡΈ͍͢
w ຊޠͷจষͱҰॹ
w ͨ͘͞Μͷϊϋ͕ଘࡏ͢Δʢม໊ͷ͚ํͳͲʣ
ᶅνʔϜͷΛଅ͢
w ΈΜͳͰϨϏϡʔ͢Δ
Slide 38
Slide 38 text
One More Step
Slide 39
Slide 39 text
ใॲཧٕज़ऀࢼݧc*1"
Slide 40
Slide 40 text
$ISPNFΞοϓσʔτc$ISPNJVN#MPH
Slide 41
Slide 41 text
σβΠϯύλʔϯc5&$)4$03&
Slide 42
Slide 42 text
͏ͭϓϩάϥϛϯάݴޠΛ
Slide 43
Slide 43 text
Thank you
http://www.yoheim.net
@yoheiMune
https://flic.kr/p/mzmQK2