第9回SenchaUG@札幌「Sencha Learning Place No.2」

A4bb8731738c2f44c6d8284c0a1dd89f?s=47 Tanaka Yuuya
June 10, 2013
70

第9回SenchaUG@札幌「Sencha Learning Place No.2」

A4bb8731738c2f44c6d8284c0a1dd89f?s=128

Tanaka Yuuya

June 10, 2013
Tweet

Transcript

  1. Sencha։ൃ௒ೖ໳ͱɺ ஌Βͳͯ͘͸ͳΒͳ͍େ੾ͳجૅ஌ࣝ גࣜձࣾθϊϑΟ খఅ Ұ߂

  2. લճͷ6(Ͱ͓఻͍͑ͯͨ͠ 4FODIB-FBSOJOH1MBDFͷ ୈ஄Λެ։͠·ͨ͠ʂ

  3. ͦͯ͠

  4. ࢒೦ͳ͕Βࠓճ΋+BWB4DSJQUͷ جຊʹֶ͍ͭͯΜͰ͍͖·͢

  5. ࠓճ΍Δͷ͸ w +40/ͱΦϒδΣΫτͷҧ͍ w 4FODIB&YU+4ɾ5PVDIͰଟ༻͞Ε͍ͯΔ ൺֱԋࢉࢠΛ༻͍ͨॳظԽॲཧʹ͍ͭͯ w ίϯετϥΫλ w ϓϩτλΠϓ

  6. +40/ͱΦϒδΣΫτͷҧ͍ʹ͍ͭͯ

  7. ΦϒδΣΫτ +40/ w +BWB4DSJQUͷσʔλܕͷͭ w Ωʔͱ஋͕ϖΞʹͳ͍ͬͯΔ࿈૝഑ྻ w +BWB4DSJQUͷΦϒδΣΫτͷදه๏Λ ϕʔεͱͨܰ͠ྔͳσʔλهड़ݴޠ w

    +BWB4DSJQU0CKFDU/PUBUJPOͱ͍͏ ໊લ͕ͩɺ༷ʑͳιϑτ΢ΣΞɾϓϩ άϥϜݴޠؒʹ͓͚Δσʔλͷड͚౉ ͠ʹ࢖༻Ͱ͖ΔΑ͏ʹઃܭ͞Ε͍ͯΔ
  8. ΦϒδΣΫτʢهड़ྫʣ +40/ʢهड़ྫʣ { name: 'Yamada Tarou', sample: true, id: 100,

    product: “ABCD-001”, price: function() { return 200 * 0.05; } } { “name”: “Yamada Tarou”, “sample”: true, “id”: 100, “product”: “ABCD-001”, “price”: “function() { return 200 * 0.05; }” } ࣅ͍ͯΔ
  9. ΦϒδΣΫτʢهड़ྫʣ +40/ʢهड़ྫʣ { name: 'Yamada Tarou', sample: true, id: 100,

    product: “ABCD-001”, price: function() { return 200 * 0.05; } } { “name”: “Yamada Tarou”, “sample”: true, “id”: 100, “product”: “ABCD-001”, “price”: “function() { return 200 * 0.05; }” } ͚ͲɺΑ͘ݟΔͱҧ͏
  10. ΦϒδΣΫτʢهड़ྫʣ +40/ʢهड़ྫʣ { name: 'Yamada Tarou', sample: true, id: 100,

    product: “ABCD-001”, price: function() { return 200 * 0.05; } } { “name”: “Yamada Tarou”, “sample”: true, “id”: 100, “product”: “ABCD-001”, “price”: “function() { return 200 * 0.05; }” } ͜͜΋ҧ͏
  11. ΦϒδΣΫτʢهड़ྫʣ +40/ʢهड़ྫʣ { name: 'Yamada Tarou', sample: true, id: 100,

    product: “ABCD-001”, price: function() { return 200 * 0.05; } } { “name”: “Yamada Tarou”, “sample”: true, “id”: 100, “product”: “ABCD-001”, “price”: “function() { return 200 * 0.05; }” } ͜Εʹؔͯ͠͸ɺͦ΋ͦ΋ग़དྷͳ͍
  12. +40/ͱΦϒδΣΫτͷҧ͍ʹ͍ͭͯ ͜ͷΑ͏ʹΦϒδΣΫτͱ+40/͸͔֬ʹɺࣅ͍ͯ·͕͢ ඍົͳࠩҧ͕͋Γ·͢ɻ ʮ+40/ͳΜͯ+BWB4DSJQUͷ ΦϒδΣΫτͱҰॹͰ͠ΐ?R?ʯ ͳΜͯஏ͔͍ͣ͜͠ͱ͸ݴΘͳ͍Α͏ʹ஫ҙ͠·͠ΐ͏

  13. 4FODIB&YU+4ɾ5PVDIͰଟ༻͞Ε͍ͯΔ ൺֱԋࢉࢠΛ༻͍ͨม਺ͷॳظԽʹ͍ͭͯ

  14. ม਺ͷॳظԽͬͯʁ ࣗ෼͕ॻ͍͍ͯΔίʔυ಺ͷॲཧͰ࢖༻͍ͯ͠Δ ม਺͕ɺԿ͔͠ΒͷݪҼͰηοτ͞Εͣ VOEFpOFE·ͨ͸OVMM͕ηοτ͞Εͯ͠·ͬͨ ৔߹ʹɺͦͷޙͷॲཧͰͦͷม਺ͷϓϩύςΟͳ ͲʹΞΫηεˠෆਖ਼ࢀরΤϥʔͱͳΔͷΛ๷͙ͨ ΊॳظԽΛߦ͍·͢ function init(obj) {

    if (obj.name) { // error !! ;( return true; } return false; } init(null);
  15. ม਺ͷॳظԽͬͯʁ function init(obj) { if (!obj) { obj = {};

    } if (obj.name) { return true; } return false; } init(null); // false ࣗ෼͕ॻ͍͍ͯΔίʔυ಺ͷॲཧͰ࢖༻͍ͯ͠Δ ม਺͕ɺԿ͔͠ΒͷݪҼͰηοτ͞Εͣ VOEFpOFE·ͨ͸OVMM͕ηοτ͞Εͯ͠·ͬͨ ৔߹ʹɺͦͷޙͷॲཧͰͦͷม਺ͷϓϩύςΟͳ ͲʹΞΫηεˠෆਖ਼ࢀরΤϥʔͱͳΔͷΛ๷͙ͨ ΊॳظԽΛߦ͍·͢
  16. 4FODIB&YU+4ɾ5PVDIͰଟ༷͞Ε͍ͯΔॳظԽํ๏ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false $PPM
  17. ͳͥ͜ΕͰॳظԽͰ͖Δͷ͔ʁ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false +BWB4DSJQUʹ͸ ҎԼͷΑ͏ͳൺֱԋࢉࢠ͕͋Γ·͢ɻ w "/%྆ํ͕USVFͰ͋Ε͹USVF w ίʔυྫɿม਺໊ม਺໊ w 03ͲͪΒ͔͕USVFͰ͋Ε͹USVF w ίʔυྫɿม਺໊||ม਺໊ w /05GBMTFͰ͋Ε͹USVF w ίʔυྫɿม਺໊ ͔ͩΒͳʹʁ
  18. ͳͥ͜ΕͰॳظԽͰ͖Δͷ͔ʁ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false +BWB4DSJQUʹ͸ ҎԼͷΑ͏ͳൺֱԋࢉࢠ͕͋Γ·͢ɻ w "/%྆ํ͕USVFͰ͋Ε͹USVF w ίʔυྫɿม਺໊ม਺໊ w 03ͲͪΒ͔͕USVFͰ͋Ε͹USVF w ίʔυྫɿม਺໊||ม਺໊ w /05GBMTFͰ͋Ε͹USVF w ίʔυྫɿม਺໊ ͔ͩΒͳʹʁ 
  19. 03ԋࢉࢠ࢖ͬͯॳظԽͯ͠Δͷ͔ŋŋŋɺԿނŋŋŋʁ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false ઌ΄ͲྫΛڍ͛ͨ"/%ͱ03ʹ͍ͭͯ͸ɺগ͠ಛ ௃͕͋Γ·͢ɻ ͦΕ͸ŋŋŋ ม਺͕ධՁ͞ΕΔॱ൪Ͱ͢ʂ ͜ͷҧ͍Λ͏·͍͜ͱར༻ͯ͠ɺॳظԽʹར༻͠ ͍ͯΔͷͰ͢ɻ
  20. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false "/%ԋࢉࢠͷධՁͷॱ൪ ·ͣ"/%͸ɺඞͣͲͪΒ΋USVFͰͳ͚Ε͹͍͚· ͤΜɻҎԼͷࣜ͸ɺGBMTF͕ฦ͖ͬͯ·͢ɻ GBMTFUSVF
  21. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false ධՁͷॱং ্ه͕ධՁͷॱͰ͢ɻઌ಄͔ΒධՁ͞Ε݁Ռ͕ฦ ͞ΕΔྲྀΕʹͳΓ·͢ɻ͔͠͠"/%ͷ৔߹ɺઌ಄ ͕GBMTFͷ࣌఺Ͱ݁Ռ͕֬ఆ͠·͢ͷͰ ม਺໊ม਺໊ 1 2 GBMTFUSVF 1 2 ൪ͷΈධՁ͞ΕɺͦΕҎ߱͸ධՁ͞Εͳ͍
  22. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false 03ԋࢉࢠͷධՁͷॱ൪ ·ͣ03͸ɺͲͪΒ͔͕USVFͰ͋Ε͹USVFΛฦ͠· ͢ɻҎԼͷࣜ͸ɺUSVF͕ฦ͖ͬͯ·͢ɻ GBMTFccUSVF
  23. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false ධՁͷॱং ॱ൪ࣗମ͸"/%ͱಉ͡Ͱ͢ɻͨͩɺൺֱ࣌ͷ৚݅ ͕ͲͪΒ͔͕USVFͰ͋Ε͹ͱ͍͏৚݅ͳͷͰŋŋŋ ม਺໊ccม਺໊ 1 2 GBMTFccUSVF 1 ࠷ޙ·Ͱൺֱ͞ΕΔʂʂ ਺஋ͳͲΛ࢖ͬͯ΍Δͱ෼͔Γ΍͍͢ͷͰ͕͢ 2
  24. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false 03ԋࢉࢠͷධՁॱͷ֬ೝ cc $POTPMFͰҎԼͷࣜΛ࣮ߦ͢Δͱ ͕ฦ͖ͬͯ·͢ΑͶɻ Ͱ͸࣍͸Ͳ͏Ͱ͠ΐ͏ɻ VOEFpOFEcc\^ VOEFpOFE͸ɺධՁ͞Εͨࡍ͸GBMTFʹͳΓͭ໨ ʹࢦఆ͍ͯ͠ΔۭͷΦϒδΣΫτ͕ฦ͖ͬͯ·͢
  25. 4FODIB&YU+4ɾ5PVDIͰଟ༷͞Ε͍ͯΔॳظԽํ๏ VOEFpOFEcc\^ VOEFpOFE͸ɺධՁ͞Εͨࡍ͸ GBMTFʹͳΓͭ໨ʹࢦఆ͍ͯ͠Δۭ ͷΦϒδΣΫτ͕ฦ͖ͬͯ·͢ function init(obj) { var data

    = obj || {}; if (data.name) { return true; } return false; } init(null); // false ͜ΕͰ͢
  26. ίϯετϥΫλʹ͍ͭͯ

  27. ίϯετϥΫλʁ ίϯετϥΫλͱ͸ɺఆٛ͞Ε͍ͯΔΫϥε͕ੜ ੒͞ΕΔࡍʹɺ࠷ॳʹ࣮ߦ͞ΕΔॳظԽॲཧʹͳ Γ·͢ɻ +BWB4DSJQUʹΫϥε͸ଘࡏ͠·ͤΜ͕ɺؔ਺Φϒ δΣΫτͱOFXԋࢉࢠΛ࢖༻͢Δ͜ͱʹΑΓɺಉ ͡Α͏ͳ΋ͷΛ࣮૷͢Δ͜ͱ͕ՄೳͰ͢ɻ function UgObject() {

    // initialize code .... } var ug = new UgObject();
  28. ίϯετϥΫλʁ 0CKFDU ΍"SSBZ ΋ɺ+BWB4DSJQUʹඪ४Ͱ૊ Έࠐ·Ε͍ͯΔίϯετϥΫλؔ਺Ͱ͢ɻ ͦͷଞʹ΋ɺӈʹྫ͕͋ΔΑ͏ʹϢʔβ͕޷͖ͳ Α͏ʹίϯετϥΫλؔ਺Λ࡞੒͢Δ͜ͱ΋Մೳ Ͱ͢ɻ ܁Γฦ͠ʹͳΓ·͕͢ɺίϯετϥΫλؔ਺ͷ໾ ໨͸ɺΦϒδΣΫτॳظԽ͢Δ͜ͱͰ͢ɻ

    function UgObject() { // initialize code .... this.x = 100; this.y = 200; this.name = ‘ug’; this.getName = function() { return this.name; } } var ug = new UgObject();
  29. ԿނίϯετϥΫλΛ࢖͏͔ લճͷ6(Ͱ΋৮Ε·͕ͨ͠ɺΦϒδΣΫτ͸ࢀর ౉͠Ͱ͢ɻ ӈͷίʔυΛ࣮ߦͨ͠ࡍʹɺग़ྗ͞ΕΔͷ͸Ͳͷ Α͏ͳ஋ʹͳΔͰ͠ΐ͏͔ɻ console.log(ug1.x); // 200 console.log(ug2.x); //

    200 ΦϒδΣΫτ͸ɺࢀর౉͠ͳͷͰVH΋VH΋஋ ͕มߋ͞Εͯ͠·͍·͢ɻ function UgObject() { // initialize code .... this.x = 100; this.y = 200; } var ug = new UgObject(); var ug1 = ug; var ug2 = ug; ug1.x = 200; console.log(ug1.x); console.log(ug2.x);
  30. ԿނίϯετϥΫλΛ࢖͏͔ ͜ͷ໰୊Λճආ͢ΔҝʹOFXԋࢉࢠΛར༻͠·͢ɻOFXԋࢉࢠ͸ɺΦϒδ ΣΫτͷ࣮ଶΛෳ੡ͯ͘͠ΕΔͨΊɺ࡞੒ͨ͠ΦϒδΣΫτ͕ͦΕͧΕผͷ ࢀরʹͳΔͷͰ͢ɻ function UgObject() { // initialize code

    .... this.x = 100; this.y = 200; } var ug1 = new UgObject(); var ug2 = new UgObject(); ug1.x = 200; ug2.x = 0; console.log(ug1.x); //200 console.log(ug2.x); // 0
  31. ϓϩτλΠϓʹ͍ͭͯ

  32. ϓϩτλΠϓͬͯʁ +BWB4DSJQU͸ϓϩτλΠϓϕʔεͷΦϒδΣΫτࢦ޲ݴޠͳͷͰɺΦϒδ ΣΫτ͸ผͷΦϒδΣΫτΛϓϩτλΠϓͱͯ͠Ͱ͖͍ͯΔͱߟ͑·͢ɻ +BWB4DSJQUͰ͸͜ΕΛ҉໧ͷࢀরͱ͍͏ܗͰ࣮ݱ͍ͯ͠·͢ɻΦϒδΣΫ τ"ΛϓϩτλΠϓͱ͍ͯ͠ΔΦϒδΣΫτ#͸ɺΦϒδΣΫτ"ʹର͠҉ ໧ͷࢀরΛ͍࣋ͬͯΔͱ͍͏ঢ়ଶʹͳΓ·͢ɻ

  33. ϓϩτλΠϓͬͯʁ +BWB4DSJQU͸ϓϩτλΠϓϕʔεͷΦϒδΣΫτࢦ޲ݴޠͳͷͰɺΦϒδ ΣΫτ͸ผͷΦϒδΣΫτΛϓϩτλΠϓͱͯ͠Ͱ͖͍ͯΔͱߟ͑·͢ɻ +BWB4DSJQUͰ͸͜ΕΛ҉໧ͷࢀরͱ͍͏ܗͰ࣮ݱ͍ͯ͠·͢ɻΦϒδΣΫ τ"ΛϓϩτλΠϓͱ͍ͯ͠ΔΦϒδΣΫτ#͸ɺΦϒδΣΫτ"ʹର͠҉ ໧ͷࢀরΛ͍࣋ͬͯΔͱ͍͏ঢ়ଶʹͳΓ·͢ɻ ͏Μɺ෼͔ΒΜɻ

  34. ෼͔Βͳ͍ͷͰਤʹ͠·͠ΐ͏ function RectClass() { this.width = 200; this.height = 150;

    } var rect = new RectClass(); rect width: 200 height: 150 ͜Ε͸͋Δཁૉͷߏ଄Λද͢ΦϒδΣΫ τͰ͢ɻ
  35. ෼͔Βͳ͍ͷͰਤʹ͠·͠ΐ͏ +BWB4DSJQUͷؔ਺ΦϒδΣΫτ͸ඞͣQSPUPUZQFϓϩύςΟΛ͍࣋ͬͯ·͢ function BlockClass() {} BlockClass.prototype = rect; var block

    = new BlockClass(); rect width: 200 height: 150 ઌ΄ͲͷSFDUΦϒδΣ ΫτΛ#MDPL$MBTTͷ QSPUPUZQFʹઃఆ block prototype { block.width // ? block.height // ? block.x // ?
  36. ෼͔Βͳ͍ͷͰਤʹ͠·͠ΐ͏ CMPDL͸QSPUPUZQFʹΑΓɺSFDU΁ͷ҉໧ͷࢀরΛ͍࣋ͬͯΔͷͰ࣍ͷΑ͏ʹͳ Γ·͢ rect block prototype { block.width // 200

    block.height // 150 block.x // undefined
  37. ෼͔Βͳ͍ͷͰਤʹ͠·͠ΐ͏ Ͳ͏Ώ͏͜ͱ͔ͱ͍͏ͱɹ rect block prototype rect width: 200 height: 150

    block.width → block.prototype.width block.height → block.prototype.height block.x → block.prototype.x ͦͷΦϒδΣΫτࣗମʹɺࢀরͨ͠ύϥϝʔλ͕ઃఆ͞Ε͍ͯͳ͍৔߹ɺϓϩ τλΠϓΛࢀর͠ɺͦͷύϥϝʔλ͕ଘࡏ͢Δ͔ධՁ͞Ε·͢
  38. ෼͔Βͳ͍ͷͰਤʹ͠·͠ΐ͏ ઌ΄ͲͷίϯετϥΫλΛগ͠มߋͯ͠Έ·͠ΐ͏ function BlockClass() { this.width = 300; } BlockClass.prototype

    = rect; var block = new BlockClass(); block prototype { block.width // ? block.height // ? rect width: 300
  39. ෼͔Βͳ͍ͷͰਤʹ͠·͠ΐ͏ ͜ΜͲ͸ɺCMPDLΦϒδΣΫτࣗମʹXJEUI͸ઃఆ͞Ε͍ͯΔҝɺͦΕ͕ࢀর͞ ΕɺIFJHIU͸ઃఆ͞Ε͍ͯͳ͍ҝQSPUPUZQF͕ࢀর͞Ε·͢ɻ rect block prototype { block.width // 300

    block.height // 150 width: 300
  40. ͪΐͬͱدΓಓ +BWB4DSJQUʹ͸ɺΦϒδΣΫτʹରͯ͠ࢦఆͨ͠ϓϩύςΟ͕ଘࡏ͢Δ͔Λν ΣοΫ͢ΔɺIBT0XO1SPQFSUZͱ͍͏ϝιου͕͋Γ·͢ɻ ͜ΕΛઌ΄Ͳੜ੒ͨ͠CMPDLΦϒδΣΫτʹ࢖ͬͯΈ·͠ΐ͏ɻ { block.hasOwnProperty(width); // ? block.hasOwnProperty(height); //

    ? rect block prototype width: 300
  41. ͪΐͬͱدΓಓ ݁Ռ͸ɺҎԼͷΑ͏ʹͳΓ·͢ rect block prototype { block.hasOwnProperty(width); // true block.hasOwnProperty(height);

    // false width: 300 XJEUIϓϩύςΟ͸CMPDLΦϒδΣΫτࣗମʹଘࡏ͠·͕͢ɺXJEUIϓϩύςΟ ʹؔͯ͠͸ɺ͋͘·ͰQSPUPUZQFʹઃఆ͞Ε͍ͯΔ஋Ͱ͋ͬͯɺCMPDLΦϒδΣ Ϋτࣗ਎ʹ͸ଘࡏ͍ͯ͠ͳ͍ҝ͜ͷΑ͏ͳ݁ՌʹͳΓ·͢
  42. Ͱ͸ɺ໭Γ·͢ ઌ΄ͲͷCMPDLΦϒδΣΫτΛQSPUPUZQFʹઃఆ͠ɺ৭৘ใΛ࣋ͨͤͨ $PMPS#MPDL$MBTTΛ࡞੒͠·͢ function ColorBlockClass() { this.color = 0xFF0000; }

    ColorBlockClass.prototype = block; var colorblock = new ColorBlockClass(); colorblock prototype colorblock.width // ? colorblock.height // ? colorblock.color // ? block color: 0xFF0000
  43. ෼͔Βͳ͍ͷͰਤʹ͠·͠ΐ͏ ͦΕͧΕͷ஋͸࣍ͷΑ͏ʹͳΓ·͢ { colorblock.width // 300 colorblock.height // 150 colorblock.color

    // 0xFF0000 colorblock prototype block color: 0xFF0000
  44. ·ͱΊ ͜ͷΑ͏ʹɺϓϩτλΠϓʹઃఆͨ͠஋Λ { colorblock.color colorblock prototype block color: 0xFF0000

  45. ·ͱΊ ͜ͷΑ͏ʹɺϓϩτλΠϓʹઃఆͨ͠஋Λ࣍ʑͱ { colorblock.width colorblock prototype block color: 0xFF0000 rect

    block prototype width: 300
  46. ·ͱΊ ͜ͷΑ͏ʹɺϓϩτλΠϓʹઃఆͨ͠஋Λ࣍ʑͱࢀর͍ͯ͘͠ܗΛϓϩτλΠ ϓνΣʔϯͱݺͼ·͢ɻ rect width: 200 height: 150 { colorblock.height

    colorblock prototype block color: 0xFF0000 rect block prototype width: 300
  47. Ҏ্ɺ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠