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.2k
鹿野さんに聞く! 2024年最新CSSトレンドと実践テクニック
tonkotsuboy_com
14
8.4k
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
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
910
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
効率的な開発手段として VRTを活用する
ishkawa
0
140
Discover Metal 4
rei315
2
140
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Building Adaptive Systems
keathley
43
2.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Rails Girls Zürich Keynote
gr2m
95
14k
4 Signs Your Business is Dying
shpigford
184
22k
The Cult of Friendly URLs
andyhume
79
6.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
The Language of Interfaces
destraynor
158
25k
Code Reviewing Like a Champion
maltzj
524
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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Ͱ࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢