ビギナーズ_レビューから学ぶ+1

https://ﬂic.kr/p/7g1xov ιʔεϨϏϡʔ͔ΒֶͿ +BWB4DSJQU )5.-ϏΪφʔζ .VOFTBEB:PIFJ

About me 㾎 फఆ༸ฏ 㾎 גࣜձࣾϒοΫςʔϒϧ 㾎 !ZPIFJ.VOF 㾎 IUUQXXXZPIFJNOFU
㾎 )5.-ϏΪφʔζελοϑ 㾎 δʔεΞΧσϛʔϝϯλʔ 㾎 ࠷ۙͷڵຯɿ1ZUIPO ػցֶश ਺ֶ ౷ܭ

㾎 εϚϗ޲͚ిࢠॻ੶αΠτ 㾎 IUUQTEPLVTIPPKJLBOKQUPQ ✓ jQuery, Handlebars ✓ Single Page
Architecture ಡॻͷ͓࣌ؒͰ͢

1PJOUPG7JFX ϨϏϡʔͰݟ͍ͯΔϙΠϯτ͸ʁ

1PJOUPG7JFX όά͕ͳͯ͘ಡΈ΍͍͢

1PJOUPG7JFX όά͕ͳͯ͘ಡΈ΍͍͢ νʔϜͷ੒௕

όά͕ͳ͍ίʔυʁ

όά͕ͳ͍ ᶃ࢓༷௨Γʹಈ͘ w ࢓༷ͷ௨Γʹಈ͘ w ແବͳ͜ͱ͸͠ͳ͍ w ͋Γ͑ΔΤϥʔέʔεʹରԠ͍ͯ͠Δ
ᶄ Ћ কདྷతʹ΋όάʹͳΓͮΒ͍ w ࠓޙ͋Γͦ͏ͳมߋʹ଱͑͏ΔઃܭͰ͋Δ w ࠓ͸࣮૷͢Δඞཁ͸ͳ͍͚Ͳ

࢓༷௨Γʹಈ͘ model.book.fetchOne = function (bookName, callback) { var url =
'/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }

ແବͳ͜ͱ͸͠ͳ͍όά͕ͳ͍ // 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]); }); }

ແବͳ͜ͱ͸͠ͳ͍όά͕ͳ͍ // 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]); }); }

ΤϥʔέʔεʹରԠ͍ͯ͠Δόά͕ͳ͍ model.book.fetchOne = function (bookName, callback) { var url
= '/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }

= ‘/api/book/search'; // 1. bookName͕ະࢦఆʁ var params = {name: bookName}; api(url, params).then(function (books) { // 2. ݕࡧ݁Ռͳ͠ʢnull͕ฦͬͯ͘Δʣʁ // 3. callback͕ະࢦఆʁ callback(books[0]); }); }

= ‘/api/book/search'; // 1. bookName͕ະࢦఆʁ => ࠓճ͸ؾʹ͠ͳ͍ var params = {name: bookName}; api(url, params).then(function (books) { // 2. ݕࡧ݁Ռͳ͠ʢۭͷ഑ྻ͕ฦͬͯ͘Δʣ=> nullνΣοΫ // 3. callback͕ະࢦఆʁ => ؾʹ͠ͳ͍ callback(books && books[0]); }); }

ࠓޙͷมߋʹڧ͍όά͕ͳ͍ model.book.fetchOne = function (bookName, callback) { var url
= '/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }

ࠓޙͷมߋʹڧ͍όά͕ͳ͍ // ύϥϝʔλ͕૿͑Δʁ model.book.fetchOne = function (bookName, callback) {
var url = '/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }

ࠓޙͷมߋʹڧ͍όά͕ͳ͍ // ύϥϝʔλ͕૿͑Δʁ => Ҿ਺Λ௥Ճ͢Δ 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]); }); }

ࠓޙͷมߋʹڧ͍όά͕ͳ͍ // ύϥϝʔλ͕૿͑Δʁ 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]); }); }

ࠓޙͷมߋʹڧ͍όά͕ͳ͍ // ύϥϝʔλ͕૿͑Δʁ => ෳ਺ࢦఆՄೳʹ 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 () {});

3Fɿόά͕ͳ͍ ᶃ࢓༷௨Γʹಈ͘ w ࢓༷ͷ௨Γʹಈ͘ w ແବͳ͜ͱ͸͠ͳ͍ w ͋Γ͑ΔΤϥʔέʔεʹରԠ͍ͯ͠Δ
ᶄ Ћ কདྷతʹ΋όάʹͳΓͮΒ͍ w ࠓޙ͋Γͦ͏ͳมߋʹ଱͑͏ΔઃܭͰ͋Δ w ࠓ͸࣮૷͢Δඞཁ͸ͳ͍͚Ͳ

ಡΈ΍͍͢ίʔυ https://ﬂic.kr/p/aAvh9L

ಡΈ΍͍͢ίʔυʁ

ಡΈ΍͍͢ίʔυʁ ೔ຊޠͷจষͱಉ͡

೑͡Ό͕ͷ࡞Γํ δϟΨΠϞͱਓࢀ͸େ͖Ίͷཚ੾Γʹͯ͠ۄͶ͗͸͘͠੾Γɺ͠ Β͖ͨ͸ચͬͯద౰ʹ͖Γ·͢ɻத՚ುʹ༉Λେ̎ೖΕڧՐʹ͠ɺ ೑ΛೖΕ৭͕มΘΔ·ͰᖱΊͨΒ̍΋ೖΕܰ͘ᖱΊ·̇ࣽ͢ोͷ ࡐྉΛೖΕ෸ಅͨ͠ΒփोΛऔΓനୌΛೖΕࠞͥதڧՐͷ··མ ֖͠Λࣽ͠ो͕ແ͘ͳΔ·Ͱ໿෼ఔࣽ٧Ί·͢ɻ෼ࣽ٧Ί ͨॴͰҰ౓ࠞͥɺ࠶౓མ֖͠Λͯࣽ͠ो͕ͳ͘ͳΔ·Ͱ༷ࢠΛݟ ͳ͕Βߋʹ෼Ґࣽ٧Ί͍͖ͯ·͢ɻࣽो͕ແ͘ͳͬͨΒՐΛࢭ Ίམ֖͠Λͨ͠··෼ؒɺৠΒ͠·̇͢ຯ͕ߋʹછΈࠐΈ· ͢ΐʂ͜͜େࣄʂͦͯ͠׬੒Ͱ̇͢
ʼʻɻɻɻ http://cookpad.com/recipe/1519259

೑͡Ό͕ͷ࡞Γํ Լ४උ ɹδϟΨΠϞ͸େ͖Ίͷཚ੾Γʹͯ͠ۄͶ͗͸͘͠੾Γɺ͠Β͖ͨ͸ચͬͯద౰ʹ͖Γ·͢ɻ ᖱΊΔ ɹத՚ುʹ༉Λେ̎ೖΕڧՐʹ͠ɺ೑ΛೖΕ৭͕มΘΔ·ͰᖱΊͨΒ̍΋ೖΕܰ͘ᖱΊ·̇͢ ࣽΔ ɹࣽोͷࡐྉΛೖΕ෸ಅͨ͠ΒփोΛऔΓനୌΛೖΕࠞͥதڧՐͷ··མ֖͠Λࣽ͠ो͕ແ͘ͳΔ·Ͱ໿ ෼ఔࣽ٧Ί·͢ɻ෼ࣽ٧ΊͨॴͰҰ౓ࠞͥɺ࠶౓མ֖͠Λͯࣽ͠ो͕ͳ͘ͳΔ·Ͱ༷ࢠΛݟͳ͕Β ߋʹ෼Ґࣽ٧Ί͍͖ͯ·͢ɻࣽो͕ແ͘ͳͬͨΒՐΛࢭΊམ֖͠Λͨ͠··෼ؒɺৠΒ͠·̇͢ຯ ͕ߋʹછΈࠐΈ·͢ΐʂ͜͜େࣄʂͦͯ͠׬੒Ͱ̇͢
?Т? http://cookpad.com/recipe/1519259

ಡΈ΍͍͢೔ຊޠͷϙΠϯτ ͭͷஈམʹ͸ͭͷ಺༰ʹߜΔ μϥμϥͱ௕͍จষΛॻ͔ͳ͍ ൱ఆจΑΓ΋ߠఆจΛ࢖͏ ୹͘ॻ͘
ಡΈखʹ఻ΘΔݴ༿ΛબͿ

ಡΈ΍͍͢೔ຊޠͷϙΠϯτ ͭͷஈམʹ͸ͭͷ಺༰ʹߜΔ ɹɹॲཧΛؔ਺ͱͯ͠੾Γग़͢୯Ұ੹೚ͷݪଇ μϥμϥͱ௕͍จষΛॻ͔ͳ͍ ɹɹؔ਺͸࠷େߦҎ಺ ൱ఆจΑΓ΋ߠఆจΛ࢖͏ ɹɹOPU)FBWZ6TFS
Ͱ͸ͳ͘JT)FBWZ6TFS ୹͘ॻ͘ ɹɹࡾ߲ԋࢉࢠΛ࢖͏υɾϞϧΨϯͰ෼ׂ͢Δ ಡΈखʹ఻ΘΔݴ༿ΛબͿ ɹɹద੾ͳม਺໊Λ࢖͏

ಡΈ΍͍͢ιʔείʔυΛॻ͘ʹ͸ʁ 㾎 ॲཧΛ෼ׂ͢Δ 㾎 Θ͔Γ΍͍͢ม਺໊Λ͚ͭΔ 㾎 ద੾ͳίϝϯτΛ͚ͭΔ 㾎 ΠϯσϯτΛద੾ʹͱΔ 㾎
൱ఆΑΓ΋ߠఆΛ࢖͏ 㾎 ωετΛઙ͘͢Δ 㾎 ؆ܿʹॻ͘ 㾎 HPUPจΛ࢖Θͳ͍ 㾎 είʔϓͷൣғ͸࠷খݶʹ͢Δ 㾎 ୯Ұ੹೚ͷݪଇ 㾎 ίʔυΛখ͘͞อͭ 㾎 ࣮૷ͷҙਤΛ࢒͢ 㾎 ໊લ෇͖Ҿ਺ 㾎 Ҿ਺ͷ਺͸ͭ·Ͱ 㾎 ૬ޓࢀরΛආ͚Δ 㾎 ίʔϧόοΫ஍ࠈΛආ͚Δ 㾎 ΦϒδΣΫτͷґଘ౓ΛԼ͛Δ 㾎 ͳͲ

ࢀߟਤॻ

෼͔Γ΍͍͢ม਺໊Λ͚ͭΔ // 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 () {}

νʔϜͷ੒௕Λଅ͢ https://ﬂic.kr/p/7aFKv2

νʔϜͷ੒௕Λଅ͢ ᶃΈΜͳͰϨϏϡʔ͢Δ w ଞͷਓͷίʔυΛݟֶͯͿ w ଞͷਓͷࢦఠΛݟֶͯͿ w ࢦఠͰ͖Δྔ࣭ͷมԽ͔ΒεΩϧΞοϓ͕࣮ײͰ͖Δ

https://ﬂic.kr/p/aAvcFL Summary

·ͱΊ ᶃόά͕ͳ͍ w ࢓༷௨Γʹಈ͖ɺΤϥʔέʔε΁ͷߟྀ΋͋Δ w কདྷతʹ΋όάʹͳΓͮΒ͍ ᶄಡΈ΍͍͢ w ೔ຊޠͷจষͱҰॹ w
ͨ͘͞Μͷϊ΢ϋ΢͕ଘࡏ͢Δʢม਺໊ͷ෇͚ํͳͲʣ ᶅνʔϜͷ੒௕Λଅ͢ w ΈΜͳͰϨϏϡʔ͢Δ

One More Step

৘ใॲཧٕज़ऀࢼݧc*1"

$ISPNFΞοϓσʔτc$ISPNJVN#MPH

σβΠϯύλʔϯc5&$)4$03&

΋͏ͭϓϩάϥϛϯάݴޠΛ

Thank you http://www.yoheim.net @yoheiMune https://ﬂic.kr/p/mzmQK2

ビギナーズ_レビューから学ぶ+1

ビギナーズ_レビューから学ぶ+1

More Decks by Yohei Munesada

Other Decks in Technology

Featured

Transcript