Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
これだけは押さえておきたい ES2022の便利機能
Search
tonkotsuboy_com
October 21, 2022
Programming
9
5.6k
これだけは押さえておきたい ES2022の便利機能
Qiita Night 〜フロントエンド〜 で発表した資料です
tonkotsuboy_com
October 21, 2022
Tweet
Share
More Decks by tonkotsuboy_com
See All by tonkotsuboy_com
CSSの最新トレンド Ver.2025
tonkotsuboy_com
13
5.4k
鹿野さんに聞く! 2024年最新CSSトレンドと実践テクニック
tonkotsuboy_com
14
8.5k
CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう
tonkotsuboy_com
9
9.5k
2023年モダンCSSの最新トレンド
tonkotsuboy_com
24
20k
全ブラウザ対応したcontainer queryは何がスゴイのか?
tonkotsuboy_com
13
15k
TypeScript 4.9のas const satisfiesが便利
tonkotsuboy_com
11
6.7k
CSS Grid・Flexboxの 最近の進化とミライ
tonkotsuboy_com
4
4.8k
2022年のモダンCSS改
tonkotsuboy_com
26
25k
2019年までに見直しておきたい CSS・JavaScriptの手法
tonkotsuboy_com
52
30k
Other Decks in Programming
See All in Programming
CDK引数設計道場100本ノック
badmintoncryer
2
480
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
NEWT Backend Evolution
xpromx
1
140
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
360
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
9
3.8k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
GPUを計算資源として使おう!
primenumber
1
250
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
280
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Become a Pro
speakerdeck
PRO
29
5.4k
How GitHub (no longer) Works
holman
314
140k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
RailsConf 2023
tenderlove
30
1.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Transcript
͜Ε͚ͩԡ͓͖͍͑ͯͨ͞ &4ͷศརػೳ ࣛ
ϚωʔϑΥϫʔυϏδωεΧϯύχʔ ܦཧࡒϓϩμΫτຊ෦ϓϩμΫτ։ൃ෦෭෦ ݉6*ςΫϊϩδʔάϧʔϓϦʔμʔ ࣛʢ͔ͷ͚ͨ͠ʣ !UPOLPUTVCPZ@DPN
None
w ٕज़ධࣾ+BWB4DSJQUίʔυϨγϐू w ܦιϑτΣΞ w ݄߸ʮ8FCίʔσΟϯάज़ʯ w ݄߸ʮ࠷৽$44ʯ w ݄߸ʮ+BWB4DSJQU࠷৽༷&4ʯ
ࣥච͠·ͨ͠
͔Θ͍͍ೣͱΒͯ͠·͢
&4ͱ+BWB4DSJQU
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ʯͱ
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ຖਐԽΛଓ͚͍ͯΔ
&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͕ਖ਼༷ࣜʹͳͬͨ IUUQTXXXFDNBJOUFSOBUJPOBMPSHQVCMJDBUJPOTBOETUBOEBSETTUBOEBSETFDNB
w ΫϥεϑΟʔϧυએݴ w ϓϥΠϕʔτͳϝϯόʔ w JOTUBODFPGͷΘΓͷJOʹΑΔʮCSBOEDIFDLʯ w τοϓϨϕϧͰͷBXBJU w ྻͷ࠷ऴཁૉΛऔಘͰ͖ΔBU
w IBT0XO1SPQFSUZ ͷΘΓͷ0CKFDUIBT0XO w TUBUJDΠχγϟϥΠβʔ w ΤϥʔΛνΣΠϯͰ͖ΔDBVTFϓϩύςΟ w ਖ਼نදݱͷEϑϥά &4ͷʮશʯ৽ػೳ
ͭϐοΫΞοϓͯ͠հ͠·͢ɻ ʮԿ͕ศརͳͷ͔ʁʯ ʮͳͥͦΕ͕ඞཁͩͬͨͷ͔ʁʯ Λத৺ʹղઆ
w0CKFDUIBT0XO wྻBU wΤϥʔDBVTF
0CKFDUIBT0XO IBT0XO1SPQUFSZ ʹΘΔ ΦϒδΣΫτͷϓϩύςΟଘࡏνΣοΫ 01
w NZ0CKFDUͷதʹϓϩύςΟ͕͋Δ͔ΛνΣοΫ͍ͨ͠ ΦϒδΣΫτͷϓϩύςΟͷଘࡏνΣοΫΛ͍ͨ͠ const myObject = { name: "鈴⽊" }
w ରΦϒδΣΫτIBT0XO1SPQFSUZ ্ॻ͖Մೳ ैདྷͷIBT0XO1SPQFSUZ ͷةݥੑ const myObject = { name:
"鈴⽊", hasOwnProperty: () => { // hasOwnPropertyが上書きされる return false; }, } console.log(myObject.hasOwnProperty("name")); // nameはあるのに常にfalse👎
w 0CKFDUQSPUPUZQFIBT0XO1SPQFSUZDBMM ΦϒδΣΫτ Ωʔ໊ ͰରԠ w &4-JOUͷσϑΥϧτϧʔϧͰਪ ैདྷͷIBT0XO1SPQFSUZ ͷةݥੑ const
myObject = { name: "鈴⽊", hasOwnProperty: () => { return false; }, } Object.prototype.hasOwnProperty.call(myObject, 'name'); // true👍
w 0CKFDUIBT0XO ରΦϒδΣΫτ Ωʔ໊ w ϝιουͷ্ॻ͖Ͱ͖ͳ͍ͷͰ҆શ &40CKFDUIBT0XO const myObject
= { name: "鈴⽊", hasOwn: () => { return false; }, } Object.hasOwn(myObject, 'name'); // true 👍
w0CKFDUIBT0XO wྻBU wΤϥʔDBVTF
ྻBU ࠷ऴཁૉͷऔಘ͕ϥΫʹ 02
w NZ"SSBZͷ࠷ऴཁૉΛऔಘ͢Δʹʁ ྻͷ࠷ऴཁૉΛऔಘ͍ͨ͠ const myArray = [ { age: 18,
name: "ాத" }, { age: 24, name: "ླ" }, { age: 32, name: "ޙ౻" }, ];
w NZ"SSBZͷ࠷ऴཁૉΛऔಘ͢Δʹʁ ྻͷ࠷ऴཁૉΛऔಘ͍ͨ͠ const myArray = [ { age: 18,
name: "ాத" }, { age: 24, name: "ླ" }, { age: 32, name: "ޙ౻" }, ];
ैདྷͷྻͷ࠷ऴཁૉऔಘ myArray[myArray.length - 1];
w Ұ࣌มʹ֨ೲ͢Δඞཁ͕͋Δ w ʮ fi MUFS ͰߜΓࠐΜͩྻͷ࠷ऴཁૉʯΈ͍ͨͳॻ͖ํ͕໘ ैདྷͷྻͷ࠷ऴཁૉऔಘ // ageが30未満の最終要素を取得する
myArray .filter((element) => element.age < 30) .〇〇 // ここで最終要素を抽出できない👎
&4Ͱྻͷ࠷ऴཁૉऔಘ myArray.at(-1);
w ʮ fi MUFS ͰߜΓࠐΜͩྻͷ࠷ऴཁૉʯͷॲཧϥΫ &4Ͱྻͷ࠷ऴཁૉऔಘ // ageが30未満の最終要素を取得する myArray .filter((element)
=> element.age < 30) .at(-1) // ここで最終要素を抽出できる👍
w0CKFDUIBT0XO wྻBU wΤϥʔDBVTF
ΤϥʔDBVTF ΤϥʔݪҼΛνΣΠϯͤ͞Δ 03
ΤϥʔΛͲ͏εϩʔ͢Δ͔ʁ try { fetchSomeData(); } catch (error) { // どうthrowするか?🤔
}
w ݩͷΤϥʔ͕ѲΓͭͿ͞ΕΔ UISPXOFX&SSPS ϝοηʔδ ͷ߹ try { fetchSomeData(); } catch
(error) { throw new Error("API通信の失敗") }
w ݩͷΤϥʔ͕ѲΓͭͿ͞ΕΔ UISPXOFX&SSPS ϝοηʔδ ͷ߹ try { fetchSomeData(); } catch
(error) { throw new Error("API通信の失敗") }
Τϥʔ༻ΧελϜΫϥεΛ࡞ΔΞϓϩʔν class CustomError extends Error { constructor(message, cause) { super(message);
this.cause = cause; } } try { fetchSomeData(); } catch (error) { throw new CustomError("API通信", error) }
w &SSPSͷDBVTFϓϩύςΟʹɺݩͷΤϥʔΛอ࣋Ͱ͖Δ &4ͰDBVTFϓϩύςΟʹରԠ try { fethSomeData(); } catch (error) {
throw new Error("API௨৴ࣦഊ", { cause: error // ݩΤϥʔ 👍 }); }
αϯϓϧ ͷ֬Ͱ3FGFSFODF&SSPS
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 }); } };
αϯϓϧͷ֬Ͱ3FGFSFODF&SSPS try { function1(); function2(); console.log("成功です!"); } catch (error) {
console.log(error); console.log(error.cause); }
w 'JSFGPYͩͱFSSPSDBVTFΛग़ྗͤͣͱDBVTFͷதΛग़ྗͯ͘͠ΕΔ w $ISPNF+FTUରԠݕ౼த ֤ڥͰDBVTFͷग़ྗʹରԠத
w 'JSFGPYͩͱFSSPSDBVTFΛग़ྗͤͣͱDBVTFͷதΛग़ྗͯ͘͠ΕΔ w $ISPNF+FTUରԠݕ౼த ֤ڥͰDBVTFͷग़ྗʹରԠத
·ͱΊ
ैདྷͷ+BWB4DSJQUίʔυΛ ҆શʹɺγϯϓϧʹهड़Ͱ͖Δ ศརػೳ͕Ճ͞Εͨ
&4ͷػೳܾ·Γ࢝Ίͨɻ ৽͍͠ػೳΛΩϟονΞοϓ͠ ָ҆͘͠શͳ։ൃΛ͠Α͏
w "5$QSPQPTBMUPBEEBOBU w IUUQTHJUIVCDPNUDQSPQPTBMSFMBUJWFJOEFYJOHNFUIPE w 0CKFDUIBT0XO QSPQPTBMGPS&$."4DSJQU w IUUQTHJUIVCDPNUDQSPQPTBMBDDFTTJCMFPCKFDUIBTPXOQSPQFSUZ
w 5$QSPQPTBMGPSBDDVNVMBUJOHFSSPST w IUUQTHJUIVCDPNUDQSPQPTBMFSSPSDBVTF ؔ࿈ࢿྉ
Thank y ! @tonkotsuboy_com @matsu_eri 5XJUUFSͰ࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢