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

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

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