Upgrade to Pro — share decks privately, control downloads, hide ads and more …

これだけは押さえておきたい ES2022の便利機能

これだけは押さえておきたい ES2022の便利機能

Qiita Night 〜フロントエンド〜 で発表した資料です

tonkotsuboy_com

October 21, 2022
Tweet

More Decks by tonkotsuboy_com

Other Decks in Programming

Transcript

  1. ͜Ε͚ͩ͸ԡ͓͖͍͑ͯͨ͞
    &4ͷศརػೳ
    ࣛ໺૖

    View full-size slide

  2. ϚωʔϑΥϫʔυϏδωεΧϯύχʔ

    ܦཧࡒ຿ϓϩμΫτຊ෦ϓϩμΫτ։ൃ෦෭෦௕

    ݉6*ςΫϊϩδʔάϧʔϓϦʔμʔ
    ࣛ໺૖ʢ͔ͷ͚ͨ͠ʣ
    !UPOLPUTVCPZ@DPN

    View full-size slide

  3. w ٕज़ධ࿦ࣾ+BWB4DSJQUίʔυϨγϐू
    w ೔ܦιϑτ΢ΣΞ
    w ೥݄߸ʮ8FCίʔσΟϯάज़ʯ
    w ೥݄߸ʮ࠷৽$44ʯ
    w ೥݄߸ʮ+BWB4DSJQU࠷৽࢓༷&4ʯ
    ࣥච͠·ͨ͠

    View full-size slide

  4. ͔Θ͍͍ೣͱ฻Βͯ͠·͢

    View full-size slide

  5. &4ͱ+BWB4DSJQU

    View full-size slide

  6. w &$."4DSJQUʢུশ͸&4ʣ
    w +BWB4DSJQUͷجຊͱͳΔݴޠʢίΞݴޠʣ
    w ྫɿJGจɺԋࢉࢠɺจࣈྻɺ഑ྻɺΫϥε
    w 8FC"1*
    w %0."1*
    w %0.ૢ࡞ͷͨΊ࢓૊Έ
    w ྫɿBMFSU
    จɺRVFSZ4FMFDUPS
    ϝιουɺBEE&WFOU-JTUFOFS
    ϝιου
    w $BOWBT"1*
    w 8FC8PSLFST"1*
    ʮ+BWB4DSJQUʯͱ͸

    View full-size slide

  7. w &4ʢ&4ʣ
    w DPOTU MFU Ξϩʔؔ਺ ςϯϓϨʔτจࣈྻ Ϋϥε 1SPNJTFͳͲ
    w &4
    w ΂͖৐ʢʣ ഑ྻJODMVEFT

    w &4
    w BTZOD BXBJU 0CKFDUFOUSJFT
    จࣈྻQBE4UBSU
    Ҿ਺ͷέπΧϯϚͳͲ
    w &4
    w ΦϒδΣΫτ༻εϓϨουԋࢉࢠʢʣ ਖ਼نදݱͷ/BNFE$BQUVSF(SPVQTͳͲ
    &4͸ຖ೥ਐԽΛଓ͚͍ͯΔ

    View full-size slide

  8. &4͸ຖ೥ਐԽΛଓ͚͍ͯΔ
    w &4
    w ഑ྻ
    fl
    BU
    จࣈྻUSJN4UBSU
    0CKFDUGSPN&OUSJFT
    USZDBUDIͷFSSPSΛলུՄೳͳͲ
    w &4
    w JNQPSU
    1SPNJTFBMM4FUUMFE
    จࣈྻNBUDI"MM
    #JH*OUͳͲ
    w &4
    w ਺஋Λ@Ͱ۠੾ΕΔ จࣈྻSFQMBDF"MM
    1SPNJTFBOZ
    ͳͲ


    View full-size slide

  9. ࠓ೥݄೔ʹ&4͕ਖ਼ࣜ࢓༷ʹͳͬͨ
    IUUQTXXXFDNBJOUFSOBUJPOBMPSHQVCMJDBUJPOTBOETUBOEBSETTUBOEBSETFDNB

    View full-size slide

  10. w ΫϥεϑΟʔϧυએݴ
    w ϓϥΠϕʔτͳϝϯόʔ
    w JOTUBODFPGͷ୅ΘΓͷJOʹΑΔʮCSBOEDIFDLʯ
    w τοϓϨϕϧͰͷBXBJU
    w ഑ྻͷ࠷ऴཁૉΛऔಘͰ͖ΔBU

    w IBT0XO1SPQFSUZ
    ͷ୅ΘΓͷ0CKFDUIBT0XO

    w TUBUJDΠχγϟϥΠβʔ
    w ΤϥʔΛνΣΠϯͰ͖ΔDBVTFϓϩύςΟ
    w ਖ਼نදݱͷEϑϥά
    &4ͷʮશʯ৽ػೳ

    View full-size slide

  11. ͭϐοΫΞοϓͯ͠঺հ͠·͢ɻ
    ʮԿ͕ศརͳͷ͔ʁʯ
    ʮͳͥͦΕ͕ඞཁͩͬͨͷ͔ʁʯ
    Λத৺ʹղઆ

    View full-size slide

  12. w0CKFDUIBT0XO

    w഑ྻBU

    wΤϥʔDBVTF

    View full-size slide

  13. 0CKFDUIBT0XO

    IBT0XO1SPQUFSZ
    ʹ୅ΘΔ

    ΦϒδΣΫτͷϓϩύςΟଘࡏνΣοΫ
    01

    View full-size slide

  14. w NZ0CKFDUͷதʹϓϩύςΟ͕͋Δ͔ΛνΣοΫ͍ͨ͠
    ΦϒδΣΫτͷϓϩύςΟͷଘࡏνΣοΫΛ͍ͨ͠
    const myObject = {


    name: "鈴⽊"


    }

    View full-size slide

  15. w ର৅ΦϒδΣΫτIBT0XO1SPQFSUZ
    ͸্ॻ͖Մೳ
    ैདྷͷIBT0XO1SPQFSUZ
    ͷةݥੑ
    const myObject = {


    name: "鈴⽊",


    hasOwnProperty: () => {


    // hasOwnPropertyが上書きされる


    return false;


    },


    }


    console.log(myObject.hasOwnProperty("name"));


    // nameはあるのに常にfalse👎

    View full-size slide

  16. w 0CKFDUQSPUPUZQFIBT0XO1SPQFSUZDBMM ΦϒδΣΫτ Ωʔ໊
    ͰରԠ
    w &4-JOUͷσϑΥϧτϧʔϧͰ΋ਪ঑
    ैདྷͷIBT0XO1SPQFSUZ
    ͷةݥੑ
    const myObject = {


    name: "鈴⽊",


    hasOwnProperty: () => {


    return false;


    },


    }


    Object.prototype.hasOwnProperty.call(myObject, 'name');


    // true👍

    View full-size slide

  17. w 0CKFDUIBT0XO ର৅ΦϒδΣΫτ Ωʔ໊

    w ϝιουͷ্ॻ͖͸Ͱ͖ͳ͍ͷͰ҆શ
    &40CKFDUIBT0XO

    const myObject = {


    name: "鈴⽊",


    hasOwn: () => {


    return false;


    },


    }


    Object.hasOwn(myObject, 'name');


    // true 👍

    View full-size slide

  18. w0CKFDUIBT0XO

    w഑ྻBU

    wΤϥʔDBVTF

    View full-size slide

  19. ഑ྻBU

    ࠷ऴཁૉͷऔಘ͕ϥΫʹ
    02

    View full-size slide

  20. w NZ"SSBZͷ࠷ऴཁૉΛऔಘ͢Δʹ͸ʁ
    ഑ྻͷ࠷ऴཁૉΛऔಘ͍ͨ͠
    const myArray = [
    { age: 18, name: "ాத" },
    { age: 24, name: "ླ໦" },
    { age: 32, name: "ޙ౻" },
    ];

    View full-size slide

  21. w NZ"SSBZͷ࠷ऴཁૉΛऔಘ͢Δʹ͸ʁ
    ഑ྻͷ࠷ऴཁૉΛऔಘ͍ͨ͠
    const myArray = [
    { age: 18, name: "ాத" },
    { age: 24, name: "ླ໦" },
    { age: 32, name: "ޙ౻" },
    ];

    View full-size slide

  22. ैདྷͷ഑ྻͷ࠷ऴཁૉऔಘ
    myArray[myArray.length - 1];

    View full-size slide

  23. w Ұ࣌ม਺ʹ֨ೲ͢Δඞཁ͕͋Δ
    w ʮ
    fi
    MUFS
    ͰߜΓࠐΜͩ഑ྻͷ࠷ऴཁૉʯΈ͍ͨͳॻ͖ํ͕໘౗
    ैདྷͷ഑ྻͷ࠷ऴཁૉऔಘ
    // ageが30未満の最終要素を取得する


    myArray


    .filter((element) => element.age < 30)


    .〇〇 // ここで最終要素を抽出できない👎

    View full-size slide

  24. &4Ͱ഑ྻͷ࠷ऴཁૉऔಘ
    myArray.at(-1);

    View full-size slide

  25. w ʮ
    fi
    MUFS
    ͰߜΓࠐΜͩ഑ྻͷ࠷ऴཁૉʯͷॲཧ΋ϥΫ
    &4Ͱ഑ྻͷ࠷ऴཁૉऔಘ
    // ageが30未満の最終要素を取得する


    myArray


    .filter((element) => element.age < 30)


    .at(-1) // ここで最終要素を抽出できる👍

    View full-size slide

  26. w0CKFDUIBT0XO

    w഑ྻBU

    wΤϥʔDBVTF

    View full-size slide

  27. ΤϥʔDBVTF
    ΤϥʔݪҼΛνΣΠϯͤ͞Δ
    03

    View full-size slide

  28. ΤϥʔΛͲ͏εϩʔ͢Δ͔ʁ
    try {


    fetchSomeData();


    } catch (error) {


    // どうthrowするか?🤔


    }

    View full-size slide

  29. w ݩͷΤϥʔ͕ѲΓͭͿ͞ΕΔ
    UISPXOFX&SSPS ϝοηʔδ
    ͷ৔߹
    try {


    fetchSomeData();


    } catch (error) {


    throw new Error("API通信の失敗")


    }

    View full-size slide

  30. w ݩͷΤϥʔ͕ѲΓͭͿ͞ΕΔ
    UISPXOFX&SSPS ϝοηʔδ
    ͷ৔߹
    try {


    fetchSomeData();


    } catch (error) {


    throw new Error("API通信の失敗")


    }

    View full-size slide

  31. Τϥʔ༻ΧελϜΫϥεΛ࡞ΔΞϓϩʔν
    class CustomError extends Error {


    constructor(message, cause) {


    super(message);


    this.cause = cause;


    }


    }


    try {


    fetchSomeData();


    } catch (error) {


    throw new CustomError("API通信", error)


    }

    View full-size slide

  32. w &SSPSͷDBVTFϓϩύςΟʹɺݩͷΤϥʔΛอ࣋Ͱ͖Δ
    &4ͰDBVTFϓϩύςΟʹରԠ
    try {


    fethSomeData();


    } catch (error) {


    throw new Error("API௨৴ࣦഊ", {


    cause: error // ݩΤϥʔ 👍


    });


    }

    View full-size slide

  33. αϯϓϧ
    ͷ֬཰Ͱ3FGFSFODF&SSPS

    View full-size slide

  34. const function1 = () => {


    try {


    if (Math.random() > 0.5) { foo.bar; }


    } catch (error) {


    throw new Error("fooが存在しない😡", { cause: error });


    }


    };


    const function2 = () => {


    try {


    if (Math.random() > 0.5) { baz.qux; }


    } catch (error) {


    throw new Error("bazが存在しないですよ🤯", { cause: error });


    }


    };

    View full-size slide

  35. αϯϓϧͷ֬཰Ͱ3FGFSFODF&SSPS
    try {


    function1();


    function2();


    console.log("成功です!");


    } catch (error) {


    console.log(error);


    console.log(error.cause);


    }

    View full-size slide

  36. w 'JSFGPYͩͱFSSPSDBVTFΛग़ྗͤͣͱ΋DBVTFͷத਎Λग़ྗͯ͘͠ΕΔ
    w $ISPNF΍+FTU΋ରԠݕ౼த
    ֤؀ڥͰDBVTFͷग़ྗʹରԠத

    View full-size slide

  37. w 'JSFGPYͩͱFSSPSDBVTFΛग़ྗͤͣͱ΋DBVTFͷத਎Λग़ྗͯ͘͠ΕΔ
    w $ISPNF΍+FTU΋ରԠݕ౼த
    ֤؀ڥͰDBVTFͷग़ྗʹରԠத

    View full-size slide

  38. ैདྷͷ+BWB4DSJQUίʔυΛ
    ҆શʹɺγϯϓϧʹهड़Ͱ͖Δ
    ศརػೳ͕௥Ճ͞Εͨ

    View full-size slide

  39. &4ͷػೳ΋ܾ·Γ࢝Ίͨɻ
    ৽͍͠ػೳΛΩϟονΞοϓ͠
    ָ҆͘͠શͳ։ൃΛ͠Α͏

    View full-size slide

  40. w "5$QSPQPTBMUPBEEBOBU

    w IUUQTHJUIVCDPNUDQSPQPTBMSFMBUJWFJOEFYJOHNFUIPE
    w 0CKFDUIBT0XO
    QSPQPTBMGPS&$."4DSJQU
    w IUUQTHJUIVCDPNUDQSPQPTBMBDDFTTJCMFPCKFDUIBTPXOQSPQFSUZ
    w 5$QSPQPTBMGPSBDDVNVMBUJOHFSSPST
    w IUUQTHJUIVCDPNUDQSPQPTBMFSSPSDBVTF
    ؔ࿈ࢿྉ

    View full-size slide

  41. Thank y !
    @tonkotsuboy_com
    @matsu_eri
    5XJUUFSͰ͸࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢

    View full-size slide