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.8k
鹿野さんに聞く! 2024年最新CSSトレンドと実践テクニック
tonkotsuboy_com
14
8.7k
CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう
tonkotsuboy_com
9
9.6k
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
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
130
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
760
CSC509 Lecture 01
javiergs
PRO
1
430
Model Pollution
hschwentner
1
180
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
600
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
570
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3k
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
210
XP, Testing and ninja testing ZOZ5
m_seki
2
280
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
For a Future-Friendly Web
brad_frost
180
9.9k
It's Worth the Effort
3n
187
28k
Designing for Performance
lara
610
69k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Writing Fast Ruby
sferik
629
62k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Context Engineering - Making Every Token Count
addyosmani
5
180
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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Ͱ࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢