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

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 +BWB4DSJQU
   0CKFDU
   /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 /05
    
    GBMTFͰ͋Ε͹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 /05
    
    GBMTFͰ͋Ε͹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͕ฦ͖ͬͯ·͢ɻ GBMTF
    
    USVF
21. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {}; if (data.name) { return true; } return false; } init(null); // false ධՁͷॱং ্ه͕ධՁͷॱͰ͢ɻઌ಄͔ΒධՁ͞Ε݁Ռ͕ฦ ͞ΕΔྲྀΕʹͳΓ·͢ɻ͔͠͠"/%ͷ৔߹ɺઌ಄ ͕GBMTFͷ࣌఺Ͱ݁Ռ͕֬ఆ͠·͢ͷͰ ม਺໊
    
    ม਺໊ 1 2 GBMTF
    
    USVF 1 2 ൪ͷΈධՁ͞ΕɺͦΕҎ߱͸ධՁ͞Εͳ͍
22. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {}; if (data.name) { return true; } return false; } init(null); // false 03ԋࢉࢠͷධՁͷॱ൪ ·ͣ03͸ɺͲͪΒ͔͕USVFͰ͋Ε͹USVFΛฦ͠· ͢ɻҎԼͷࣜ͸ɺUSVF͕ฦ͖ͬͯ·͢ɻ GBMTF
    cc
    USVF
23. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {}; if (data.name) { return true; } return false; } init(null); // false ධՁͷॱং ॱ൪ࣗମ͸"/%ͱಉ͡Ͱ͢ɻͨͩɺൺֱ࣌ͷ৚݅ ͕ͲͪΒ͔͕USVFͰ͋Ε͹ͱ͍͏৚݅ͳͷͰŋŋŋ ม਺໊
    cc
    ม਺໊ 1 2 GBMTF
    cc
    USVF 1 ࠷ޙ·Ͱൺֱ͞ΕΔʂʂ ਺஋ͳͲΛ࢖ͬͯ΍Δͱ෼͔Γ΍͍͢ͷͰ͕͢ 2
24. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {}; if (data.name) { return true; } return false; } init(null); // false 03ԋࢉࢠͷධՁॱͷ֬ೝ 
    cc
     $POTPMFͰҎԼͷࣜΛ࣮ߦ͢Δͱ ͕ฦ͖ͬͯ·͢ΑͶɻ Ͱ͸࣍͸Ͳ͏Ͱ͠ΐ͏ɻ VOEFpOFE
    cc
    \^ VOEFpOFE͸ɺධՁ͞Εͨࡍ͸GBMTFʹͳΓͭ໨ ʹࢦఆ͍ͯ͠ΔۭͷΦϒδΣΫτ͕ฦ͖ͬͯ·͢
25. 4FODIB
    &YU
    +4ɾ5PVDIͰଟ༷͞Ε͍ͯΔॳظԽํ๏ VOEFpOFE
    cc
    \^ 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. Ҏ্ɺ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠