Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ビギナーズ_レビューから学ぶ+1

 ビギナーズ_レビューから学ぶ+1

第13回HTML5ビギナーズ。ソースレビューを半年以上していて、その内容をまとめました。「バグがなくて読みやすい」がポイント。

2dfd5e0acd70adff0e2efc745d992396?s=128

Yohei Munesada

November 05, 2015
Tweet

Transcript

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

  2. About me 㾎 फఆ༸ฏ 㾎 גࣜձࣾϒοΫςʔϒϧ 㾎 !ZPIFJ.VOF 㾎 IUUQXXXZPIFJNOFU

    㾎 )5.-ϏΪφʔζελοϑ 㾎 δʔεΞΧσϛʔϝϯλʔ 㾎 ࠷ۙͷڵຯɿ1ZUIPO ػցֶश ਺ֶ ౷ܭ
  3. 㾎 εϚϗ޲͚ిࢠॻ੶αΠτ 㾎 IUUQTEPLVTIPPKJLBOKQUPQ ✓ jQuery, Handlebars ✓ Single Page

    Architecture ಡॻͷ͓࣌ؒͰ͢
  4. 1PJOUPG7JFX ϨϏϡʔͰݟ͍ͯΔϙΠϯτ͸ʁ

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

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

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

  8. όά͕ͳ͍ίʔυʁ

  9. όά͕ͳ͍ ᶃ࢓༷௨Γʹಈ͘ w ࢓༷ͷ௨Γʹಈ͘ w ແବͳ͜ͱ͸͠ͳ͍   w ͋Γ͑ΔΤϥʔέʔεʹରԠ͍ͯ͠Δ

     ᶄ Ћ কདྷతʹ΋όάʹͳΓͮΒ͍ w ࠓޙ͋Γͦ͏ͳมߋʹ଱͑͏ΔઃܭͰ͋Δ   w ࠓ͸࣮૷͢Δඞཁ͸ͳ͍͚Ͳ
  10. ࢓༷௨Γʹಈ͘ model.book.fetchOne = function (bookName, callback) { var url =

    '/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }
  11.  ແବͳ͜ͱ͸͠ͳ͍όά͕ͳ͍ // 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]); }); }
  12.  ແବͳ͜ͱ͸͠ͳ͍όά͕ͳ͍ // 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]); }); }
  13.  ΤϥʔέʔεʹରԠ͍ͯ͠Δόά͕ͳ͍ model.book.fetchOne = function (bookName, callback) { var url

    = '/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }
  14.  ΤϥʔέʔεʹରԠ͍ͯ͠Δόά͕ͳ͍ 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]); }); }
  15.  ΤϥʔέʔεʹରԠ͍ͯ͠Δόά͕ͳ͍ 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]); }); }
  16.  ࠓޙͷมߋʹڧ͍όά͕ͳ͍ model.book.fetchOne = function (bookName, callback) { var url

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

    var url = '/api/book/search'; var params = {name: bookName}; api(url, params).then(function (books) { callback(books[0]); }); }
  18.  ࠓޙͷมߋʹڧ͍όά͕ͳ͍ // ύϥϝʔλ͕૿͑Δʁ => Ҿ਺Λ௥Ճ͢Δ 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]); }); }
  19.  ࠓޙͷมߋʹڧ͍όά͕ͳ͍ // ύϥϝʔλ͕૿͑Δʁ 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]); }); }
  20.  ࠓޙͷมߋʹڧ͍όά͕ͳ͍ // ύϥϝʔλ͕૿͑Δʁ => ෳ਺ࢦఆՄೳʹ 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 () {});
  21. 3Fɿόά͕ͳ͍ ᶃ࢓༷௨Γʹಈ͘ w ࢓༷ͷ௨Γʹಈ͘ w ແବͳ͜ͱ͸͠ͳ͍   w ͋Γ͑ΔΤϥʔέʔεʹରԠ͍ͯ͠Δ

     ᶄ Ћ কདྷతʹ΋όάʹͳΓͮΒ͍ w ࠓޙ͋Γͦ͏ͳมߋʹ଱͑͏ΔઃܭͰ͋Δ   w ࠓ͸࣮૷͢Δඞཁ͸ͳ͍͚Ͳ
  22. ಡΈ΍͍͢ίʔυ https://flic.kr/p/aAvh9L

  23. ಡΈ΍͍͢ίʔυʁ

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

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

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

    ?Т? http://cookpad.com/recipe/1519259
  27. ಡΈ΍͍͢೔ຊޠͷϙΠϯτ  ͭͷஈམʹ͸ͭͷ಺༰ʹߜΔ  μϥμϥͱ௕͍จষΛॻ͔ͳ͍  ൱ఆจΑΓ΋ߠఆจΛ࢖͏  ୹͘ॻ͘ 

    ಡΈखʹ఻ΘΔݴ༿ΛબͿ
  28. ಡΈ΍͍͢೔ຊޠͷϙΠϯτ  ͭͷஈམʹ͸ͭͷ಺༰ʹߜΔ ɹɹॲཧΛؔ਺ͱͯ͠੾Γग़͢୯Ұ੹೚ͷݪଇ  μϥμϥͱ௕͍จষΛॻ͔ͳ͍ ɹɹؔ਺͸࠷େߦҎ಺  ൱ఆจΑΓ΋ߠఆจΛ࢖͏ ɹɹOPU)FBWZ6TFS

    Ͱ͸ͳ͘JT)FBWZ6TFS   ୹͘ॻ͘ ɹɹࡾ߲ԋࢉࢠΛ࢖͏υɾϞϧΨϯͰ෼ׂ͢Δ  ಡΈखʹ఻ΘΔݴ༿ΛબͿ ɹɹద੾ͳม਺໊Λ࢖͏
  29. ಡΈ΍͍͢ιʔείʔυΛॻ͘ʹ͸ʁ 㾎 ॲཧΛ෼ׂ͢Δ 㾎 Θ͔Γ΍͍͢ม਺໊Λ͚ͭΔ 㾎 ద੾ͳίϝϯτΛ͚ͭΔ 㾎 ΠϯσϯτΛద੾ʹͱΔ 㾎

    ൱ఆΑΓ΋ߠఆΛ࢖͏ 㾎 ωετΛઙ͘͢Δ 㾎 ؆ܿʹॻ͘ 㾎 HPUPจΛ࢖Θͳ͍ 㾎 είʔϓͷൣғ͸࠷খݶʹ͢Δ 㾎 ୯Ұ੹೚ͷݪଇ 㾎 ίʔυΛখ͘͞อͭ 㾎 ࣮૷ͷҙਤΛ࢒͢ 㾎 ໊લ෇͖Ҿ਺ 㾎 Ҿ਺ͷ਺͸ͭ·Ͱ 㾎 ૬ޓࢀরΛආ͚Δ 㾎 ίʔϧόοΫ஍ࠈΛආ͚Δ 㾎 ΦϒδΣΫτͷґଘ౓ΛԼ͛Δ 㾎 ͳͲ
  30. ࢀߟਤॻ

  31. ಡΈ΍͍͢ιʔείʔυΛॻ͘ʹ͸ʁ 㾎 ॲཧΛ෼ׂ͢Δ 㾎 Θ͔Γ΍͍͢ม਺໊Λ͚ͭΔ 㾎 ద੾ͳίϝϯτΛ͚ͭΔ 㾎 ΠϯσϯτΛద੾ʹͱΔ 㾎

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

    ൱ఆΑΓ΋ߠఆΛ࢖͏ 㾎 ωετΛઙ͘͢Δ 㾎 ؆ܿʹॻ͘ 㾎 HPUPจΛ࢖Θͳ͍ 㾎 είʔϓͷൣғ͸࠷খݶʹ͢Δ 㾎 ୯Ұ੹೚ͷݪଇ 㾎 ίʔυΛখ͘͞อͭ 㾎 ࣮૷ͷҙਤΛ࢒͢ 㾎 ໊લ෇͖Ҿ਺ 㾎 Ҿ਺ͷ਺͸ͭ·Ͱ 㾎 ૬ޓࢀরΛආ͚Δ 㾎 ίʔϧόοΫ஍ࠈΛආ͚Δ 㾎 ΦϒδΣΫτͷґଘ౓ΛԼ͛Δ 㾎 ͳͲ
  34. νʔϜͷ੒௕Λଅ͢ https://flic.kr/p/7aFKv2

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

  36. https://flic.kr/p/aAvcFL Summary

  37. ·ͱΊ ᶃόά͕ͳ͍ w ࢓༷௨Γʹಈ͖ɺΤϥʔέʔε΁ͷߟྀ΋͋Δ w কདྷతʹ΋όάʹͳΓͮΒ͍ ᶄಡΈ΍͍͢ w ೔ຊޠͷจষͱҰॹ w

    ͨ͘͞Μͷϊ΢ϋ΢͕ଘࡏ͢Δʢม਺໊ͷ෇͚ํͳͲʣ ᶅνʔϜͷ੒௕Λଅ͢ w ΈΜͳͰϨϏϡʔ͢Δ
  38. One More Step

  39. ৘ใॲཧٕज़ऀࢼݧc*1"

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

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

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

  43. Thank you http://www.yoheim.net @yoheiMune https://flic.kr/p/mzmQK2