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. 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ʯͱ͸
  2. 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͸ຖ೥ਐԽΛଓ͚͍ͯΔ
  3. &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  ͳͲ 
 

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

     w IBT0XO1SPQFSUZ ͷ୅ΘΓͷ0CKFDUIBT0XO  w TUBUJDΠχγϟϥΠβʔ w ΤϥʔΛνΣΠϯͰ͖ΔDBVTFϓϩύςΟ w ਖ਼نදݱͷEϑϥά &4ͷʮશʯ৽ػೳ
  5. w ର৅ΦϒδΣΫτIBT0XO1SPQFSUZ ͸্ॻ͖Մೳ ैདྷͷIBT0XO1SPQFSUZ ͷةݥੑ const myObject = { name:

    "鈴⽊", hasOwnProperty: () => { // hasOwnPropertyが上書きされる return false; }, } console.log(myObject.hasOwnProperty("name")); // nameはあるのに常にfalse👎
  6. w 0CKFDUQSPUPUZQFIBT0XO1SPQFSUZDBMM ΦϒδΣΫτ Ωʔ໊ ͰରԠ w &4-JOUͷσϑΥϧτϧʔϧͰ΋ਪ঑ ैདྷͷIBT0XO1SPQFSUZ ͷةݥੑ const

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

    = { name: "鈴⽊", hasOwn: () => { return false; }, } Object.hasOwn(myObject, 'name'); // true 👍
  8. w NZ"SSBZͷ࠷ऴཁૉΛऔಘ͢Δʹ͸ʁ ഑ྻͷ࠷ऴཁૉΛऔಘ͍ͨ͠ const myArray = [ { age: 18,

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

    name: "ాத" }, { age: 24, name: "ླ໦" }, { age: 32, name: "ޙ౻" }, ];
  10. Τϥʔ༻ΧελϜΫϥεΛ࡞ΔΞϓϩʔν class CustomError extends Error { constructor(message, cause) { super(message);

    this.cause = cause; } } try { fetchSomeData(); } catch (error) { throw new CustomError("API通信", error) }
  11. 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 }); } };