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

ECMAScript

Yuta Hiroto
November 21, 2016

 ECMAScript

Yuta Hiroto

November 21, 2016
Tweet

More Decks by Yuta Hiroto

Other Decks in Programming

Transcript

  1. ECMAScript
    2016/11/20 ALT

    View Slide

  2. ࣗݾ঺հ
    about_hiroppy
    abouthiroppy

    TEAMS

    View Slide

  3. JavaScriptͷඪ४
    ECMAScript
    Ecma International
    - ECMA-262
    - ECMA-402 specifications

    ecma-international.org
    /publications/standards/Standard

    View Slide

  4. Editions(only ECMA-262)

    • 1996/06 - ECMA-262 (ES 1)
    • 1998/08 - ECMA-262 (ES 2)
    • 1999/12 - ECMA-262 (ES 3)
    • 2009/12 - ECMA-262 (ES 5)
    • 2011/06 - ECMA-262 (ES 5.1)
    • 2015/06 - ECMA-262 2015 (ES 6)
    • 2016/06 - ECMA-262 2016 (ES 7)
    • 2017/?? - ECMAScript 2017 (8th Edition)
    developer.mozilla.org/ja/docs/Web/JavaScript/Language_Resources

    View Slide

  5. Editions(only ECMA-262)

    • 1996/06 - ECMA-262 (ES 1)
    • 1998/08 - ECMA-262 (ES 2)
    • 1999/12 - ECMA-262 (ES 3)
    • 2009/12 - ECMA-262 (ES 5)
    • 2011/06 - ECMA-262 (ES 5.1)
    • 2015/06 - ECMA-262 2015 (ES 6)
    • 2016/06 - ECMA-262 2016 (ES 7)
    • 2017/?? - ECMAScript 2017 (8th Edition)
    ࠓίί
    ES2015͔Βຖ೥ϦϦʔε

    ͞ΕΔΑ͏ʹܾఆ͞Εͨ
    ࡦఆத

    View Slide

  6. ECMA TC39

    ECMAScriptͷඪ४ԽΛ

    ߦ͏ҕһձ
    ओཁͳϒϥ΢βϕϯμʔ

    ͷ୅දͳͲ͕ࢀՃ͠

    ٞ࿦͍ͯ͠Δ

    View Slide

  7. TC39 Process

    stage-0
    stage-1
    stage-2
    stage-3
    stage-4
    Strawman
    Proposal
    Draft
    Candidate
    Finished
    tc39.github.io/process-document

    View Slide

  8. TC39 Process

    stage-1
    stage-2
    stage-3
    stage-4
    tc39.github.io/process-document
    stage-0 Strawman ΞΠσΞ
    tc39/proposalsͷstage-0΁

    PRΛग़͢ɻ
    TC39 championΛऔಘ͠
    tc39/proposals/blob/master/CONTRIBUTING.md#proposals

    View Slide

  9. TC39 Process

    stage-0
    stage-2
    stage-3
    stage-4
    tc39.github.io/process-document
    Proposal
    stage-1
    ௥Ճ͢ΔͨΊͷέʔε࡞੒

    (polyfills / demos)
    જࡏత՝୊ͷಛఆ

    View Slide

  10. TC39 Process

    stage-0
    stage-1
    stage-3
    stage-4
    tc39.github.io/process-document
    Draft
    stage-2
    ECMAScriptඪ४Λ࢖༻͠

    ߏจͱηϚϯςΟοΫͷ

    ਖ਼֬ͳઆ໌Λ͢Δɻ

    View Slide

  11. TC39 Process

    stage-0
    stage-1
    stage-2
    stage-4
    tc39.github.io/process-document
    stage-3 Candidate
    ࣮૷΍Ϣʔβ͔Βͷ

    ϑΟʔυόοΫΛٻΊΔɻ
    ͢΂ͯͷηϚϯςΟοΫɺ

    ߏจɺٴͼAPI͕ܾఆ͞ΕΔɻ

    View Slide

  12. TC39 Process

    stage-0
    stage-1
    stage-2
    stage-3
    tc39.github.io/process-document
    stage-4 Finished
    ਖ਼ࣜͳECMAScriptඪ४ʹ

    ؚΊΔ४උ͕Ͱ͖͍ͯΔ͜ͱ

    Λࣔ͢ɻ
    test262Ͱ࢖༻γφϦΦςετ͕

    ड୚ɺϚʔδ͞ΕΔඞཁ͕͋Δɻ
    2ͭҎ্ͷޓ׵࣮૷͕ඞཁɻ

    View Slide


  13. stage-4ͷProposal͸ਖ਼ࣜʹ

    ࣍ظECMAScriptͷ࢓༷ͱͳΔ

    View Slide

  14. Editions(only ECMA-262)

    • 1996/06 - ECMA-262 (ES 1)
    • 1998/08 - ECMA-262 (ES 2)
    • 1999/12 - ECMA-262 (ES 3)
    • 2009/12 - ECMA-262 (ES 5)
    • 2011/06 - ECMA-262 (ES 5.1)
    • 2015/06 - ECMA-262 2015 (ES 6)
    • 2016/06 - ECMA-262 2016 (ES 7)
    • 2017/?? - ECMAScript 2017 (8th Edition)

    View Slide

  15. ES2016
    • Array.prototype.includes
    • Exponentiation Operator

    const arr = [1, 2, 3];
    if (arr.includes(2)) {
    console.log('aru!');
    }
    if (2**3 === 8) {
    console.log('**');
    }

    View Slide

  16. ES2017
    • String.prototype.padStart

    String.prototype.padEnd
    • Object.values

    Object.entries
    • Object.getOwnPropertyDescriptors
    • Trailing Commas in Function Param Lists
    • Async Functions

    View Slide

  17. string padding

    'a'.padStart(5); // " a"
    'a'.padEnd(5); // "a "
    'a'.padStart(3, 'b'); // "bba"
    'a'.padEnd(3, 'b'); // "abb"
    จࣈຒΊΛߦ͏
    let num = 1;
    //
    `0${num}`.slice(-2); // 01
    // ☺
    num.toString().padStart(2, 0); // 01
    tc39/proposal-string-pad-start-end

    View Slide

  18. Object.values/Object.entries

    const obj = {
    name: 'hello',
    age: 24
    };
    Object.values(obj); // Array [ "hello", 24 ]
    Object.entries(ob); // Array [ [ "name", "hello" ], [ "age", 24 ] ]
    tc39/proposal-object-values-entries

    View Slide

  19. Object.

    getOwnPropertyDescriptors

    ࢦఆͨ͠ΦϒδΣΫτͷ

    ͢΂ͯͷPropertyDescriptors

    Λऔಘ͢Δ
    attributes
    - value
    - writable
    - get
    - set
    - configurable
    - enumerable
    const obj = {
    name: 'hello',
    age: 24
    };
    Object.getOwnPropertyDescriptors(obj);
    // Object { name: Object, age: Object }
    /*
    Object {
    name: {
    configurable: true,
    enumerable: true,
    value: "hello",
    writable: true
    },
    age: ...
    }
    */
    tc39/proposal-object-getownpropertydescriptors

    View Slide

  20. Trailing Commas 

    in Function Param Lists

    ΧϯϚΛڐ༰͢Δ͜ͱʹΑΓ

    มߋ࣌ʹ࠷ޙඌͷϓϩύςΟ

    ͷΞοϓσʔτ

    (ΧϯϚΛ෇͚Ճ͑Δ)Λ๷͙
    function post(
    p1,
    p2,
    ) {}
    post(
    'hoge',
    'fuga',
    );
    tc39/proposal-trailing-function-commas

    View Slide

  21. Async Functions

    tc39/proposal-async-iteration
    import 'babel-polyfill';
    (async () => {
    const str = await update();
    console.info(str);
    })().catch((err) => console.error(err));
    function update() {
    return new Promise((resolve, reject) => {
    setTimeout(() => resolve('finished!!'), 100);
    });
    }
    ඇಉظͳॲཧΛಉظత

    ʹهड़͢Δ͜ͱ͕Մೳ

    View Slide


  22. JavaScript͸͜Ε͔Β΋

    ͲΜͲΜਐԽ͍͖ͯ͠·͢ʂ

    View Slide

  23. Links
    • tc39/ecma262
    • tc39/proposals
    • tc39/agendas
    • tc39/tc39-notes
    • kangax.github.io/compat-table/es6/

    View Slide