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

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

Transcript

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

   View Slide

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

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

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

   View Slide

3. View Slide

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

   View Slide

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

   View Slide

6. &4ͱ+BWB4DSJQU
   

   View Slide

7. 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 Slide

8. 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 Slide

9. &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 Slide

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

    View Slide

11. w ΫϥεϑΟʔϧυએݴ
    w ϓϥΠϕʔτͳϝϯόʔ
    w JOTUBODFPGͷ୅ΘΓͷJOʹΑΔʮCSBOEDIFDLʯ
    w τοϓϨϕϧͰͷBXBJU
    w ഑ྻͷ࠷ऴཁૉΛऔಘͰ͖ΔBU
    
    w IBT0XO1SPQFSUZ
    ͷ୅ΘΓͷ0CKFDUIBT0XO
    
    w TUBUJDΠχγϟϥΠβʔ
    w ΤϥʔΛνΣΠϯͰ͖ΔDBVTFϓϩύςΟ
    w ਖ਼نදݱͷEϑϥά
    &4ͷʮશʯ৽ػೳ
    

    View Slide

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

    View Slide

13. w0CKFDUIBT0XO
    
    w഑ྻBU
    
    wΤϥʔDBVTF
    

    View Slide

14. 0CKFDUIBT0XO
    
    IBT0XO1SPQUFSZ
    ʹ୅ΘΔ
    

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

    View Slide

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

    View Slide

16. w ର৅ΦϒδΣΫτIBT0XO1SPQFSUZ
    ͸্ॻ͖Մೳ
    ैདྷͷIBT0XO1SPQFSUZ
    ͷةݥੑ
    const myObject = {
    
    
    name: "鈴⽊",
    
    
    hasOwnProperty: () => {
    
    
    // hasOwnPropertyが上書きされる
    
    
    return false;
    
    
    },
    
    
    }
    
    
    console.log(myObject.hasOwnProperty("name"));
    
    
    // nameはあるのに常にfalse👎
    

    View Slide

17. w 0CKFDUQSPUPUZQFIBT0XO1SPQFSUZDBMM ΦϒδΣΫτ Ωʔ໊
    ͰରԠ
    w &4-JOUͷσϑΥϧτϧʔϧͰ΋ਪ঑
    ैདྷͷIBT0XO1SPQFSUZ
    ͷةݥੑ
    const myObject = {
    
    
    name: "鈴⽊",
    
    
    hasOwnProperty: () => {
    
    
    return false;
    
    
    },
    
    
    }
    
    
    Object.prototype.hasOwnProperty.call(myObject, 'name');
    
    
    // true👍
    

    View Slide

18. w 0CKFDUIBT0XO ର৅ΦϒδΣΫτ Ωʔ໊
    
    w ϝιουͷ্ॻ͖͸Ͱ͖ͳ͍ͷͰ҆શ
    &40CKFDUIBT0XO
    
    const myObject = {
    
    
    name: "鈴⽊",
    
    
    hasOwn: () => {
    
    
    return false;
    
    
    },
    
    
    }
    
    
    Object.hasOwn(myObject, 'name');
    
    
    // true 👍
    

    View Slide

19. w0CKFDUIBT0XO
    
    w഑ྻBU
    
    wΤϥʔDBVTF
    

    View Slide

20. ഑ྻBU
    
    ࠷ऴཁૉͷऔಘ͕ϥΫʹ
    02
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. w Ұ࣌ม਺ʹ֨ೲ͢Δඞཁ͕͋Δ
    w ʮ
    fi
    MUFS
    ͰߜΓࠐΜͩ഑ྻͷ࠷ऴཁૉʯΈ͍ͨͳॻ͖ํ͕໘౗
    ैདྷͷ഑ྻͷ࠷ऴཁૉऔಘ
    // ageが30未満の最終要素を取得する
    
    
    myArray
    
    
    .filter((element) => element.age < 30)
    
    
    .〇〇 // ここで最終要素を抽出できない👎
    

    View Slide

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

    View Slide

26. w ʮ
    fi
    MUFS
    ͰߜΓࠐΜͩ഑ྻͷ࠷ऴཁૉʯͷॲཧ΋ϥΫ
    &4Ͱ഑ྻͷ࠷ऴཁૉऔಘ
    // ageが30未満の最終要素を取得する
    
    
    myArray
    
    
    .filter((element) => element.age < 30)
    
    
    .at(-1) // ここで最終要素を抽出できる👍
    

    View Slide

27. w0CKFDUIBT0XO
    
    w഑ྻBU
    
    wΤϥʔDBVTF
    

    View Slide

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

    View Slide

29. ΤϥʔΛͲ͏εϩʔ͢Δ͔ʁ
    try {
    
    
    fetchSomeData();
    
    
    } catch (error) {
    
    
    // どうthrowするか？🤔
    
    
    }
    

    View Slide

30. w ݩͷΤϥʔ͕ѲΓͭͿ͞ΕΔ
    UISPXOFX&SSPS ϝοηʔδ
    ͷ৔߹
    try {
    
    
    fetchSomeData();
    
    
    } catch (error) {
    
    
    throw new Error("API通信の失敗")
    
    
    }
    

    View Slide

31. w ݩͷΤϥʔ͕ѲΓͭͿ͞ΕΔ
    UISPXOFX&SSPS ϝοηʔδ
    ͷ৔߹
    try {
    
    
    fetchSomeData();
    
    
    } catch (error) {
    
    
    throw new Error("API通信の失敗")
    
    
    }
    

    View Slide

32. Τϥʔ༻ΧελϜΫϥεΛ࡞ΔΞϓϩʔν
    class CustomError extends Error {
    
    
    constructor(message, cause) {
    
    
    super(message);
    
    
    this.cause = cause;
    
    
    }
    
    
    }
    
    
    try {
    
    
    fetchSomeData();
    
    
    } catch (error) {
    
    
    throw new CustomError("API通信", error)
    
    
    }
    

    View Slide

33. w &SSPSͷDBVTFϓϩύςΟʹɺݩͷΤϥʔΛอ࣋Ͱ͖Δ
    &4ͰDBVTFϓϩύςΟʹରԠ
    try {
    
    
    fethSomeData();
    
    
    } catch (error) {
    
    
    throw new Error("API௨৴ࣦഊ", {
    
    
    cause: error // ݩΤϥʔ 👍
    
    
    });
    
    
    }
    

    View Slide

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

    View Slide

35. 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 Slide

36. αϯϓϧͷ֬཰Ͱ3FGFSFODF&SSPS
    try {
    
    
    function1();
    
    
    function2();
    
    
    console.log("成功です！");
    
    
    } catch (error) {
    
    
    console.log(error);
    
    
    console.log(error.cause);
    
    
    }
    

    View Slide

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

    View Slide

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

    View Slide

39. ·ͱΊ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide