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
6.4k
鹿野さんに聞く! 2024年最新CSSトレンドと実践テクニック
tonkotsuboy_com
14
8.6k
CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう
tonkotsuboy_com
9
9.5k
2023年モダンCSSの最新トレンド
tonkotsuboy_com
24
20k
全ブラウザ対応したcontainer queryは何がスゴイのか?
tonkotsuboy_com
13
16k
TypeScript 4.9のas const satisfiesが便利
tonkotsuboy_com
11
6.9k
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
Introduction to Git & GitHub
latte72
0
120
The State of Fluid (2025)
s2b
0
200
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
2
1.1k
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
970
CSC305 Summer Lecture 12
javiergs
PRO
0
110
実践 Dev Containers × Claude Code
touyu
1
240
🔨 小さなビルドシステムを作る
momeemt
1
480
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
590
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Agile that works and the tools we love
rasmusluckow
329
21k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Six Lessons from altMBA
skipperchong
28
4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Optimizing for Happiness
mojombo
379
70k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
How STYLIGHT went responsive
nonsquared
100
5.7k
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Ͱ࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢