Slide 1
Slide 1 text
͜Ε͚ͩԡ͓͖͍͑ͯͨ͞
&4ͷศརػೳ
ࣛ
Slide 2
Slide 2 text
ϚωʔϑΥϫʔυϏδωεΧϯύχʔ
ܦཧࡒϓϩμΫτຊ෦ϓϩμΫτ։ൃ෦෭෦
݉6*ςΫϊϩδʔάϧʔϓϦʔμʔ
ࣛʢ͔ͷ͚ͨ͠ʣ
!UPOLPUTVCPZ@DPN
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
w ٕज़ධࣾ+BWB4DSJQUίʔυϨγϐू
w ܦιϑτΣΞ
w ݄߸ʮ8FCίʔσΟϯάज़ʯ
w ݄߸ʮ࠷৽$44ʯ
w ݄߸ʮ+BWB4DSJQU࠷৽༷&4ʯ
ࣥච͠·ͨ͠
Slide 5
Slide 5 text
͔Θ͍͍ೣͱΒͯ͠·͢
Slide 6
Slide 6 text
&4ͱ+BWB4DSJQU
Slide 7
Slide 7 text
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ʯͱ
Slide 8
Slide 8 text
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ຖਐԽΛଓ͚͍ͯΔ
Slide 9
Slide 9 text
&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
ͳͲ
Slide 10
Slide 10 text
ࠓ݄ʹ&4͕ਖ਼༷ࣜʹͳͬͨ
IUUQTXXXFDNBJOUFSOBUJPOBMPSHQVCMJDBUJPOTBOETUBOEBSETTUBOEBSETFDNB
Slide 11
Slide 11 text
w ΫϥεϑΟʔϧυએݴ
w ϓϥΠϕʔτͳϝϯόʔ
w JOTUBODFPGͷΘΓͷJOʹΑΔʮCSBOEDIFDLʯ
w τοϓϨϕϧͰͷBXBJU
w ྻͷ࠷ऴཁૉΛऔಘͰ͖ΔBU
w IBT0XO1SPQFSUZ
ͷΘΓͷ0CKFDUIBT0XO
w TUBUJDΠχγϟϥΠβʔ
w ΤϥʔΛνΣΠϯͰ͖ΔDBVTFϓϩύςΟ
w ਖ਼نදݱͷEϑϥά
&4ͷʮશʯ৽ػೳ
Slide 12
Slide 12 text
ͭϐοΫΞοϓͯ͠հ͠·͢ɻ
ʮԿ͕ศརͳͷ͔ʁʯ
ʮͳͥͦΕ͕ඞཁͩͬͨͷ͔ʁʯ
Λத৺ʹղઆ
Slide 13
Slide 13 text
w0CKFDUIBT0XO
wྻBU
wΤϥʔDBVTF
Slide 14
Slide 14 text
0CKFDUIBT0XO
IBT0XO1SPQUFSZ
ʹΘΔ
ΦϒδΣΫτͷϓϩύςΟଘࡏνΣοΫ
01
Slide 15
Slide 15 text
w NZ0CKFDUͷதʹϓϩύςΟ͕͋Δ͔ΛνΣοΫ͍ͨ͠
ΦϒδΣΫτͷϓϩύςΟͷଘࡏνΣοΫΛ͍ͨ͠
const myObject = {
name: "鈴⽊"
}
Slide 16
Slide 16 text
w ରΦϒδΣΫτIBT0XO1SPQFSUZ
্ॻ͖Մೳ
ैདྷͷIBT0XO1SPQFSUZ
ͷةݥੑ
const myObject = {
name: "鈴⽊",
hasOwnProperty: () => {
// hasOwnPropertyが上書きされる
return false;
},
}
console.log(myObject.hasOwnProperty("name"));
// nameはあるのに常にfalse👎
Slide 17
Slide 17 text
w 0CKFDUQSPUPUZQFIBT0XO1SPQFSUZDBMM ΦϒδΣΫτ
Ωʔ໊
ͰରԠ
w &4-JOUͷσϑΥϧτϧʔϧͰਪ
ैདྷͷIBT0XO1SPQFSUZ
ͷةݥੑ
const myObject = {
name: "鈴⽊",
hasOwnProperty: () => {
return false;
},
}
Object.prototype.hasOwnProperty.call(myObject, 'name');
// true👍
Slide 18
Slide 18 text
w 0CKFDUIBT0XO ରΦϒδΣΫτ
Ωʔ໊
w ϝιουͷ্ॻ͖Ͱ͖ͳ͍ͷͰ҆શ
&40CKFDUIBT0XO
const myObject = {
name: "鈴⽊",
hasOwn: () => {
return false;
},
}
Object.hasOwn(myObject, 'name');
// true 👍
Slide 19
Slide 19 text
w0CKFDUIBT0XO
wྻBU
wΤϥʔDBVTF
Slide 20
Slide 20 text
ྻBU
࠷ऴཁૉͷऔಘ͕ϥΫʹ
02
Slide 21
Slide 21 text
w NZ"SSBZͷ࠷ऴཁૉΛऔಘ͢Δʹʁ
ྻͷ࠷ऴཁૉΛऔಘ͍ͨ͠
const myArray = [
{ age: 18, name: "ాத" },
{ age: 24, name: "ླ" },
{ age: 32, name: "ޙ౻" },
];
Slide 22
Slide 22 text
w NZ"SSBZͷ࠷ऴཁૉΛऔಘ͢Δʹʁ
ྻͷ࠷ऴཁૉΛऔಘ͍ͨ͠
const myArray = [
{ age: 18, name: "ాத" },
{ age: 24, name: "ླ" },
{ age: 32, name: "ޙ౻" },
];
Slide 23
Slide 23 text
ैདྷͷྻͷ࠷ऴཁૉऔಘ
myArray[myArray.length - 1];
Slide 24
Slide 24 text
w Ұ࣌มʹ֨ೲ͢Δඞཁ͕͋Δ
w ʮ
fi
MUFS
ͰߜΓࠐΜͩྻͷ࠷ऴཁૉʯΈ͍ͨͳॻ͖ํ͕໘
ैདྷͷྻͷ࠷ऴཁૉऔಘ
// ageが30未満の最終要素を取得する
myArray
.filter((element) => element.age < 30)
.〇〇 // ここで最終要素を抽出できない👎
Slide 25
Slide 25 text
&4Ͱྻͷ࠷ऴཁૉऔಘ
myArray.at(-1);
Slide 26
Slide 26 text
w ʮ
fi
MUFS
ͰߜΓࠐΜͩྻͷ࠷ऴཁૉʯͷॲཧϥΫ
&4Ͱྻͷ࠷ऴཁૉऔಘ
// ageが30未満の最終要素を取得する
myArray
.filter((element) => element.age < 30)
.at(-1) // ここで最終要素を抽出できる👍
Slide 27
Slide 27 text
w0CKFDUIBT0XO
wྻBU
wΤϥʔDBVTF
Slide 28
Slide 28 text
ΤϥʔDBVTF
ΤϥʔݪҼΛνΣΠϯͤ͞Δ
03
Slide 29
Slide 29 text
ΤϥʔΛͲ͏εϩʔ͢Δ͔ʁ
try {
fetchSomeData();
} catch (error) {
// どうthrowするか？🤔
}
Slide 30
Slide 30 text
w ݩͷΤϥʔ͕ѲΓͭͿ͞ΕΔ
UISPXOFX&SSPS ϝοηʔδ
ͷ߹
try {
fetchSomeData();
} catch (error) {
throw new Error("API通信の失敗")
}
Slide 31
Slide 31 text
w ݩͷΤϥʔ͕ѲΓͭͿ͞ΕΔ
UISPXOFX&SSPS ϝοηʔδ
ͷ߹
try {
fetchSomeData();
} catch (error) {
throw new Error("API通信の失敗")
}
Slide 32
Slide 32 text
Τϥʔ༻ΧελϜΫϥεΛ࡞ΔΞϓϩʔν
class CustomError extends Error {
constructor(message, cause) {
super(message);
this.cause = cause;
}
}
try {
fetchSomeData();
} catch (error) {
throw new CustomError("API通信", error)
}
Slide 33
Slide 33 text
w &SSPSͷDBVTFϓϩύςΟʹɺݩͷΤϥʔΛอ࣋Ͱ͖Δ
&4ͰDBVTFϓϩύςΟʹରԠ
try {
fethSomeData();
} catch (error) {
throw new Error("API௨৴ࣦഊ", {
cause: error // ݩΤϥʔ 👍
});
}
Slide 34
Slide 34 text
αϯϓϧ
ͷ֬Ͱ3FGFSFODF&SSPS
Slide 35
Slide 35 text
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 });
}
};
Slide 36
Slide 36 text
αϯϓϧͷ֬Ͱ3FGFSFODF&SSPS
try {
function1();
function2();
console.log("成功です！");
} catch (error) {
console.log(error);
console.log(error.cause);
}
Slide 37
Slide 37 text
w 'JSFGPYͩͱFSSPSDBVTFΛग़ྗͤͣͱDBVTFͷதΛग़ྗͯ͘͠ΕΔ
w $ISPNF+FTUରԠݕ౼த
֤ڥͰDBVTFͷग़ྗʹରԠத
Slide 38
Slide 38 text
w 'JSFGPYͩͱFSSPSDBVTFΛग़ྗͤͣͱDBVTFͷதΛग़ྗͯ͘͠ΕΔ
w $ISPNF+FTUରԠݕ౼த
֤ڥͰDBVTFͷग़ྗʹରԠத
Slide 39
Slide 39 text
·ͱΊ
Slide 40
Slide 40 text
ैདྷͷ+BWB4DSJQUίʔυΛ
҆શʹɺγϯϓϧʹهड़Ͱ͖Δ
ศརػೳ͕Ճ͞Εͨ
Slide 41
Slide 41 text
&4ͷػೳܾ·Γ࢝Ίͨɻ
৽͍͠ػೳΛΩϟονΞοϓ͠
ָ҆͘͠શͳ։ൃΛ͠Α͏
Slide 42
Slide 42 text
w "5$QSPQPTBMUPBEEBOBU
w IUUQTHJUIVCDPNUDQSPQPTBMSFMBUJWFJOEFYJOHNFUIPE
w 0CKFDUIBT0XO
QSPQPTBMGPS&$."4DSJQU
w IUUQTHJUIVCDPNUDQSPQPTBMBDDFTTJCMFPCKFDUIBTPXOQSPQFSUZ
w 5$QSPQPTBMGPSBDDVNVMBUJOHFSSPST
w IUUQTHJUIVCDPNUDQSPQPTBMFSSPSDBVTF
ؔ࿈ࢿྉ
Slide 43
Slide 43 text
Thank y !
@tonkotsuboy_com
@matsu_eri
5XJUUFSͰ࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢