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

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

Transcript

1. ͜Ε͚ͩ͸ԡ͓͖͍͑ͯͨ͞
   &4ͷศརػೳ ࣛ໺
   ૖
2. ϚωʔϑΥϫʔυϏδωεΧϯύχʔ 
 ܦཧࡒ຿ϓϩμΫτຊ෦ϓϩμΫτ։ൃ෦෭෦௕ 
 ݉
   6*ςΫϊϩδʔάϧʔϓϦʔμʔ
   ࣛ໺
   ૖ʢ͔ͷ
   ͚ͨ͠ʣ
   !UPOLPUTVCPZ@DPN
4. w ٕज़ධ࿦ࣾ+BWB4DSJQUίʔυϨγϐू
   w ೔ܦιϑτ΢ΣΞ
   w ೥݄߸ʮ8FCίʔσΟϯάज़ʯ
   w ೥݄߸ʮ࠷৽$44ʯ
   w ೥݄߸ʮ+BWB4DSJQU࠷৽࢓༷
   &4ʯ ࣥච͠·ͨ͠
5. ͔Θ͍͍ೣͱ฻Βͯ͠·͢
6. &4ͱ+BWB4DSJQU
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 8FC
   8PSLFST
   "1* ʮ+BWB4DSJQUʯͱ͸
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͸ຖ೥ਐԽΛଓ͚͍ͯΔ
9. &4͸ຖ೥ਐԽΛଓ͚͍ͯΔ w &4
   w ഑ྻ fl BU
   จࣈྻUSJN4UBSU
   0CKFDUGSPN&OUSJFT
   USZ
   DBUDIͷFSSPSΛলུՄೳͳͲ
   w &4
   w 
   
   JNQPSU
   1SPNJTFBMM4FUUMFE
   จࣈྻNBUDI"MM
   #JH*OUͳͲ
   w &4
   w ਺஋Λ@Ͱ۠੾ΕΔ
   จࣈྻSFQMBDF"MM
   1SPNJTFBOZ
   ͳͲ 
 

10. ࠓ೥݄೔ʹ&4͕ਖ਼ࣜ࢓༷ʹͳͬͨ IUUQTXXXFDNBJOUFSOBUJPOBMPSHQVCMJDBUJPOTBOETUBOEBSETTUBOEBSETFDNB
11. w ΫϥεϑΟʔϧυએݴ
    w ϓϥΠϕʔτͳϝϯόʔ
    w JOTUBODFPGͷ୅ΘΓͷJOʹΑΔʮCSBOE
    DIFDLʯ
    w τοϓϨϕϧͰͷBXBJU
    w ഑ྻͷ࠷ऴཁૉΛऔಘͰ͖ΔBU
    w IBT0XO1SPQFSUZ ͷ୅ΘΓͷ0CKFDUIBT0XO
    w TUBUJDΠχγϟϥΠβʔ
    w ΤϥʔΛνΣΠϯͰ͖ΔDBVTFϓϩύςΟ
    w ਖ਼نදݱͷEϑϥά &4ͷʮશʯ৽ػೳ
12. ͭϐοΫΞοϓͯ͠঺հ͠·͢ɻ
    ʮԿ͕ศརͳͷ͔ʁʯ
    ʮͳͥͦΕ͕ඞཁͩͬͨͷ͔ʁʯ
    Λத৺ʹղઆ
13. w0CKFDUIBT0XO
    w഑ྻBU
    wΤϥʔDBVTF
14. 0CKFDUIBT0XO
    IBT0XO1SPQUFSZ ʹ୅ΘΔ 
 ΦϒδΣΫτͷϓϩύςΟଘࡏνΣοΫ 01
15. w NZ0CKFDUͷதʹϓϩύςΟ͕͋Δ͔ΛνΣοΫ͍ͨ͠ ΦϒδΣΫτͷϓϩύςΟͷଘࡏνΣοΫΛ͍ͨ͠ const myObject = { name: "鈴⽊" }
16. w ର৅ΦϒδΣΫτIBT0XO1SPQFSUZ ͸্ॻ͖Մೳ ैདྷͷIBT0XO1SPQFSUZ ͷةݥੑ const myObject = { name: "鈴⽊", hasOwnProperty: () => { // hasOwnPropertyが上書きされる return false; }, } console.log(myObject.hasOwnProperty("name")); // nameはあるのに常にfalse👎
17. w 0CKFDUQSPUPUZQFIBT0XO1SPQFSUZDBMM ΦϒδΣΫτ
    Ωʔ໊ ͰରԠ
    w &4-JOUͷσϑΥϧτϧʔϧͰ΋ਪ঑ ैདྷͷIBT0XO1SPQFSUZ ͷةݥੑ const myObject = { name: "鈴⽊", hasOwnProperty: () => { return false; }, } Object.prototype.hasOwnProperty.call(myObject, 'name'); // true👍
18. w 0CKFDUIBT0XO ର৅ΦϒδΣΫτ
    Ωʔ໊
    w ϝιουͷ্ॻ͖͸Ͱ͖ͳ͍ͷͰ҆શ &4
    0CKFDUIBT0XO const myObject = { name: "鈴⽊", hasOwn: () => { return false; }, } Object.hasOwn(myObject, 'name'); // true 👍
19. w0CKFDUIBT0XO
    w഑ྻBU
    wΤϥʔDBVTF
20. ഑ྻBU
    ࠷ऴཁૉͷऔಘ͕ϥΫʹ 02
21. w NZ"SSBZͷ࠷ऴཁૉΛऔಘ͢Δʹ͸ʁ ഑ྻͷ࠷ऴཁૉΛऔಘ͍ͨ͠ const myArray = [ { age: 18, name: "ాத" }, { age: 24, name: "ླ໦" }, { age: 32, name: "ޙ౻" }, ];
22. w NZ"SSBZͷ࠷ऴཁૉΛऔಘ͢Δʹ͸ʁ ഑ྻͷ࠷ऴཁૉΛऔಘ͍ͨ͠ const myArray = [ { age: 18, name: "ాத" }, { age: 24, name: "ླ໦" }, { age: 32, name: "ޙ౻" }, ];
23. ैདྷͷ഑ྻͷ࠷ऴཁૉऔಘ myArray[myArray.length - 1];
24. w Ұ࣌ม਺ʹ֨ೲ͢Δඞཁ͕͋Δ
    w ʮ fi MUFS ͰߜΓࠐΜͩ഑ྻͷ࠷ऴཁૉʯΈ͍ͨͳॻ͖ํ͕໘౗ ैདྷͷ഑ྻͷ࠷ऴཁૉऔಘ // ageが30未満の最終要素を取得する myArray .filter((element) => element.age < 30) .〇〇 // ここで最終要素を抽出できない👎
25. &4Ͱ഑ྻͷ࠷ऴཁૉऔಘ myArray.at(-1);
26. w ʮ fi MUFS ͰߜΓࠐΜͩ഑ྻͷ࠷ऴཁૉʯͷॲཧ΋ϥΫ &4Ͱ഑ྻͷ࠷ऴཁૉऔಘ // ageが30未満の最終要素を取得する myArray .filter((element) => element.age < 30) .at(-1) // ここで最終要素を抽出できる👍
27. w0CKFDUIBT0XO
    w഑ྻBU
    wΤϥʔDBVTF
28. ΤϥʔDBVTF
    ΤϥʔݪҼΛνΣΠϯͤ͞Δ 03
29. ΤϥʔΛͲ͏εϩʔ͢Δ͔ʁ try { fetchSomeData(); } catch (error) { // どうthrowするか？🤔 }
30. w ݩͷΤϥʔ͕ѲΓͭͿ͞ΕΔ UISPX
    OFX
    &SSPS ϝοηʔδ ͷ৔߹ try { fetchSomeData(); } catch (error) { throw new Error("API通信の失敗") }
31. w ݩͷΤϥʔ͕ѲΓͭͿ͞ΕΔ UISPX
    OFX
    &SSPS ϝοηʔδ ͷ৔߹ try { fetchSomeData(); } catch (error) { throw new Error("API通信の失敗") }
32. Τϥʔ༻ΧελϜΫϥεΛ࡞ΔΞϓϩʔν class CustomError extends Error { constructor(message, cause) { super(message); this.cause = cause; } } try { fetchSomeData(); } catch (error) { throw new CustomError("API通信", error) }
33. w &SSPSͷDBVTFϓϩύςΟʹɺݩͷΤϥʔΛอ࣋Ͱ͖Δ &4ͰDBVTFϓϩύςΟʹରԠ try { fethSomeData(); } catch (error) { throw new Error("API௨৴ࣦഊ", { cause: error // ݩΤϥʔ 👍 }); }
34. αϯϓϧ
    ͷ֬཰Ͱ3FGFSFODF&SSPS
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 }); } };
36. αϯϓϧ
    ͷ֬཰Ͱ3FGFSFODF&SSPS try { function1(); function2(); console.log("成功です！"); } catch (error) { console.log(error); console.log(error.cause); }
37. w 'JSFGPYͩͱFSSPSDBVTFΛग़ྗͤͣͱ΋DBVTFͷத਎Λग़ྗͯ͘͠ΕΔ
    w $ISPNF΍+FTU΋ରԠݕ౼த ֤؀ڥͰDBVTFͷग़ྗʹରԠத
38. w 'JSFGPYͩͱFSSPSDBVTFΛग़ྗͤͣͱ΋DBVTFͷத਎Λग़ྗͯ͘͠ΕΔ
    w $ISPNF΍+FTU΋ରԠݕ౼த ֤؀ڥͰDBVTFͷग़ྗʹରԠத
39. ·ͱΊ
40. ैདྷͷ+BWB4DSJQUίʔυΛ
    ҆શʹɺγϯϓϧʹهड़Ͱ͖Δ
    ศརػೳ͕௥Ճ͞Εͨ
41. &4ͷػೳ΋ܾ·Γ࢝Ίͨɻ
    ৽͍͠ػೳΛΩϟονΞοϓ͠
    ָ҆͘͠શͳ։ൃΛ͠Α͏
42. w "
    5$
    QSPQPTBM
    UP
    BEE
    BO
    BU
    w IUUQTHJUIVCDPNUDQSPQPTBMSFMBUJWFJOEFYJOHNFUIPE
    w 0CKFDUIBT0XO
    QSPQPTBM
    GPS
    &$."4DSJQU
    w IUUQTHJUIVCDPNUDQSPQPTBMBDDFTTJCMFPCKFDUIBTPXOQSPQFSUZ
    w 5$
    QSPQPTBM
    GPS
    BDDVNVMBUJOH
    FSSPST
    w IUUQTHJUIVCDPNUDQSPQPTBMFSSPSDBVTF ؔ࿈ࢿྉ
43. Thank y ! @tonkotsuboy_com @matsu_eri 5XJUUFSͰ͸࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢