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

Node.js v0.12で使えるようになるES6+の機能一覧

Yosuke Furukawa
PRO
October 29, 2014
110k

Node.js v0.12で使えるようになるES6+の機能一覧

ES6+カジュアルトーク資料です!!

Yosuke Furukawa
PRO

October 29, 2014
Tweet

Transcript

  1. Node.js v0.12Ͱ࢖͑ΔΑ͏
    ʹͳΔES6+ͷػೳҰཡ
    @yosuke_furukawa

    View Slide

  2. @yosuke_furukawa
    Node.jsϢʔβʔάϧʔϓ୅ද / DeNAॴଐ

    View Slide

  3. Node.js v0.12 (ES6ରԠঢ়گ)

    View Slide

  4. Node.js ͷ v0.12ϒϥϯνΛجʹϏϧυͯ֬͠ೝ
    ͪͳΈʹv0.12ͷݱ࣌఺Ͱͷv8ͷ

    ࠾༻όʔδϣϯ͸3.28

    View Slide

  5. v0.12Ͱ࡟আ͞ΕͨΦϓγϣϯ

    View Slide

  6. harmony_typeof

    View Slide

  7. typeof null == ‘null’
    ʹͳΔΑ͏ʹ͢Δౕ

    View Slide

  8. ΋ͱ͔Βඇਪ঑

    View Slide

  9. ΋ͱ͔Βඇਪ঑
    UZQFPGOVMMͷ࢓༷͸ࠓ·Ͱ௨
    ΓʹͳΔ༧ఆ͔ͩΒIBSNPOZ
    ͷౕ͸࢖Θͳ͍΄͏͕͍͍ͧ

    View Slide

  10. Brendan Eichᐌ͘
    classͷํ͕Ձ஋͕͋Δ͠ɺopt-inͷtypeof
    nullΛ”null”ʹ͢Δͷ͸খ͞ͳΞΠσΞͩɻ

    View Slide

  11. typeof null͸͜Ε͔Β΋ͣͬͱ
    “object”ͳͷͰ

    ҆৺͢ΔΑ͏ʹɻɻɻ

    View Slide

  12. v0.12Ͱ௥Ճ͞ΕͨΦϓγϣϯ

    View Slide

  13. harmony_arrow_functions

    View Slide

  14. Ξϩʔؔ਺ => Λ࢖͑ΔΑ͏
    ʹ͢ΔΦϓγϣϯ

    View Slide

  15. harmony_arrow_function
    // before
    var b = [1,2,3,4,5,6].map(function(x){ return x * x })
    // after
    var a = [1,2,3,4,5,6].map(x => x * x)

    View Slide

  16. harmony_arrow_function
    // before
    var b = [1,2,3,4,5,6].map(function(x){ return x * x })
    // after
    var a = [1,2,3,4,5,6].map(x => x * x)
    ؆қతʂʂ

    View Slide

  17. v0.12ͰσϑΥϧτʹͳͬͨػೳ

    View Slide

  18. Symbol

    View Slide

  19. ΦϒδΣΫτͷkeyʹར༻Ͱ͖Δ

    ಛघͳΦϒδΣΫτprivateͳ໊લͰΩʔ
    Λొ࿥ͨ͠Γɺিಥճආ͢Δͷʹ࢖͑Δɻ

    View Slide

  20. Symbol
    // ObjectΛ࡞Δ
    var obj = {
    name : “yosuke furukawa”,
    _name : “kaicho” // private fieldͬΆ͍ͨ͘͠ɺ֎͔ΒࢀরͰ͖ͪΌ͏
    };

    View Slide

  21. Symbol
    // ObjectΛ࡞Δ
    var obj = {
    name : “yosuke furukawa”,
    _name : “kaicho” // private fieldͬΆ͍ͨ͘͠
    };
    // SymbolΛ࢖ͬͯ࡞Δ
    var _name = Symbol(“_name”)
    var obj = {
    name : “yosuke furukawa”,
    };
    obj[_name] = “kaicho”

    View Slide

  22. Symbol
    // ObjectΛ࡞Δ
    var obj = {
    name : “yosuke furukawa”,
    _name : “kaicho” // private fieldͬΆ͍ͨ͘͠
    };
    // SymbolΛ࢖ͬͯ࡞Δ
    var _name = Symbol(“_name”)
    var obj = {
    name : “yosuke furukawa”,
    };
    obj[_name] = “kaicho”
    @OBNFͷ໊લۭؒ֎͔Β@OBNFΠϯελϯεΛ
    ࢖͑ͳ͍ͨΊɺQSJWBUFͬΆ͘Ͱ͖Δ
    DPOTPMFMPHͰ΋ݟ͑ͳ͍

    View Slide

  23. Collections

    View Slide

  24. Map/Setͱ͍ͬͨίϨΫγϣϯ

    (WeakMap/WeakSetؚΉ)

    View Slide

  25. Collection
    // MapΛ࡞Δ
    var map = new Map();
    map.set(‘yosuke’, 'JavaScript')
    map.get(‘yosuke’) // ‘JavaScript’
    map.keys() // keyͷIterator
    for (var k of map.keys()) {console.log(k)}
    map.values() // valueͷIterator
    for (var v of map.values()) {console.log(v)}
    map.has(‘yosuke’) // true
    // forEach΋Ͱ͖Δ
    map.forEach((k, v) => console.log(k,v))

    View Slide

  26. Collection
    // SetΛ࡞Δ
    var set = new Set();
    set.add(“yosuke”)
    set.add(“furukawa”)
    set.forEach(x => console.log(x))
    // ࣮͸keysͱvaluesϝιου΋͋Δ
    for (var k of set.keys()) {console.log(k)}
    for (var v of set.values()) {console.log(v)}

    View Slide

  27. Collection
    // SetΛ࡞Δ
    var set = new Set();
    set.add(“yosuke”)
    set.add(“furukawa”)
    set.forEach(x => console.log(x))
    // ࣮͸keysͱvaluesϝιου΋͋Δ
    for (var k of set.keys()) {console.log(k)}
    for (var v of set.values()) {console.log(v)}
    4FU .BQ͕࢖͑ΔΑ͏ʹͳͬͨɻ

    View Slide

  28. for-of

    View Slide

  29. Iterableͳ΋ͷΛ܁ΓฦͤΔ
    for-ofจ͕࢖͑ΔΑ͏ʹͳͬͨ

    View Slide

  30. for-of
    var res = [];
    for (var element of [1, 2, 3]) {
    res.push(element * element);
    }
    console.log(res); // [1, 4, 9]

    View Slide

  31. Symbol.Iterator
    // 1000·Ͱͷ஋Λฦ͢fibonacciΛ࡞Δ
    var fibonacci = {
    // Symbol.iteratorΛ࣋ͭϝιουΛ࣋ͭΦϒδΣΫτʹ͢Δ
    [Symbol.iterator]() {
    let pre = 0, cur = 1;
    // iteratorΦϒδΣΫτ͸ nextϝιουΛ࣋ͭΦϒδΣΫτΛฦ͢
    return {
    next() {
    [pre, cur] = [cur, pre + cur];
    if (pre < 1000) return { done: false, value: pre };
    return { done: true };
    }
    }
    }
    }
    for (var n of fibonacci) {
    console.log(n);
    }

    View Slide

  32. Symbol.Iterator
    // 1000·Ͱͷ஋Λฦ͢fibonacciΛ࡞Δ
    var fibonacci = {
    // Symbol.iteratorΛ࣋ͭϝιουΛ࣋ͭΦϒδΣΫτʹ͢Δ
    [Symbol.iterator]() {
    let pre = 0, cur = 1;
    // iteratorΦϒδΣΫτ͸ nextϝιουΛ࣋ͭΦϒδΣΫτΛฦ͢
    return {
    next() {
    [pre, cur] = [cur, pre + cur];
    if (pre < 1000) return { done: false, value: pre };
    return { done: true };
    }
    }
    }
    }
    for (var n of fibonacci) {
    console.log(n);
    }
    *UFSBUPSͱ૊Έ߹ΘͤΔ͜ͱͰGPSPGͰճͤΔΑ
    ͏ʹͳΔ

    View Slide

  33. generator for-of
    // 1000·Ͱͷ஋Λฦ͢fibonacciΛ࡞Δ
    function* fibonacci(){
    let pre = 0, cur = 1;
    while (pre < 1000) {
    // ͜͜ͰdestructuringͰ஋Λswapͤ͞Δɻ
    [pre, cur] = [cur, pre + cur];
    // yieldͰ஋Λฦ͢
    yield pre;
    }
    }
    for (let n of fibonacci()) {
    console.log(n);
    }

    View Slide

  34. generator for-of
    // 1000·Ͱͷ஋Λฦ͢fibonacciΛ࡞Δ
    function* fibonacci(){
    let pre = 0, cur = 1;
    while (pre < 1000) {
    // ͜͜ͰdestructuringͰ஋Λswapͤ͞Δɻ
    [pre, cur] = [cur, pre + cur];
    // yieldͰ஋Λฦ͢
    yield pre;
    }
    }
    for (let n of fibonacci()) {
    console.log(n);
    }
    HFOFSBUPSͱGPSPGΛ૊Έ߹ΘͤΔ͜ͱͰΑΓ؆
    ܿʹJUFSBCMFͳ΋ͷΛ࡞Δ͜ͱ͕Մೳ

    View Slide

  35. Promise

    View Slide

  36. ඇಉظؔ਺ΛPromiseͰϥοϓ
    ͯ͠ݺͼ΍͘͢ͳͬͨ

    View Slide

  37. Promise
    function timeout(ms) {
    // Promiseͷresolveؔ਺Λड͚औΔ
    return new Promise((onFulfilled, onRejected) => {
    // 50%ͷ֬཰ͰonFulfilled, onRejected͕ݺ͹ΕΔ
    setTimeout(() => Math.random() > 0.5 ? onFulfilled() : onRejected(),
    ms);
    });
    }
    function log() {
    console.log('done');
    }
    function error() {
    console.log('error');
    }
    // onFulfilled͕ग़ͨΒdoneɺonRejectedͩͬͨΒerrorͱදࣔ͢Δ
    timeout(100).then(log).catch(error)

    View Slide

  38. Promise
    function timeout(ms) {
    // Promiseͷresolveؔ਺Λड͚औΔ
    return new Promise((onFulfilled, onRejected) => {
    // 50%ͷ֬཰ͰonFulfilled, onRejected͕ݺ͹ΕΔ
    setTimeout(() => Math.random() > 0.5 ? onFulfilled() : onRejected(),
    ms);
    });
    }
    function log() {
    console.log('done');
    }
    function error() {
    console.log('error');
    }
    // onFulfilled͕ग़ͨΒdoneɺonRejectedͩͬͨΒerrorͱදࣔ͢Δ
    timeout(100).then(log).catch(error)
    1SPNJTFΛ࢖͏͜ͱͰඇಉظॲཧͷهड़खஈ͕
    ૿͍͑ͯΔɻ

    View Slide

  39. Object.Observe (ES7)

    View Slide

  40. Object.observeͰΦϒδΣΫ
    τͷ؂ࢹΛߦ͑Δ

    View Slide

  41. Object.observe
    var todos = ["eat","code","code","sleep"];
    // Using Array.observe
    Array.observe(todos,function(changes) { console.log(changes); })
    todos.pop() // sleep
    // ؂ࢹ͍ͯ͠ΔΦϒδΣΫτͷԿ͕ߋ৽͞Εͨͷ͔͕෼͔Δ
    // [ { type: 'splice',
    // object: [ 'eat', 'code', 'code' ],
    // index: 3,
    // removed: [ 'sleep' ],
    // addedCount: 0 } ]

    View Slide

  42. Object.observe
    var todos = ["eat","code","code","sleep"];
    // Using Array.observe
    Array.observe(todos,function(changes) { console.log(changes); })
    todos.pop() // sleep
    // ؂ࢹ͍ͯ͠ΔΦϒδΣΫτͷԿ͕ߋ৽͞Εͨͷ͔͕෼͔Δ
    // [ { type: 'splice',
    // object: [ 'eat', 'code', 'code' ],
    // index: 3,
    // removed: [ 'sleep' ],
    // addedCount: 0 } ]
    ΦϒδΣΫτͷߋ৽ݕ஌͕؆୯ʹͰ͖Δʂʂ

    View Slide

  43. ͋ͱ͸·ͩඇσϑΥϧτͷ··

    View Slide

  44. ·ͱΊΔͱ

    View Slide

  45. harmony_typeof͕ফ͑ͨ

    View Slide

  46. harmony_arrow_functions͕௥Ճ

    View Slide

  47. Symbol
    Collections
    for-of
    Promise
    Object.observe

    View Slide

  48. Symbol
    Collections
    for-of
    Promise
    Object.observe
    σϑΥϧτͰ࢖͑ΔΑ͏ʹͳͬͨʂ

    View Slide

  49. class
    let
    generator
    String template

    ଴ͪ๬·Ε͍ͯΔػೳ

    View Slide

  50. class
    let
    generator
    String template

    ଴ͪ๬·Ε͍ͯΔػೳ
    WҎ߱ʹظ଴ʂʂ

    View Slide