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.6k
鹿野さんに聞く! 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.8k
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
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
250
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
660
TypeScriptでDXを上げろ! Hono編
yusukebe
3
880
構文解析器入門
ydah
7
1.9k
slogパッケージの深掘り
integral0515
0
160
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
200
Understanding Kotlin Multiplatform
l2hyunwoo
0
230
QA x AIエコシステム段階構築作戦
osu
0
210
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
11
2.9k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
270
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
750
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Speed Design
sergeychernyshev
32
1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Side Projects
sachag
455
43k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Designing for humans not robots
tammielis
253
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Scaling GitHub
holman
461
140k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Building Adaptive Systems
keathley
43
2.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Ͱ࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢