$30 off During Our Annual Pro Sale. View Details »

ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy

tipo159
February 22, 2018

ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy

・Proxy概要
・Vue 3のProxy関連情報
・メタプログラミング

tipo159

February 22, 2018
Tweet

More Decks by tipo159

Other Decks in Programming

Transcript

  1. &4ͷ1SPYZΛ࢖ͬͯΈͨ
    8F"SF+BWB4DSJQUFST!UI

    UJQP

    View Slide

  2. ΞδΣϯμ
    w ͳͥ1SPYZʹ͍ͭͯ࿩͢ͷ͔
    w 1SPYZ֓ཁ
    w 7VFͷ1SPYZؔ࿈৘ใ
    w ϝλϓϩάϥϛϯά
    2

    View Slide

  3. ͳͥ1SPYZʹ͍ͭͯ࿩͢ͷ͔
    w 3FHBSEJOHUIFCSPLFOQSPNJTFPG8FC
    $PNQPOFOUTͰ࠶ൃݟ
    w &4ͷղઆهࣄͰݟͨ͜ͱ͸͕͋ͬͨɺ࢖ͬͨ͜ͱ
    ͸ͳ͔ͬͨ
    http://robdodson.me/regarding-the-broken-promise-
    of-web-components/
    w ௐ΂ͯΈΔͱɺ7VFʹ࠾༻͞ΕΔΑ͏ͳͷͰ঺հ
    3

    View Slide

  4. 1SPYZ֓ཁ
    w جຊతͳૢ࡞ ྫ͑͹ϓϩύςΟͷݕࡧɺ୅ೖɺྻڍɺؔ਺ͷىಈͳ
    Ͳ
    ʹ͍ͭͯಠࣗͷಈ࡞Λఆٛ
    wߏจ
    var p = new Proxy(target, handler);
    wҾ਺
    target
    λʔήοτͷΦϒδΣΫτ·ͨ͸ɺ1SPYZͰϥοϓ͢Δؔ਺
    handler
    ؔ਺ΛϓϩύςΟͱͯ࣋ͭ͠ΦϒδΣΫτ
    ͦͷؔ਺Ͱɺ1SPYZʹରͯ͠ૢ࡞͕ߦΘΕͨ৔߹ͷڍಈΛఆٛ
    w ิ଍
    QͱUBSHFU͸ಉ໊͡લͰ΋Α͍
    4

    View Slide

  5. 1SPYZͷαϯϓϧίʔυ
    w ΦϒδΣΫτʹ౉͞Εͨ஋Λݕূ
    let validator = {
    set: function(obj, prop, value) {
    if (prop === 'age') {
    if (!Number.isInteger(value)) {
    throw new TypeError('年齢が整数ではありません');
    }
    }
    obj[prop] = value;
    }
    };
    let person = new Proxy({}, validator);
    person.age = 'young'; // 例外が投げられる
    5

    View Slide

  6. ϒϥ΢βͷαϙʔτঢ়گ
    6
    https://caniuse.com/#feat=proxy

    View Slide

  7. 7VFͷ1SPYZؔ࿈৘ใ
    w 7VF͸1SPYZͳͲͷ৽͍͠"1*Λ࢖͏ͨΊɺ*&ͳͲͷݹ͍ϒ
    ϥ΢βΛαϙʔτ͠ͳ͍
    IUUQTIBTIOPEFDPNBNBXJUIWVFKTUFBN
    DKJUMSLJBFXVWST
    w 3FBDUJWJUZJO7VFKTWT7VFKT
    w 7VFKTͰ͸ɺ഑ྻͷϓϩύςΟ΁ͷ஋ͷઃఆ΍ಈతͳϓϩύ
    ςΟͷ௥ՃΛ7VFTFUͰߦ͏ඞཁ͕͋Δ
    w 7VFKTͰ͸ɺ഑ྻͷϓϩύςΟ΁ͷ஋ͷઃఆ΍ಈతͳϓϩύ
    ςΟͷ௥Ճ΋1SPYZͰଞͷϓϩύςΟͱಉ༷ʹѻ͑Δ
    IUUQTCMPHDMPVECPPTUJPSFBDUJWJUZJOWVFKTWTWVFKT
    EDEEEDEG
    7

    View Slide

  8. ಈతଐੑ௥Ճͷίʔυ
    w 7VF
    Vue.set(this.$data, 'lastAddedName', 'John
    Elway');
    w 7VF
    data = new Proxy(data, {
    set: function(obj, prop, value) {
    if (obj[prop] !== value) {
    obj[prop] = value;
    }
    }
    });
    data.lastAddedName = 'John Elway';
    8

    View Slide

  9. ϝλϓϩάϥϛϯά
    w .FUBQSPHSBNNJOHJO&41BSU1SPYJFT
    https://www.keithcirkel.co.uk/metaprogramming-
    in-es6-part-3-proxies/
    w ແݶʹνΣΠϯՄೳͳ"1*࡞੒
    w NFUIPENJTTJOHϑοΫ࣮૷
    w ྻڍܕ͔ΒHFU0XO1SPQFSUZ/BNFT 0CKFDULFZT
    JOԋࢉࢠ౳ΛӅณ
    w 0CTFSWFSύλʔϯ 0CKFDUPCTFSWF
    ͷ࣮૷
    9

    View Slide