第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. Ҏ্ɺ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠