Slide 1
Slide 1 text
Frontend Bootcamp
2021-08-17
id:Pasta-K from Mackerel Team
IBUFOBJOUFSO
Slide 2
Slide 2 text
׆סه٭ع؞ٔ٤وסإ٭ٜ
˝ 氵؆ֿ╚מ䏲ⶐסز٭ّꝧ氦ךنٞ٤عؙ٤غמ꞊ֹםذتؠמ磝
׳꤀מ㍭םַ僃⛥ס湳閁חׄיֹ
˝ ׆ס铺紶ך䣽ֹنٞ٤عؙ٤غסꯛ㓊ע+BWB4DSJQU5ZQF4DSJQU3FBDUך
˝ 8FCꝧ氦מַֽי䇗չꄆ釐䈱㘃יַنٞ٤عؙ٤غס┉珷氵؆מ
냕鵭מ؞ٔشزؓشوיֹֽכַֹ泘鑜釤
˝ םסךյ鐄伺סג״מ⼽鱨מ꞊鐄伺泸樋גיַ׆כֵױ
˝ ֵׂףؕ٤ذ٭٤ֿ磙זג䏲3FBDU5ZQF4DSJQUםלסنٞ٤عؙ٤غ
䤗软כ氵؆ֿ䢆꤀ס䣆Ⲃׄמםף荁ַכ䓙זיַױ
IBUFOBJOUFSO
Slide 3
Slide 3 text
ه٭ع؞ٔ٤و
˝ ه٭ع؞ٔ٤وםסךյל؆ל؆ַ׀ױ
˝ 䣆Ⳃ־ـ٤ث؛٤ق٭عכ־םַך
˝ +BWB4DSJQU舅⛮湳םַ☔ע㵼糋ַי׀ׯמם־ױ؆ֿյַח־
䏔玮חכ䓙זי绂ַיַֽיׂדַ
˝ ☪׃י杼鉮יַ䑒釐עםַך
˝ 䏲ⶐסز٭ّמ⹆ⱶיסꝧ氦ס꤀מؤ٭غ鐆ײ傴׀כ׀מ䓙ַ⭳גյ釤
鲭גյ磆☭יַ⹆縒䗯㕔מ釤י杼鉮꤀ס餉䫇־מיׂדַ
˝ 韬ゖעַחך堼鲛
IBUFOBJOUFSO
Slide 4
Slide 4 text
ٓر٤ם+BWB4DSJQU傴ׂ┕ך釶ֻיֽ׀ג
ַ哭䒝 NJO
˝ &4 &4
♓מ+BWB4DSJQUמ⪌זג嚀耆╈䑏מ氵؆ֿ
㲔꤀מؤ٭غ鐆׳꤀מ湳זיַֽי培ַ+BWB4DSJQU┕ס哭
䒝מחַי磆☭ױ
IBUFOBJOUFSO
Slide 5
Slide 5 text
"SSPX'VODUJPO
˝ functionreturn✳מ꞊丗榟䡗ך׀
˝ 㓹儖氳מע׆ס亠嫎ך꞊丗榟䡗יֽׄףـُםַ
const hello = name => `Hello, ${name}`;
hello('world') // hello, world
˝ 䌕丗ֿחסכ׀ע䌕丗㍱ֹ()泸樋⺎
˝ 5JQT鲭⡁ֿ؛هةؘؠعסכ׀ע()ך㍱ֹכ荁ַ
const getProps = () => ({ a: 'foo', b: 'bar' })
╚מthisֿ꞊זיׂכـֹُמםն鎋碷ע♀ꎰր"SSPX'VODUJPOמחַיց鐆؆ךׂדַն
IBUFOBJOUFSO
Slide 6
Slide 6 text
"SSPX'VODUJPO
˝ 䌕丗ֿ邾丗ֵ㕙⺬ע()ך㍱ֹ
˝ ꞊丗⫂ס鋗鳭ֿ邾丗车מ峚כ׀ע{}כreturn榫ַ
const hello = (name, lang) => {
if (lang === 'ja') return `͜Μʹͪɺ${name}`;
if (lang === 'es') return `Hola, ${name}`;
return `Hello, ${name}`;
}
IBUFOBJOUFSO
Slide 7
Slide 7 text
Promiseמחַי
˝ ꪜ⺱僿⭚杼䥩霄ג؛هةؘؠع
˝ Pending 䡗Ⱶ㜊䷴יַםַ敯䛜
ם敯䛜辐杯ך׀
˝ 䡗Ⱶ SFTPMWF
ףFulfilledյ㜊䷴ SFKFDU
ףRejectedכַֹ敯䛜מםױ
˝ Fulfilled־Rejectedסלה־מם חױ⭚杼ֿ㱭▼ג
敯䛜Settledכ⽛צױն
˝ 䡗Ⱶףthenْخشغյ㜊䷴ףcatchْخشغյאבסؤ٭ٜفشؠ꞊丗מ⭚杼ֿꪜ⺱
僿מ䌕׀禆ֿ
const sleep = (ms) => new Promise((resolve) => {
setTimeout(() => resolve(ms), ms)
})
sleep(1000)
.then((ms /* resolveͨ͠Λड͚औΕΔ */) => console.log(`sleep: ${ms}ms`))
.catch(e => { console.error(e) })
IBUFOBJOUFSO
Slide 8
Slide 8 text
fetch✳זג❆
˝ fetchע)551鵟⟓ג״ס"1*ך1SPNJTF鲭
˝ Promiseעꪜ⺱僿םסךյΖֿDPOTPMFמ⭳ⱱג䏲מ䡗Ⱶ㜊䷴אבס㕙⺬סْشج٭ةֿ辐炐
/*
ϢʔβʔใΛऔಘ͢ΔAPIͷྫɻҎԼͷΑ͏ͳJSON͕ฦͬͯ͘Δͱ͍͏ఆɻ
{
user: {id: 1, name: 'pastak'}
}
*/
const promise = fetch('https://api.example.com/user/1')
.then((res) => res.json())
.then((json) => json.user)
.then(user => {
console.log(`${user.name}ͷid${user.id}`)
})
.catch(console.error);
console.log(promise); // Promise {} ɾɾɾ ᶃ
IBUFOBJOUFSO
Slide 9
Slide 9 text
邾丗ס1SPNJTF䣽ֹ亠嫎
Promiseס鿥⮛⛼䡗յא䣽ֹ׆כך䴧⛍氳ם┾⮛⭚杼车ֹ׆כֿ⭳全ն
const promises = urls.map((url) => fetch(url)); // ෳͷAPIͳͲΛฒྻʹୟ͘
˝ Promise.all()
˝ ⪒יֿ䡗Ⱶףյ3FTPMWF ⪒יס磵冽ס鿥⮛
䐂նחך㜊䷴כ3FKFDUמםն
˝ Promise.allSettled()
˝ ⪒יֿ㱭▼ג䏲מ3FTPMWFն㓹儖氳מע3FKFDUםַն׆׆סPromiseס㲔车磵冽鿥⮛ך䐂׆כ
ֿ⭳全ն
˝ 䡗ⱵגPromise{status: 'fulfilled', value: resolveͨ͠}
˝ 㜊䷴גPromise{status: 'rejected', reason: reject͞ΕͨΤϥʔ}
IBUFOBJOUFSO
Slide 10
Slide 10 text
邾丗ס1SPNJTF䣽ֹ亠嫎
const promises = [
getFromCache(), // cache͕ۭͷͱ͖ࣦഊ͢Δ
getFromApi()
]
˝ Promise.race()
˝ חך䡗ⱵכյאסPromiseס3FTPMWF䐂նאס⯥מל־ֿ㜊䷴כ3FKFDU
מםն
˝ Promise.any()
˝ 僃⮣מ䡗Ⱶג3FTPMWF䐂նאס⯥מ㜊䷴י扛釱ն⪒יסPromiseס㲔车ֿ
㜊䷴ג㕙⺬מ3FKFDUמםն
IBUFOBJOUFSO
Slide 11
Slide 11 text
BTZODBXBJU
˝ BTZODGVODUJPOס╈ךֵףյawait榫ַי1SPNJTF鲭ꪜ⺱僿꞊丗⺱僿꞊丗סֹמ䣽ֻ
˝ ؙٚ٭ـ٤غٛ٤ء䑒釐ֵֿ㕙⺬עtry {} catch (e) {}✳榫
˝ BTZODGVODUJPOס╈ךؙٚ٭氦榟גַ㕙⺬עthrow
const getUser = async (id) => {
try {
const res = await fetch(`https://api.example.com/user/${id}`);
const json = await res.json();
const user = json.user;
console.log(`${user.name}ͷid${user.id}`);
return user
} catch (e) {
console.error(e)
throw new Error('error reason: *********');
}
}
僃鲣ס&$."4DSJQUס☼喋מ⪌זיַ5PQMFWFMawaitמ㵚䑴יַ梪㗞ךֵףBTZODGVODUJPOס╈ך扛ׂיawait⮵榫׆כֿך׀ױ
IBUFOBJOUFSO
Slide 12
Slide 12 text
BTZODBXBJU
˝ BTZODGVODUJPO舅⛮Promise鲭
˝ Promiseֿ鲭זיׂ꞊丗כיյthen⽛צ⭳׆כ⭳全
˝ חױյ⽛צ⭳⣐ךעPromiseֿ鲭זיׂ꞊丗ךֵכַֹ׆כֻ⮆־זיַףյawaitך䣽ֹ׆כֿך׀
getUser(1)
.then(console.log) // {id: 1, name: 'pastak'}
.catch(console.error)
˝ 扛⺲꞊丗כי㲔车׆כה؆⭳全
(async () => {
const user = await getUser(1);
console.log(user.name) // 'pastak'
})()
IBUFOBJOUFSO
Slide 13
Slide 13 text
DMBTT㲚銧
˝ &4ךclass؞٭٠٭غֿ鴑ⱶג
˝ 犉哕氳מ✳ֹ׆כעא؆םמ扛ַ־םַׄלյ鐆׳׆כע㛡ַ־םַ
class Rect {
constructor (width, height) {
this.width = width;
this.height = height;
}
// gettersetterΛఆٛͰ͖Δ
get area () { return this.getArea(); }
getArea () { return this.width * this.height }
}
const rect = new Rect(5, 10);
console.log(rect.area); // 50
א♓⯥ךעfunction✳זיյؤ٤تعٚؠذ꞊丗⛼זיյوٞعذؕو禆䤔⮵榫יؠٚت⛼זיַגնclassⶡםب٤ذشؠتبٖ؝٭םסךյ㲔⛮עؤ٤تعٚؠذ꞊
丗ךնIUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC+BWB4DSJQU*OIFSJUBODFBOEUIFQSPUPUZQFDIBJO
IBUFOBJOUFSO
Slide 14
Slide 14 text
&$."4DSJQU.PEVMFT
˝ ☽סنٜؒؕ־ؕ٤َ٭عי⮵榫ך׀סֿٓةٖ٭ٜ
˝ نֿٜؒؕ⮆־יַ׆כךյ㚺丗تؤ٭و ⺲⯥狜ꝴ
םל⮆־
˝ 塷⺒氳磬穅ך$PNNPO+4כַֹ䎬䌋ֿ/PEFKTםל╈䑏מꝎׂ䫑榫
י׀גֿյ&$."4DSJQUך嘅嶖גٓةٖ٭ٜס☼磝ײֿ☪ךע
/PEFKTյؘؗههٚؗاםלך䇶ׂئَ٭عיַ
㲔꤀מעئَ٭عיַםַؘؗههٚؗاقنؚ٭ُ٤تסג״מ#BCFM✳זי㚺䬵ג䏲מյٓةٖ٭ٜ鉮ꃿיח邾丗סنٜؒؕױכ״י鿥⟓ג״מXFCQBDLםל
⮵榫׆כֿ㛡ַն鎋碷ע♀ꎰր+BWB4DSJQUؘؗهؓوٛآ٭ب٘٤ך䬠❠꤀מ✳榫ص٭ٜزؘؕ٤מחַיց⹆拨יׂדַն
&$."4DSJQUע+BWB4DSJQUס☼喋מֽׄ⺲燡ն&$."4DSJQU☼喋מחַיע♀ꎰր+BWB4DSJQUنٞ٤عؙ٤غ⼽鱨䤗软ס嘅嶖
מחַיցך鉮鐄יַױն
module.exportsכַֹ攐墤ם؛هةؘؠع磬榺יؙؠتَ٭عյrequire꞊丗⮵榫יؕ٤َ٭ع亠䌋նIUUQTOPEFKTPSHEPDTMBUFTUBQJNPEVMFTIUNM
IBUFOBJOUFSO
Slide 15
Slide 15 text
EFGBVMUFYQPSU
// module.js
export default function doSomething () {}
˝ export defaultךؙؠتَ٭عכյimport侇מע♳䙫
ס⺲⯥錃㲊ך׀
import awesome from './module'
IBUFOBJOUFSO
Slide 16
Slide 16 text
⺲⯥♀׀ؙؠتَ٭ع OBNFEFYQPSU
˝ constך㚺丗㲚銧כ׀מexport♀ⱶ׆כך⺲⯥♀׀ؙؠتَ٭عֿ⭳
全
// namedModule.js
export const logType = {
error: 'error',
log: 'log'
};
export const log = (message, type) => {
if (type === 'error') return console.error(message);
return console.log(message);
}
export const hello => log('hello');
IBUFOBJOUFSO
Slide 17
Slide 17 text
ؕ٤َ٭عס亠嫎מחַי
˝ FYQPSUיַ⺲⯥ך鱮׳
import {log, hello} from './namedModule';
˝ asךٛؾ٭ّ⭳全
import {logType as LOGTYPE} from './namedModule';
˝ * asךFYQPSUיַס⪒י؛هةؘؠعמ
import * as Logger from './namedModule';
Logger.hello(); // 'hello'
䑒釐םסדׄ鱮׳׆כךׄ䕑䕤 XFCQBDLמ5SFF4IBLJOHםל
㛡ַסךյ㓹儖氳מע* asע鹴ׄ亠סֿ؛تتْն
IBUFOBJOUFSO
Slide 18
Slide 18 text
5JQT
IBUFOBJOUFSO
Slide 19
Slide 19 text
.%/8FC%PD鐆ֹ
IUUQTEFWFMPQFSNP[JMMBPSH
˝ +BWB4DSJQU)5.-յ$44յ%0.םלס⺨牊"1*מחַיעה؆յ)551םל
8FCמ꞊ֵ䤗软哭䒝מחַיס鉮鐄ֿ磵יַؘؗهئؕع
˝ 3FBDUםלמחַיס鉮鐄僗
˝ ؘؗه┕מע僗霄扛霄סֵ䗯㕔ֿ鬇ֿזיַסךյنٞ٤عؙ٤غ
ؘؗهמחַיס׆כך㍭זגױע.%/釤סֿ؛تتْ
NP[JMMBסغْؕ٤┖מֵֿյ(PPHMFُؕؠٞخنعםלֿ0QFO8FC%PDTכַֹ㍚⛮鵟י䶹䭤יַIUUQTPQFODPMMFDUJWFDPNPQFOXFCEPDTVQEBUFTJOUSPEVDJOH
PQFOXFCEPDT
.%/ע.P[JMMB%FWFMPQFS/FUXPSLס樋
IBUFOBJOUFSO
Slide 20
Slide 20 text
ؘؗههٚؗاס吾碟־بٖشכ.%/סً٭ةꝧ
ׂ
˝ 1BTUB,ֿ⠕☔氳מׂ✳זיַؘؗههٚؗاס錃㲊⚥䪧ױ
˝ ؘؗههٚؗاס吾碟ؙ٤ة٤כי.%/ס鋗◄סةٔ٤و錃㲊יֽׂ
˝ $ISPNFס☔עDISPNFTFUUJOHTTFBSDI&OHJOFTյ'JSFGPYס☔עBCPVUQSFGFSFODFTTFBSDI־
تذّ吾碟ؙ٤ة٤錃㲊ך׀ױ
˝ https://duckduckgo.com/?q=! ducky+%s+site:developer.mozilla.org
˝ !סֵכעⶐ鉈تً٭ت
˝ mdn[tab]Promiseםלככ.%/┕סPromiseסً٭ةꝧׄ
EVDLEVDLHP✳זיַסעյ(PPHMFס*N'FFMJOH-VDLZם63-✳ֹכSFEJSFDUOPUJDFֿ辐炐יյאסױױً٭ةמע괊םַסך˟
IBUFOBJOUFSO
Slide 21
Slide 21 text
錃㲊ס喋㯸
IBUFOBJOUFSO
Slide 22
Slide 22 text
GPSPG
˝ ⹚䐝⺎耆 JUFSBCMF
ם؛هةؘؠعס釐碛ꯂ樑מ⭳
˝ 鿥⮛յ乃㰄⮛յNodeListյMapյSetםל
const iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
IBUFOBJOUFSO
Slide 23
Slide 23 text
/VMMJTIDPBMFTDJOHPQFSBUPS??
˝ +BWB4DSJQUךע湾礘鍐❫סג״מ||榫ַֿյ域סֹםכ׀מ䙫㍲鵟מⳂ־םַ
const rect = (width: number, height?: number) => ({
width: width,
height: height || 100 // ߴ͞Λলུͨ͠ͱ͖σϑΥϧτΛ༩͑Δ
});
rect(50, 0); // {width: 50, height: 100}
˝ 0'' 狜乃㰄
ע'BMTZם⡁םסךյ湾礘鍐❫יױֹ磵冽յ䙫㍲氳מheightמ0┙ֻ׆כֿ⭳全םַ㲔逷מםזיַն
˝ ??ע䄅鱨ֿnullױגעundefinedסכ׀דׄյ⺓鱨鲭庋畀㯸מםזיַסךյ׆סֹםכ׀ע??♏מ榫ַ׆כךゖ갭㍑
鹴ך׀ն
˝ 㓹儖氳מע??✳זיֽׂסֿ؛تتْ
!!0!!''סֹמbooleanמ㚺䬵ג侇מfalseכם⡁ն+BWB4DSJQUךע׆ס☽מfalseכnullכundefinedכNaNםלֵֿն'BMTZךםַ⡁עCPPMFBOמ㚺䬵ג侇מtrueכ
םն׆הע5SVUIZם⡁כ⽛שնIUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT(MPTTBSZ'BMTZ
+BWB4DSJQUךע||ע䄅鱨ֿ5SVUIZם䄅鱨ס⡁յ䄅鱨ֿ'BMTZם⺓鱨ס⡁鲭ն&&עאס鴫ך䄅鱨ֿ'BMTZם䄅鱨յ䄅鱨ֿ5SVUIZם⺓鱨鲭ֿյ湾礘鍐❫מ✳׆כ
ע㵼םַն
IBUFOBJOUFSO
Slide 24
Slide 24 text
0QUJPOBMDIBJOJOH?.
˝ ؛هةؘؠعֿnullundefinedם⺎耆䓪ֵֿכ׀յאס؛هةؘؠعסوٞقطؔ⽛שג״מifמ⮆㹎&&מ湾礘鍐❫
傴ׂ䑒釐ֵֿזגն
const val = nullOrObject && nullOrObject.method();
const result = val && val.methodOfReturnValue();
˝ .?榫ַכյ⽛צ⭳⩕ֿnullױגעundefinedסכ׀עא♓סوٞقطؔؓؠجتםַնױגյאס㕙⺬עundefined
כי鍐❫ն
const result = nullOrObject?.method()?.methodOfReturnValue();
nullOrObjectnullOrObject.method()ס鲭⡁ֿ⪦מnullךundefinedךםַכ׀מյ
nullOrObject.method().methodOfReturnValue()ס磵冽䐂ն
&&ע䄅鱨ֿ'BMTZםכ׀ע⺓鱨鍐❫םַ׆כ⮵榫יյnullundefinedסכ׀ע⺓鱨鍐❫םַֹמ⭳全նױגյ&&מ湾礘鍐❫ע➘⮵םסס||כ⺱喋מ'BMTZמ꞊
ゖ갭侇չ䌕׀颯׆יױֹ׆כמ嫰䙫ն׆סゖ갭0QUJPOBMDIBJOJOHך⺱侇מ㍑鹴ך׀ն
IBUFOBJOUFSO
Slide 25
Slide 25 text
4QSFBE4ZOUBY
˝ ...✳ֹכ鿥⮛؛هةؘؠع㷣ꝧ⭳全
const sum = (a, b, c, d) => a + b + c + d;
const nums = [1, 2];
const copied = [...nums]; // தΛෳͨ͠ྻΛ࡞ΕΔ
const moreNums = [...copied, 5]; // [1, 2, 5]
sum(...nums, 10); // 18
const obj = {a: 10, b: 'foo'};
const obj2 = {b: 'bar', c: true};
// 2ͭҎ্ͷobjectΛmerge͢ΔɻΩʔ͕ॏෳ͍ͯ͠Δ߹ޙʹॻ͍ͨํͰ্ॻ͖͞ΕΔ
const merged = {...obj, ...obj2}; // {a: 10, b: 'bar', c: true}
const getUserConfig = (received) => ({
force: false,
allowJs: false,
...received // σϑΥϧτΛ͞Ε͕ͨ͋Ε্ॻ͖͢Δ
})
IBUFOBJOUFSO
Slide 26
Slide 26 text
3FTU1BSBNFUFST
˝ ꞊丗ס䌕丗...ךׄ׆כך⺎㚺םꝎס䌕丗ׄ
˝ 4QSFBE4ZOUBYכ鷿זיյחדׄ┦ח䌕丗ס儕㶾ך־✳ֻ
םַ
//
const sum = (num1, num2, ...nums) => num1 + num2 + nums.reduce((a, b) => a + b, 0);
const numbers = [1, 2, 3];
sum(3, ...numbers, 6); // 15
IBUFOBJOUFSO
Slide 27
Slide 27 text
5ZQF4DSJQUמחַי NJO
IBUFOBJOUFSO
Slide 28
Slide 28 text
5ZQF4DSJQUJT⛰
+BWB4DSJQUמ㑔ؓؿط٭ب٘٤םל♀ֹׄמגوٞءِٚ٤ء銧鏤ךյ㛡ׂס㕙⺬ע
+BWB4DSJQUמ㚺䬵י־+BWB4DSJQUס⭚杼硌ך㲔车ն
˝ OPEFס氧㕙3FBDUס氧㕙םלךյئ٭فئؕغنٞ٤عؙ٤غ嘦了י+BWB4DSJQU✳榫גא׆
א׆㛻׀םؘؗهؓوٛآ٭ب٘٤סꝧ氦ֿ沸؆מ车ֹמםזג
˝ א׆א׆ס釨嘗ס☔丗ךא׆א׆ס釨嘗ס+BWB4DSJQUסؤ٭غ㱦⪒מ傴ׂג״מ㑔ס䗯㕔✳ַגַ
˝ 磝ײ鱮ײס"1*ֿ⛰鲭יׂס־նٚؕهֿٚٛלַֹֹ鲭⡁鲭יׂס־ն
˝ ٚ٤ذّؕך㲔车ג꤀מ⮣״יٚ٤ذؙّؕٚ٭ֿ颯׀כַֹסעꡔׁגַն
˝ Uncaught TypeError: Cannot read property 'foo' of undefined
˝ אסג״מ+BWB4DSJQUמꪐ氳㑔♀ׄⱶֻג"MUFSOBUJWF+BWB4DSJQUכיס5ZQF4DSJQUֿ䶹䧏ֹ
מםזג
IBUFOBJOUFSO
Slide 29
Slide 29 text
tsc5ZQF4DSJQUDPNQJMFS
˝ ُؕؠٞخنعס5ZQF4DSJQUز٭ّמזיꝧ氦יַ5ZQF4DSJQU䣽ֹג״סص٭ٜ
˝ IUUQTHJUIVCDPNNJDSPTPGU5ZQF4DSJQU
˝ 5ZQF4DSJQU+BWB4DSJQUמ㚺䬵 ؤ٤قٜؕ
嚀耆כؤ٤قٜؕ侇סꪐ氳㑔鉮冪嚀耆䬠❠יַ
˝ --noEmit؛وب٘٤♀ׄיכյꪐ氳㑔鉮冪嚀耆דׄ颦׆כֿך׀
˝ 5ZQF4DSJQU־+BWB4DSJQUס㚺䬵כ銧זיյ㑔ؓؿط٭ب٘٤璡ס⯡ꢜֿכ؆ל
˝ +BWB4DSJQUٚ٤ذֿّؕ㲔车כ׀ס䨕艵ַמע䏅ꮶ┙ֻםַכ䓙זיַֽי荁ַ
˝ 鴫מ䬠❠יַ㑔מ⺬י傴ַיյ㲔꤀מעٚؕهٚٛס㲔逷כثٝיַיٚ٤ذؙّؕٚ٭ֿ颯׀׆כ燵מ ׂ
ֵ
˝ +BWB4DSJQUס㚺䬵舅⛮ע♏僀⺎耆ն#BCFM
FTCVJMEםל
˝ 㛡ׂסوٞةؘؠعךעCBCFM✳榫יַכ䓙ֹסךյ@babel/preset-typescript僗ⲖמגCBCFMך㚺䬵车ֹ亠ֿ錃
㲊ֿ邾ꥭם־זגי؛تتْ
enum✳זיַכؤ٭غֿ鴑ⱶסך䏅ꮶ┙ֻնenumע䏲鳭؛هةؘؠعכtypeofםלס磝ײ⺬ך♏僀⺎耆םסךյ㓹儖氳מע⮵榫םַֹמיַ׆כֿ㛡
ַն
IBUFOBJOUFSO
Slide 30
Slide 30 text
㑔㲚銧鼧⮆鐆״ֹמםֹ
5ZQF4DSJQUס♏辐氳ם辐杯םל磆☭יַ׀ױն
הזכ䣆⩕ך鍱גַ☔ע⪜䌋ס1MBZHSPVOEֽֿ䣆鬭ךն
IBUFOBJOUFSO
Slide 31
Slide 31 text
㚺丗㲚銧侇ס㑔ؓؿط٭ب٘٤
// JavaScriptͷ߹
const a = 'hello';
// TypeScriptͷ߹ม໊ͱ=ͷؒʹ:Λஔ͍ͯܕΞϊςʔγϣϯΛॻ͘
const a: ʲ͜͜ʹܕΞϊςʔγϣϯʳ = 'hello';
// ྫ͑
const a: string = 'hello';
׆ַׂדזג䫟鑜יׂסךյ㲔꤀מע傴־םַ׆כ
㛡ַ
IBUFOBJOUFSO
Slide 32
Slide 32 text
♏辐氳ם辐杯Ζ
˝ وِٛطؔه㑔string
number
boolean
null
undefined
˝ 'hello'
12
true
falseסֹם攐㲊ס⡁ ٛطٜٚ㑔כ⽛צױ
✳ֻ
const a: number = 10;
const b: boolean = false;
const c: string = 11; // Type Error
const d: 'hello' = 'hello';
const n: null = null;
˝ 鿥⮛
const arr: string[] = ['hello', 'world'];
const arr2: Array = [1, 2, 3, 5, 8];
const arr3: [string, number] = ['year', 2021]; // λϓϧ(Tuple)ܕͱ
IBUFOBJOUFSO
Slide 33
Slide 33 text
♏辐氳ם辐杯Η
˝ ؛هةؘؠع
˝ +BWB4DSJQUס؛هةؘؠع⺱喋מ傴ַיյ⡁傴ׂכ׆מ㑔傴ׂ
˝ ؞٭⺲מ?♀ׄכ؛وب٘ػٜם؞٭מםזיյ泸樋⺎耆מםն
const person: {
name: string,
age: number,
address?: string
} = {
name: 'john',
age: 21
}
string | undefinedסֹם鋗鳭כ⺱כ磆☭׆כֵն⡁ֿ⪌זיַ־לֹ־ך+BWB4DSJQUכי㲔车ג꤀ס䨕艵ַֿ㚺׆כֵֿ Object.keys()םל
ס
ךյ⸬㳡מע⺱ךעםַ׆כמ嫰䙫ն攐מ5ZQF4DSJQUך㵵⪌גexactOptionalPropertyTypes僗ⲖמכյUTDךס㑔鉮冪侇ס䨕艵ַ㚺ױն
IBUFOBJOUFSO
Slide 34
Slide 34 text
type
type✳ֹכ㑔辐杯מؙؕٛؓت♀ׄ
type Person = {
name: string,
age: number,
};
type Team = Person[];
IBUFOBJOUFSO
Slide 35
Slide 35 text
6OJPO5ZQF ⺬✡㑔
邾丗ס㑔סַ־嵹ג
type Primitive = string | number | boolean | undefined | null;
type Color = 'red' | 'green' | 'blue' | 'yellow' |'perple';
IBUFOBJOUFSO
Slide 36
Slide 36 text
㑔؝٭غ 5ZQF(VBSE
מ✳ֻ➘⮵ם
+BWB4DSJQUס庋畀㯸
+BWB4DSJQUס庋畀㯸ס╈מע僗Ⲗמ✳ֹ׆כךյꪐ氳鉮冪侇מ
5ZQF4DSJQUؤ٤قؕٚמזי➘⮵מ✳榫סֵֿն
typeofכin׆׆ךע磆☭ױն׆ע+BWB4DSJQUסٚ٤
ذّؕ┕ךⳂ⛼׆כמ嫰䙫ն
IBUFOBJOUFSO
Slide 37
Slide 37 text
typeof庋畀㯸
˝ ⡁ס㑔 ׆׆ךס㑔ע+BWB4DSJQUٚ٤ذّؕ┕ךס㑔
'string'
'number'
'boolean'
'object'
'function'
'undefined'־鲭
console.log(typeof 'hello world'); // 'string'
const n = 10;
console.log(typeof n); // 'number'
const p: Person = {name: 'jonh', age: 20}
console.log(typeof p); // 'object'
console.log(typeof undefined); // 'undefined'
console.log(typeof null) // 'object'
console.log(typeof ['a']) // 'object'
IBUFOBJOUFSO
Slide 38
Slide 38 text
typeof庋畀㯸ס⮵榫❆
˝ 攐מnumberstringךֵ׆כמ⯆גַכ׀מ값⭳
// paddingʹۭനͷ·ͨλϒจࣈͳͲ͕ͬͯ͘Δ͜ͱΛఆͨؔ͠
function padLeft(val: string, padding: string | number) {
if (typeof padding === 'number') {
return ' '.repeat(padding) + val;
}
// padding͕numberͰͳ͍ͷͰɺstringͰ͋Δͱਪ͞ΕΔ
return padding + val;
}
IBUFOBJOUFSO
Slide 39
Slide 39 text
in庋畀㯸
⡁מ攐㲊סوٞقطֿؔ僗׆כ⮭㲊庋畀㯸ն僃鲣עهٚؗاֿ攐㲊ס"1*מ㵚䑴יַ־לֹ־閁⮯׆כמ✳ն
type Fish = {
name: string,
swim: () => void
}
type Bird = {
name: string,
fly: () => void
}
function move (x: Fish | Bird) {
if ('swim' in x) {
// swim͕༗ΔͷFishܕͷΈ
return x.swim();
}
// ͳͷͰɺ͜͜ʹ౸ୡ͢ΔͱBirdܕͰ͋Δͱ͔Δ
return x.fly();
}
IBUFOBJOUFSO
Slide 40
Slide 40 text
5BHHFE6OJPO5ZQFTך㑔؝٭غ
˝ typekindסֹםوٞقطؔמٛطٜٚ㑔錃㲊יַֽיյאס╈骰===switch✳זי奂鬳׆כךյ㑔ס礓鱮ײ车ֹ
˝ ⠕☔氳ם䚉釶דכյinךס礓鱮ײ׆הסقذ٭٤ס亠ֿׂ⮵榫妳ֿױ
˝ ٛطٜٚ㑔ס奂鬳ס亠ֿ傴ׂסֿ癨ⶡךյ־ח׆הסֹֿ㱦⪒ךն
type Fish = {
kind: 'fish',
name: string,
swim: () => void
}
type Bird = {
kind: 'bird',
name: string,
fly: () => void
}
function move (x: Fish | Bird) {
if (x.kind === 'fish') {
return x.swim();
}
return x.fly();
}
IBUFOBJOUFSO
Slide 41
Slide 41 text
as榫ַג㑔ؓئ٭ب٘٤ 5ZQF"TTFSUJPO
˝ 5ZQF4DSJQUמזי䫟鑜ג㑔┕傴׀גַכ׀מ✳ֹ
˝ 㑔؞ٔتعךעםַ ٚ٤ذّؕ┕ךס䨕艵ַֿם؆㚺
׆כעםַ
˝ 㛡ׂס㕙⺬ע㲹מםסךյ儖䎎מ䑒釐ם㕙⺬דׄ⮵榫
IBUFOBJOUFSO
Slide 42
Slide 42 text
as榫ַי+BWB4DSJQUך傴־גؤ٭غ燯
吣
// ܕFooΛՃ͢Δ
type Foo = {
bar: number;
piyo: string;
}
function something (x: Foo) {
// ܕͱͯ͠߹͍ͬͯΔ͕ɺϥϯλΠϜ্Ͱͷ࣮ߦ࣌ʹpiyo͕undefinedʹͳΔͷͰΤϥʔ͕ى͖Δ
return x.piyo.split(',');
}
var foo = {} as Foo; // Fooͱͯ͠ѻ͑ΔΑ͏ʹ͓ͯ͘͠
// ࣮ࡍʹbarͳͲແ͍͕Fooͱͯ͠Ξαʔγϣϯ͍ͯ͠ΔͷͰͤΔ
something(foo);
IBUFOBJOUFSO
Slide 43
Slide 43 text
DPOTUؓئ٭ب٘٤
asֿ㲹מםםַ⮵榫嫎ֿ׆ךնas constכ׆כך㚺丗♏⪌侇םלמ⺱⡁
כיؓئ٭ب٘٤יׂ מreadonly㷯䓪♀┙
ն
const a = [1, 2, 3]; // aͷܕnumber[]ͱͳΔ
const b = [1, 2, 3] as const; // bͷܕreadonly [1, 2, 3]ͱͳΔ
type Pallet = {
colors: readonly Color[]
}
function setPallet(p: Pallet) { /* do something */ }
const pallet = {
colors: ['red']
}// ͜͜ʹ as const Λ͚ͳ͍ͱ{ color: string[] }ͱਪ͞ΕͯΤϥʔʹͳΔ
setPallet(pallet)
IBUFOBJOUFSO
Slide 44
Slide 44 text
anyכunknown
5ZQF4DSJQU┕ך┘㲊ם㑔䣽ֹג״ס亠嫎磆☭ױն
IBUFOBJOUFSO
Slide 45
Slide 45 text
any
˝ ⛰־ס⡁ֿ⪌זיַ׆כ炐նundefined־؛هةؘ
ؠع־꞊丗ױך⛰ֿ⪌זיַי荁ַնtscֿ㑔ס吾錞
םַסךյas⺱喋מ鹴ׄ㕙⺬ע鹴ׄն
let anything: any = {};
// anyʹԿͰೖͰ͖Δ
anything = () => {};
anything = null;
anything.split(','); // anyͷ߹ϝιουͳΜͰࢀরͰ͖Δ
IBUFOBJOUFSO
Slide 46
Slide 46 text
unknown
˝ any⺱喋מ⛰־ס⡁ֿ⪌זיַ㑔ն
˝ anyכ鷿ַյunknownעْخشغמؓؠجتֹככ吾錞侇מؙٚ٭מםն
˝ ⮵榫侇מ㑔؝٭غי㑔礓鱮׳
// ݺͼग़͠ଆunknownͳͷͰ͖ͳΛͤΔ
function stringifyForLog (val: unknown) {
if (typeof val === 'function') {
const name = val.name ?? '(anonymous)'
return `function: ${name}`;
} else {
return JSON.stringify(val);
}
}
IBUFOBJOUFSO
Slide 47
Slide 47 text
typeכinterface
˝ typeעؙؕٛؓت
˝ interfaceע؛هةؘؠعמ㑔♀ׄ⮯ס亠嫎ն
˝ 仴㰆ססמ䏲־وٞقطؔ鴑ⱶך׀סעinterface
˝ ٚؕهֿٚٛ䬠❠גinterface⮵榫縖ֿ舅榺מ䦡䍖ך׀
˝ typeע⮯ס⺲⯥♀ׄ䑒釐ֵֿ
˝ typeכinterfaceס✳ַ⮆ׄעؤ٭غ釨硜םלך荇չם孱孬╚䍖ֵֿ
סךյ齁מ⪌ף齁מ䏼זיׂדַ
IBUFOBJOUFSO
Slide 48
Slide 48 text
interface榫ַג䦡䍖
GSPN5ZQF4DSJQU%PDVNFOUBUJPO&WFSZEBZ5ZQFT⫂%JFSFODFT#FUXFFO5ZQF"MJBTFTBOE*OUFSGBDFT
IBUFOBJOUFSO
Slide 49
Slide 49 text
꞊丗
仴מئ٤وٜךע⛰䈱⭳י׀יַׄלյ䌕丗鲭⡁ס㑔ס傴׀亠
סقذ٭٤גה磆☭יֽ׀ױն
function f (x: string): number { return x.length };
// ಛʹreturnΛ͠ͳ͍߹ฦΓʹvoidΛࢦఆ͢Δ
const a: () => void = () => { console.log('a') };
// ΦϓγϣφϧͳҾkeyʹ?Λ͚Δ
// ਪ͞ΕΔͷͰྑ͍ͳΒฦΓͷܕলུՄ
const b = (n?: number) => `${n}`;
// Rest ParametersΛड͚औΔ߹͜͏͍͏ײ͡
const c = (...texts: string[]) => { return texts.join('|') }
IBUFOBJOUFSO
Slide 50
Slide 50 text
㑔䌕丗 (FOFSJDT
˝ ꞊丗ס鲭⡁ס㑔מ꞊⯆硜㛙־┙ֻיյ꞊丗⫂鼧ך⮵榫ך׀ն
˝ ׂׂ㑔㲊紶םל釤כ㲊紶יַי⮵榫⺎耆דׄלյ妳♀ַיַםַכַֹ׆כֵׂ
˟
˝ 5ZQF4DSJQUךRVFSZ4FMFDUPSْخشغ✳ֹכ׀מ㑔䌕丗䧗㲊)BUFOB%FWFMPQFS#MPH
const getJSON = (url: string): Promise => {
// res.jsonanyͱͳΒͣʹܕҾͰ͞Εͨͷͱղऍ͞ΕΔ
return fetch(url).then(res => res.json())
}
// ͜͜ͰusersUser[]ʹͳΔ
const users = getJSON('/api/users');
// ͜͜ͰblogsBlog[]ʹͳΔ
const blogs = getJSON('/api/blogs');
IBUFOBJOUFSO
Slide 51
Slide 51 text
禈㑔䌕丗
˝ extends✳ֹכ䧗㲊ג㑔ؕ٤ذ٭نؘ٭ت嵹גֹמ䧗㲊
ך׀
˝ 㑔䌕丗אסױױ꞊丗ס䌕丗ס㑔מ✳ֹ׆כךꪐ氳鉮冪侇מ⽛צ⭳
⩕ס䌕丗ס㑔־鲭⡁䫟鑜יׂ
function echo (text: T): T { return text };
const a = echo('foo'); // a ͷܕ 'foo'
const str: string = 'foo';
const b = echo(str); // b ͷܕ 'string'
IBUFOBJOUFSO
Slide 52
Slide 52 text
0WFSMPBET
˝ ꞊丗ֿ䌕丗ס丗㑔םלמ❣זי䨕艵ַֿ㚺׆כ鋗鳭亠嫎
˝ 䌕丗כ鲭⡁邾丗㲚銧ג䏲מ㲔逷傴ׂ
˝ 僃䏲ס㲔逷ע⪒יס0WFSMPBET嵹ג䑒釐ֵֿ
function request(url: string): Promise;
function request(url: string, onlyIsOk: true): Promise;
function request(url: string, onlyIsOk = false) {
const promise = fetch(url);
if (onlyIsOk) return promise.then(res => res.ok);
return promise;
}
IBUFOBJOUFSO
Slide 53
Slide 53 text
0WFSMPBETכ꞊丗ס㑔㲚銧
˝ 㓹儖ע湾ׂ傴ׂס✳זיֽׄף荁ַך
type f = (x: number) => number;
˝ ⺱喋ס׆כ׆סֹמ傴ׄ
type f = {
(x: number): number;
}
˝ 0WFSMPBET㑔㲚銧כ⪦מ傴׀גַ㕙⺬ע䏲縖✳ֹ
type func = {
(x: number): number;
(x: string): string;
}
IBUFOBJOUFSO
Slide 54
Slide 54 text
never
˝ 祀㵚מ氦榟٬⮼鷼םַ׆כ辐㑔
˝ ❆ֻף扛ٜ٭وֵֿ꞊丗ע祀㵚מ㱭▼םַ꞊丗םסך鲭⡁עneverמם
˝ voidע♏⪌⺎耆דֿյneverמעneverסײ♏⪌⺎耆 חױ㚺丗מע㓹儖
氳מ♏⪌⭳全מؙٚ٭מם
function infiniteLoop(): never {
while (true) {}
}
TUSJDU/VMM$IFDLJOHֿ僗Ⲗמםזיַםַ㕙⺬סײ♏⪌⺎耆ն┉亠ך+BWB4DSJQUסٚ٤ذّؕ┕ךעundefinedםסךյ♏⪌׆כעכ؆לםַךֹն
IBUFOBJOUFSO
Slide 55
Slide 55 text
never榫ַג禿糵䓪زؘشؠ
˝ never榫ַ׆כך㑔؝٭غםלךס禿糵䓪زؘشؠך׀
type Color = 'red' | 'yellow' | 'perple';
function magical (color: Color) {
switch (color) {
case 'red':
return 'tomato';
case 'yellow':
return 'banana';
default:
// શͯͷcase͕ཏ͞Ε͍ͯΕ͜͜ʹ౸ୡ͢Δ͜ͱͳ͍
// ͜ͷ߹'perple'͕ೖ͞ΕΔՄೳੑ͕͋ΔͷͰɺ੩తղੳ࣌ʹΤϥʔʹͳͬͯݕग़Ͱ͖Δ
const val: never = color;
throw new Error(`"${color}" is not implemented`);
}
}
IBUFOBJOUFSO
Slide 56
Slide 56 text
זכדׄ浊״ؤ٭ػ٭
˝ ׆׆ױך杼鉮גכ׀מ鐆׳כ➘⮵םؤ٭ػ٭ך
˝ הזכגطؠؼشؠכ⺬י傴ַיֽ׀ױ
IBUFOBJOUFSO
Slide 57
Slide 57 text
ReadonlyReturnType
˝ Readonlyע؛هةؘؠع鿥⮛ס釐碛鐆ײ鱮ײ㵠榫מך׀
˝ ⫋䅯氳מע鸵榫םַ׆כמ嫰䙫
type PersonRo = Readonly
˝ ReturnTypeע꞊丗ס鲭⡁㑔כי䐂
type Func = () => string;
type ReturnVal = ReturnType // ReturnValstringͱղऍ͞ΕΔ
IBUFOBJOUFSO
Slide 58
Slide 58 text
typeof庋畀㯸
˝ ׆הע⯥鳭ססכע鷿ֹ5ZQF4DSJQU磝ײ鱮ײססն㑔ؓ
ؿط٭ب٘٤傴ׂ㕙䢥ך⮵榫ն
˝ +BWB4DSJQUך㲚銧ג⡁ꪐ氳鉮冪י㑔䐂
const hello = () => 'hello';
type Func = typeof hello;
type P = ReturnType; // Pstringͱղऍ͞ΕΔ
IBUFOBJOUFSO
Slide 59
Slide 59 text
keyof庋畀㯸
؛هةؘؠعסLFZ⮛䧸יVOJPOUZQFכי䐂
const config = {
checkJs: false,
force: true,
}
// typeofͰconfigͷܕΛಘͯɺkeyofͰͦͷΦϒδΣΫτͷܕͷΩʔΛྻڍ͢Δ
type ConfigKey = keyof typeof config; // "checkJs" | "force"
const getConfigVal = (key: ConfigKey) => config[key];
getConfigVal('ignore'); // Τϥʔͱͯ͠ݕग़Ͱ͖Δ
IBUFOBJOUFSO
Slide 60
Slide 60 text
*OEFYFE"DDFTT5ZQFT
+BWB4DSJQUך鿥⮛؛هةؘؠعמ[]✳זי⡁⭳ֹמ㑔
ך⺱ֹם׆כֿ⭳全նtypeofkeyofםלכ磝ײ⺬׆
כך+BWB4DSJQUך㲊紶ג鿥⮛؛هةؘؠعס⡁־⮛䧸ג㑔םל
榟䡗ך׀ն
type Person = {
name: string,
age: number,
};
type Age = Person['age']; // number
const signalColors = ['red', 'blue', 'yellow'] as const; // as const͠ͳ͍ͱstring[]ʹͳΔ
// Arrayʹ[number]ͰΞΫηε͢ΔͱྻͷΛྻڍͨ͠ܕΛಘΒΕΔ
type Signal = typeof signalColors[number]; // 'red' | 'blue' | 'yellow'
IBUFOBJOUFSO
Slide 61
Slide 61 text
◫䄐㑔 *OUFSTFDUJPO5ZQFT
邾丗ס㑔磝ײ⺬י㑔榟䡗ն❆ֻףٗ٭ا٭ס嘤מ
䑴יٝتَ٤تס㑔㚺ֻ㕙⺬ע׆ַֹֹ䚉ն
type Blog = { title: string, domain: string }
type Editor = { editable: true, authority: ['edit'] }
type Owner = { editable: true, authority: ['edit', 'publish'] }
type ResponseForEditor = Blog & Editor;
type ResponseForOwner = Blog & Owner;
IBUFOBJOUFSO
Slide 62
Slide 62 text
$POEJUJPOBM5ZQFT
+BWB4DSJQUס└ꯁ庋畀㯸כ⺱׆כֿ㑔辐杯ס╈ך⭳全ն
condition ? trueExpression : falseExpression // JavaScriptͷࡾ߲ԋࢉࢠ
// SomeType͕OtherTypeΛຬͨͤTrueTypeΛಘΔ
SomeType extends OtherType ? TrueType : FalseType;
0WFSMPBET✳מ꞊丗ס䌕丗מ䑴י鲭⡁ס㑔㚺ֻ
declare function getID(fancy: T): T extends true ? string : number;
const stringReturnValue = getID(true);
const numberReturnValue = getID(false);
const stringOrNumber = getID(Math.random() < 0.5);
IBUFOBJOUFSO
Slide 63
Slide 63 text
3FBDUמחַי NJO
IBUFOBJOUFSO
Slide 64
Slide 64 text
3FBDUמחַי
׆ס珕ךע3FBDUמ꞊僃⛥ס鐆ײ傴׀ֿ⭳全ֹמם׆
כ泘䧗ױն
IBUFOBJOUFSO
Slide 65
Slide 65 text
㲚銧氳 EFDMBSBUJWF
6*מחַי
˝ 6*鼧⮆㲚銧氳מ鋗鳭亠嫎ס׆כ
˝ חױյלַֹֹ׆ככַֹסהזכ釤יַ׀ױ
˝ ؘؗهؓوٛآ٭ب٘٤סٛشزتُ٭عنؚ٤ؓوٛס氧㕙
ךյ(6*Ⳃ氳מ啶疣٬㚺催ꄆ釐䈱כ姲״(6*ס邾ꥭ䓪ֿ
劲壿מ⺸┕גכַֹ塷⺒ֵֿױג
˝ א؆ם╈յ6*Ⳃ氳榟䡗יַכյ(6*鼧⮆ס䳩⛼鴑ⱶגצ
מؤ٭غס邾ꥭ䓪ֿ냕ױזיַׂכַֹゖ갭מ泡ꪫֿהךג
IBUFOBJOUFSO
Slide 66
Slide 66 text
K2VFSZ⮵榫גⳂ氳榟䡗ס❆
const list = $('
- ');
const button = $('Ճ');
let count = 0;
button.on('click', () => {
const item = $(`
- ${fizzbuzz(++count)} `); list.append(item); }); $(document.body).append(list).append(button); IBUFOBJOUFSO
Slide 67
Slide 67 text
Ⳃ氳榟䡗סゖ갭憠
˝ ؤ٭غ釤דׄךעלַֹֹ䡗冽擻ֿ榟䡗ס־ْؕ٭
ةטַ
˝ 6*ס鴑ⱶ榟䡗ֿאס㕙אס㕙ך傴־ֿהך硜ֿꦘׂ
םֿה
˝ طتعאס☽錃銶┕ס䄄㜂םלꦘׂם
IBUFOBJOUFSO
Slide 68
Slide 68 text
㲚銧氳6*ס❆
˝ )5.-ע㲚銧氳6*ס♏辐❆
˝ ؤ٭غס釤ג泘ֿאסױױ辐炐
- 1
- 2
- fizz
- 4
- buzz
Slide 69
Slide 69 text
+49מחַי
˝ 3FBDUךע㛡ׂס㕙⺬յ+49כַֹ鋗嫎ֿ✳ֻ
˝ )5.-傴ֹׂמ3FBDU&MFNFOU鋗鳭ך׀
˝ 㲚銧氳מ6*傴ׂ׆כֿ⭳全
const list =
- 1
- 2
- fizz
- 4
- buzz
Slide 70
Slide 70 text
+49מחַי
˝ {}✳ֹ׆כך+BWB4DSJQUס䌋㷣ꝧך׀ն+49舅⛮ױג䌋םסךյ⪌㯸מי㛻┓㜂ն
˝ ✳ֻ㕙䢥ע釐碛ס╈ױגע㷯䓪
˝ className class
htmlFor for
םל┉鼧ע+BWB4DSJQUס◀硜鏤כ逇סך㚺催יַ
const classname = "fizz-buzz-list";
const itemProps = { className: 'fb-item', style: { listStyleType: 'square'} }
const list =
-
{[1, 2, 3, 4, 5, 6].map((i) =>
- {fizzbuzz(1)} )}
Slide 71
Slide 71 text
3FBDU$PNQPOFOU+49✳זי鋗鳭
˝ 3FBDUך鋗鳭ג6*鼧⿁ס׆כ3FBDU$PNQPOFOUכ⽛צױ
˝ ⩝לסK2VFSZךסⳂ氳榟䡗ס❆3FBDUך鋗鳭כ׆ַֹֹ䚉
˝ )5.-ס㲚銧氳ם啶鵰כ+BWB4DSJQUס꞊丗ס㲔车ꯂ ┕־┖
ֿ磝ײ⺬זיַ
˝ 域ע׆ꯂ鴑זי釤יַ׀ױֹ
function List () {
const [count, setCount] = useState(0);
const range = useRange(1, count); // ࣈΛ͢ͱ[1, ..., count]Λฦͯ͘͠ΕΔ
const increaseCount = () => setCount(prevCount => prevCount + 1);
return <>
-
{range.map(n =>
- {fizzbuzz(n)} )}
Slide 72
Slide 72 text
놹ֿ꧟ֻ♞䘶 7JSUVBM
%0.
˝ 3FBDUס⫂鼧ךע㲔꤀ס%0.ךעםׂյ%0.כ㵚מםⶡ硾ם啶鵰⛮䧏זיַն׆ֿ♞䘶%0.כ⽛ף
יַն
˝ 3FBDUךע敯䛜ס㚺催吾湳כյ㚺催⯥䏲ס♞䘶%0.ס䄐⮆銶畀յאס䄐⮆ֵֿ鼧⮆דׄ㲔꤀ס
%0.מ鸵䑴ն
˝ هٚؗاסٝ٤رٛ٤ءؤتع䤰ֻחחյꝧ氦縖ע6*אסױױ鋗鳭דׄך荁ַכַֹ☼磝ײ㲔杯
יַն
˝ ٛتعםלךꯂ樑ֿ⪌僀꤀םלעkeyכַֹ㷯䓪┙ֻ׆כךאס㯸釐碛ֿ⺱ךֵ׆כ炐׆כ
ֿ⭳全
IUUQTKBSFBDUKTPSHEPDTSFDPODJMJBUJPOIUNM
%PDVNFOU0CKFDU.PEFMס樋ն)5.-9.-乃傴ס啶鵰䳩⛼ג״סوٞءِٚ٤ءؕ٤ذ٭نؘؕتס׆כն
IUUQT[FOOEFWNJ[DIJCPPLTDDGDDDC
IBUFOBJOUFSO
Slide 73
Slide 73 text
'VODUJPO$PNQPOFOUךֵْٛشع
˝ 3FBDU$PNQPOFOUע꞊丗榫ַי辐杯׆כך꞊丗㑔وٞءِٚ٤ءס哭䒝⮵榫ך׀ֹמיַ
˝ חױ3FBDU$PNQPOFOUע3FBDU$PNQPOFOUױגעnull鲭꞊丗
˝ ظ٭ذעِٖؕ٭ذهٜךֵֹמ
˝ ؛هةؘؠع鿥⮛䣽ֹ꤀עؤم٭⛼䡗י־㚺催նArray.prototype.pushםל滭㙗氳ם㚺
催םַֹמ
˝ 䌕丗ס⡁־磵冽 3FBDU$PNQPOFOU
鲭硾睛꞊丗כי辐杯
˝ 1SFTFOUFS7JFXםלס㷺מ⮆ׄג䏲מյא磝ײ⺬ג⺬䡗꞊丗כי3FBDU$PNQPOFOUֿ辐杯⭳全
˝ 6OJU5FTUםלֿ癨ⶡמםזג
3FBDU$PNQPOFOUؠٚت禆䤔גDMBTT榫ַג亠嫎ֵֿյ㵧全氳ם䉬塛ֿ◀㲊יַג״յ꞊丗榫ַג亠嫎סײ✳榫׆כ䍚ׂ䫟㝢ױն
IBUFOBJOUFSO
Slide 74
Slide 74 text
'VODUJPO$PNQPOFOUכ5ZQF4DSJQU
˝ 5ZQF4DSJQUך+49鋗鳭㕙⺬ע䦡䍖㯸.tsxמ
˝ 㑔䫟鑜מ♳כ() => JSX.Elementמםն⟊㱤䓪םל縒ֻ
כReact.FCםל伺炐סֿ荁ַ
type Props = { name: string }
const Welcome: React.FC = ({name}) => {
return
Welcome {name}
} 3FBDU$PNQPOFOUי┘塜םundefined鲭׆כםל吾⭳יׂױ 㛻ױ־מReact.FCכReact.VFCכַֹסֵֿױն3FBDUؤ٤َ٭ؾ٤عס㲊紶מ'$ךעםׂ7'$✳ַֹׄד䤗软ؿ٭ع IBUFOBJOUFSOSlide 75
Slide 75 text
1SPQTכ4UBUF
˝ 3FBDU$PNQPOFOUמע⡁䧏ח亠嫎ֿ㛻׀ׂחֵ
˝ ꞊丗ס䌕丗כיׄ1SPQTכ⫂鼧敯䛜⟊䧏4UBUF
IBUFOBJOUFSO
Slide 76
Slide 76 text
1SPQT峚ׄ
˝ ׄ⣐ע꞊丗ס瑬䌕丗ך؛هةؘؠعכיׄ
type Props = { name: string }
const Welcome: React.FC = ({name}) => {
return
Welcome {name}
} ˝ 峚⣐ 鈐⣐ ע+49ך㷯䓪⡁כי峚ն؛هةؘؠعס؞٭כ⡁ֿאב 㷯䓪⺲כ⡁מ㵚䑴 //Welcome John
IBUFOBJOUFSOSlide 77
Slide 77 text
敯䛜 4UBUF
䣽ֹ
˝ useStateכַֹ攐墤ם꞊丗✳ֹ׆כך敯䛜䧏ח׆כֿ⭳全
˝ ׆ַֹזגuse־㡎ױ꞊丗ע3FBDUךنشؠ )PPLT
כ⽛ף攐⮯ם꞊丗
function Counter () {
const [count, setCount] = useState(0);
const increaseCount = () => setCount(prevCount => prevCount + 1);
return
Χϯτ: {count}
Χϯτ
}
IBUFOBJOUFSO
Slide 78
Slide 78 text
3FBDUס)PPLTמחַי
IBUFOBJOUFSO
Slide 79
Slide 79 text
)PPLTס䫍
3VMFTPG)PPLTˑ3FBDU
˝ ⺲⯥עuse־㡎״
˝ عشوٝيٜך⽛ש
˝ ifס╈םלך⽛ףםַ
˝ FBSMZSFUVSO⯥מ䑒⽛ש
׆עeslint-plugin-react-hooksך吾⭳יֹׂמ⭳全
IBUFOBJOUFSO
Slide 80
Slide 80 text
♏辐氳ם磝ײ鱮ײ)PPLTס磆☭
IBUFOBJOUFSO
Slide 81
Slide 81 text
useState
˝ useState()ך⮣僿⡁┙ֻ׆כֿ⭳全յ鲭⡁סذوٜסח泘ֿ
杯㏇ס⡁ךյח泘ֿTFUUFSמםזיַ
˝ 鲭⡁ֿذوٜ 鿥⮛
םסךյ㞐׀ם⺲⯥חׄסֿ癨ⶡ
˝ TFUUFS⽛שכ⫂鼧敯䛜ֿ催二ג׆כֿ$PNQPOFOUמ鵟湳
יյ♞䘶%0.ס⫋榟䡗յ奂鬳յٝ٤رٛ٤ءס催二ֿ车
˝ 䫟鑜ך׀םַס㑔䧗㲊גַ㕙⺬ע㑔䌕丗榫ַ׆כֿ⭳全
const [color, setColor] = useState('red');
IBUFOBJOUFSO
Slide 82
Slide 82 text
useStateסTFUUFSמחַי
˝ 二ַ⡁峚
const [color, setColor] = useState('red');
const change2Blue = () => setColor('blue');
˝ 泡⯥ס⡁⮵榫י二ַ⡁婊㲊
const [count, setCount] = useState(0);
const increaseCount = () => setCount(prevCount => prevCount + 1);
IBUFOBJOUFSO
Slide 83
Slide 83 text
二ַ⡁峚כ׀ס蛽כ狌
const [count, setCount] = useState(0);
const increaseCount = () => setCount(count + 1);
כיױֹכյ
const increaseDouble = () => {
increment();
increment();
}
סֹםס⛼זגכ׀מյincreaseDouble⽛؆ך1־㘃ֻםַכ
ַֹ杯霄מ鸿鷔ךֹն
IBUFOBJOUFSO
Slide 84
Slide 84 text
꞊丗⫂ס㚺丗تؤ٭وכuseState
❆ֻףյcountֿ5ךֵככ
function Component () {
const [count, setCount] = useState(0); // ͜͜ͰมcountείʔϓͰݻఆ͞ΕΔ(5)
const increaseCount = () => setCount(count + 1); // ↑Ͱݻఆ͞Εͨcount + 1(=6)ΛsetCountʹ͢
const increaseDouble = () => {
increment(); // ↑Ͱ࡞ͬͨؔΛݺͿͱɺ6͕setCountʹ͞ΕΔ
increment(); // ͜ͷؔΛݺͿͱ͖ɺ6͕setCountʹ͞ΕΔͷͰɺ6ͷ··
}
}
IBUFOBJOUFSO
Slide 85
Slide 85 text
ؤ٭ٜفشؠ꞊丗峚亠嫎ך傴׀泡
❆ֻףյcountֿ5ךֵככ
function Component () {
const [count, setCount] = useState(0); // ͜͜ͰมcountείʔϓͰݻఆ͞ΕΔ(5)
const increaseCount = () => setCount(prevCount => prevCount + 1) // prevCountݺͼग़࣌͠ͷલͷ
const increaseDouble = () => {
increment(); // ͜͜ͰݺͿͱɺprevCountʹ5͕ೖ͍ͬͯΔͷͰɺprevCount+1=6͕setCount͞ΕΔ
increment(); // ͜͜ͰݺͿͱɺprevCountʹ6͕ೖ͍ͬͯΔͷͰɺprevCount+1=7͕setCount͞ΕΔ
}
}
催二䏲סTUBUFס⡁ֿ催二⯥ס⡁מ❣㰆יַ㕙⺬עյؤ٭ٜ
فشؠ꞊丗峚䎬䌋✳ֹֹמױֹն
IBUFOBJOUFSO
Slide 86
Slide 86 text
useEffect
˝ 3FBDU$PNQPOFOU⫂ךⰜ⛼榫⭚杼ꪜ⺱僿מ⭚杼车ַגַ㕙
⺬מ⮵榫)PPLT
˝ %0.催二ג䏲מ⽛צ⭳⭚杼傴ׂ׆כֿ⭳全
˝ %0.ס催二䏲מQSPQTTUBUF⮵榫ג⭚杼㲔车׆כ
ֿ⭳全
IBUFOBJOUFSO
Slide 87
Slide 87 text
$PNQPOFOUס催二夵מؗ٤ذ٭ס丗
alertךٗ٭ا٭מ鵟湳
function Counter () {
const [count, setCount] = useState(0);
const increaseCount = () => setCount(prevCount => prevCount + 1);
alert(count)
return
{/* ུ */}
}
˝ alertע⺱僿氳מ㲔车꞊丗םסךյٗ٭ا٭ֿր0,ց鹟䥃ױ
ך㲔车ֿ塛ױյٝ٤رٛ٤ءֿםׂםזיױֹն
IBUFOBJOUFSO
Slide 88
Slide 88 text
useEffectס╈ךalert⽛ש
function Counter () {
const [count, setCount] = useState(0);
const increaseCount = () => setCount(prevCount => prevCount + 1);
useEffect(() => { alert(count) });
return
{/* ུ */}
}
˝ $PNQPOFOUֿٝ٤رٛ٤ءג䏲מյ׆ס$PNQPOFOUٝ٤رٛ٤
ءגⰜ⛼榫כיalertֿ辐炐
׆עئ٤وٜםסךյalert✳זיױֿյ㲔꤀מٗ٭ا٭מنؔ٭غفشؠג״מalert✳ֹסע䌕׀禈׀6*هٞش؞٤ءיױֹסך鹴ׄג亠ֿ荁ַךն鸵⮉ם6*
$PNQPOFOU⫂㛙מ榫䙫יֽׂכ荁ַךֹն
IBUFOBJOUFSO
Slide 89
Slide 89 text
useEffectכ❣㰆鿥⮛
˝ useEffectעuseStateםלס☽ס)PPLTכ鐧יⳂׂ׆כֿ僿䏨יַն
˝ ֵTUBUFםלֿ催二ג꤀מⰜ⛼榫⽛צ⭳ֹמյuseEffectס瑬䌕丗מ❣㰆辐鿥⮛
峚׆כֿ⭳全
ؗ٤ذ٭ֿחֵյאבס㚺催alertגַכַֹ㕙⺬縒ֻ
const [countA, setCountA] = useState(0);
const [countB, setCountB] = useState(0);
useEffect(() => { alert(`conutAͷ͕${countA}ʹߋ৽͞Ε·ͨ͠`) });
useEffect(() => { alert(`conutAͷ͕${countB}ʹߋ৽͞Ε·ͨ͠`) });
׆㲔车כcountAյcountBסלהֿ催二גכ׀┸亠鵟湳ն
IBUFOBJOUFSO
Slide 90
Slide 90 text
useEffectכ❣㰆鿥⮛
˝ ❣㰆鿥⮛錃㲊׆כךյאבס❣㰆鿥⮛⫂סַ־ס⡁ֿ㚺催גכ׀ס
ײⰜ⛼榫ֿ⽛צ⭳ֹמ⭳全
const [countA, setCountA] = useState(0);
const [countB, setCountB] = useState(0);
useEffect(() => { alert(`conutAͷ͕${countA}ʹߋ৽͞Ε·ͨ͠`) }, [countA]);
useEffect(() => { alert(`conutAͷ͕${countB}ʹߋ৽͞Ε·ͨ͠`) }, [countB]);
˝ ❣㰆鿥⮛ע╈骰ֿ狜ס鿥⮛[]䧗㲊כյ$PNQPOFOUסُؗ٤ع侇מ㲊׆כ
ֿ⭳全
$PNQPOFOUמ㵚䑴ג%0.ֿ䨯⪌ ⮣㍑䬞槆
׆כُؗ٤ع NPVOU
յאס%0.ֿ⯡ꢜ׆כؓ٤ُؗ٤ع VONPVOU
כ⽛צױ
㚺催ג׆כ吾湳奂鬳ס鎋碷מחַיע♀ꎰր)PPLTס❣㰆ס奂鬳כ؛هةؘؠعס⺱┉䓪מחַיց⹆拨
IBUFOBJOUFSO
Slide 91
Slide 91 text
useEffectכؠٛ٭٤ػشو
˝ useEffectע꞊丗鲭׆כךאס꞊丗ֿ域סⰜ⛼榫ֿ⽛צ⭳⯥מ㲔车
˝ ׆⮵榫כⰜ⛼榫סؠٛ٭٤ػشوֿ⭳全
roomIdֿ㚺催כյزٔشعסַ頇鐆寕յ二ַ頇鐆ꝧ㡎❆
useEffect(() => {
const handler = () => {/* ৽͍͠ϝοηʔδΛड͚औͬͨͱ͖ͷॲཧ */};
chat.subscribe(roomId, handler);
return () => {
chat.unsubscribe(roomId);
}
}, [roomId])
狜鿥⮛䧗㲊יַ㕙⺬םלעؓ٤ُؗ٤ع侇מ㲔车
IBUFOBJOUFSO
Slide 92
Slide 92 text
斻舅نشؠ $VTUPN)PPL
˝ use־⺲⯥ֿ㡎ױյ⫂鼧ך☽ס)PPL⽛צ⭳꞊丗ס׆כ
˝ 邾丗ס)PPLT磝ײ⺬גյ$PNQPOFOUס䨕艵ַ⪦鵟יյחס꞊丗מ⮉⭳כ׀םלמ⮵榫
const useGetStatus = ({userId}) => {
const [status, setStatus] = useState(null);
useEffect(() => {
const handler = (user) => {
setStatus(user.status);
}
Api.subscribe(userId, handler);
return Api.unsubscribe(userId, handler);
});
return status;
}
IBUFOBJOUFSO
Slide 93
Slide 93 text
斻舅نشؠמחַיס5JQT
˝ 斻舅نشؠמ$PNQPOFOUס䏔Ⱏ⪦鵟׆כך⮉⭳ג嚀耆סײطتع⺎耆מם
˝ 斻舅نشؠך鲭؛هةؘؠع꞊丗םלעuseStateuseMemoյuseEffectך⺱┉䓪䥵⟊
יֽׂ>
˝ 攐מ꞊丗מחַיעֹז־碛儢מ꞊丗؛هةؘؠع鲭יױַֿהםסךյ妳מיֽׂכ⺮
˝ 斻舅نشؠ⽛צ⭳⣐ֿ⺱┉䓪⟊䧏ג״מuseEffectמ峚 ׆כ吾鋀
䑒釐ֿ⭳
י׀יױֹ
˝ 磵冽յאסױױךע⮵榫ך׀מuseEffect׆כמםյ磵冽氳מ⫋⮵榫䓪┖ֿזיױ
ֹ
>鎋ׂע♀ꎰր)PPLTס❣㰆ס奂鬳כ؛هةؘؠعס⺱┉䓪מחַיցך鉮鐄יַױն
IBUFOBJOUFSO
Slide 94
Slide 94 text
3FBDU'SBHNFOUמחַי
˝ <>כ>ך㍱ֹכ3FBDU'SBHNFOU⛼׆כֿ⭳全
˝ 3FBDU$PNQPOFOUעחס&MFNFOUמםזיַ䑒釐ֵֿסךյ׆✳םַכ┘釐ם
םל
ך㍱םַכַׄםׂם
˝ ח♓┕ס3FBDU$PNQPOFOU┾דׄסכ׀מ僗Ⲗ
function Component () {
return <>
hello
͜Μʹͪ > } keyםלסوٞقطؔ錃㲊גַ㕙⺬עכך♏榫⺎耆 IBUFOBJOUFSO
͜Μʹͪ > } keyםלסوٞقطؔ錃㲊גַ㕙⺬עכך♏榫⺎耆 IBUFOBJOUFSO
Slide 95
Slide 95 text
ֽ檄ױךג
˝ 5ZQF4DSJQUכ3FBDUמחַיاشכ哭鈝מחַיֽ⚥ֻױג
˝ ׆דׄך氵؆ֿ傴ׂסעꦘַ־ױ؆ֿյ5ZQF4DSJQU
3FBDUמ䧪䡵׀ז־ׄמםזיׂףכ䓙זיַױ
˝ ׆♓㛙מעיםؕ٤ذ٭٤ך⮣״י㰢ש٬鉴䤗软ֵֿכ䓙
ַױֿյ佭ꪜ膳מزٔٝ٤ةיׂדַ
˝ +BWB4DSJQUنٞ٤عؙ٤غס┩槡ע催מ䇶ֿזיַױնؘؗههٚؗ
ا╈䑏מֵכ׆ךٗ٭ا٭ס泘מ泡䫘鉴׆כס㛡ַنٞ
٤عؙ٤غס┩槡哧؆ךׂדַն
IBUFOBJOUFSO
Slide 96
Slide 96 text
זכ湳גַ
㵼馐ײ⭳ג״מ؛تتْס傴盈ؘؗهئؕعמחַיնױע5ZQF4DSJQU3FBDUע⪜
䌋ئؕعסزٖ٭عٜٛؓغ؞ْٖ٤عֿ⩗㲔יַסךյא鐆׳ס؛تتْն
˝ +BWB4DSJQU+BWB4DSJQU1SJNFS鳿םַג״ס⪌ꝛ傴KTQSJNFS
˝ 5ZQF4DSJQUوٞءِٚ٤ء5ZQF4DSJQU
˝ 3FBDU3FBDUـ٤ث؛٤ٚ٭ؼ٤ء瑬撶
˝ %0.*OUSPEVDUJPOUPUIF%0.8FC"1*T].%/
⛰־㍭זג׆כ湳גַ׆כֵֿזגյ⦇ْ٤ذ٭אס☽骰鲣םؙ٤ةؼؓמם؆ך绂
ַיײיׂדַ
IBUFOBJOUFSO
Slide 97
Slide 97 text
♀ꎰ
儖稴מ⪌⮉ם־זג馐ײ鱮؆ד遨餉鉮鐄מחַי傴ַיַױն艄⽏ֵֿף鐆؆ךׂדַ氳םؤ٭ػ٭ךն
˝ "SSPX'VODUJPOמחַי
˝ "SSPX'VODUJPOמ糋׀䬵ֻ⭳全םַآ٭ت
˝ "SSPX'VODUJPOכthis
˝ )PPLTס❣㰆ס奂鬳כ؛هةؘؠعס⺱┉䓪מחַי
˝ useMemouseCallback榫ַגقنؚ٭ُ٤ت䷉ャ
˝ 3FBDU$PNQPOFOU⫂ך%0.מؓؠجت
˝ +BWB4DSJQUؘؗهؓوٛآ٭ب٘٤ך䬠❠꤀מ✳榫ص٭ٜزؘؕ٤מחַי
˝ +BWB4DSJQUنٞ٤عؙ٤غ⼽鱨ס╚םص٭ٜמחַי
˝ +BWB4DSJQUنٞ٤عؙ٤غ⼽鱨䤗软ס嘅嶖
מחַי
IBUFOBJOUFSO
Slide 98
Slide 98 text
"SSPX'VODUJPOמ糋׀䬵ֻ⭳全םַآ٭ت
˝ function✳זיؤ٤تعٚؠذ꞊丗מיַ newיַ
˝ arguments⹆拨יַ
˝ this⹆拨יַ
˝ ׆סآ٭تמחַי鉮鐄ױ
IBUFOBJOUFSO
Slide 99
Slide 99 text
"SSPX'VODUJPOכthis
˝ "SSPX'VODUJPOכfunction؞٭٠٭غך榟䡗ג꞊丗כךע
╚מthisס䣽ַֿ㛻׀ׂ樟ם
˝ ׆ס׆כמזיⶡ硾ם糋׀䬵ֻֿ┘⺎ם㕙⺬ֵֿ
IBUFOBJOUFSO
Slide 100
Slide 100 text
thisסتؤ٭وס鷿ַמחַי
˝ function榫ַג꞊丗ס㕙⺬
const person = {
name: 'chris',
say: function () { setTimeout(
function () { console.log(`I'm ${this.name}`) }
, 100); }
};
person.say(); // I'm
˝ ꞊丗ס╈סthisע⽛צ⭳⩕ס؛هةؘؠعמםն׆ס㕙⺬עwindow.setTimeout windowע
泸樋ך׀
־ס⽛צ⭳םסךյwindowמםזיַ
˝ IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC"1*8JOEPX0S8PSLFS(MPCBM4DPQF
TFU5JNFPVUUIFUIJTQSPCMFN
IBUFOBJOUFSO
Slide 101
Slide 101 text
thisסتؤ٭وס鷿ַמחַי
˝ "SSPX'VODUJPOדכتؤ٭وֿ㛙כ⺱מם
const person = {
name: 'chris',
say: function () { setTimeout(
() => { console.log(`I'm ${this.name}`) }
, 100); }
};
person.say(); // I'm chris
IBUFOBJOUFSO
Slide 102
Slide 102 text
)PPLTס❣㰆ס奂鬳כ؛هةؘؠعס⺱┉䓪
מחַי
وِٛطؔهם⡁סכ׀ע===ך奂鬳ֿյ؛هةؘؠع鿥⮛עObject.isך奂鬳
նחױյ╈骰ֿ⺱؛هةؘؠعםדׄךע樟ם⡁כי鏀閁׆כמ嫰䙫ն
const a = 'foo';
const b = 'foo';
console.log(a === b); // true
const objA = {a: 'foo', b: 10};
const objB = {a: 'foo', b: 10};
console.log(objA === objB); // true
console.log(Object.is(objA, objB)); // false
IBUFOBJOUFSO
Slide 103
Slide 103 text
❣㰆鿥⮛מ؛هةؘؠع⪌آ٭تמחַי
const config = { theme: 'sports' }
useEffect(() => {
loadConfig(config).then(() => {})
}, [config])
סֹם㕙⺬מעٝ٤رٛ٤ءס䈱מյconfigֿ⫋榟䡗նזיյ
樟ם⡁כי鏀閁יױַյ夵㍑Ⱌ⛼榫ֿ⽛צ⭳יױֹն׆ס
ֹם❆ס㕙⺬ע❣㰆מ[config.theme]כַֹ겧מ⡁傴ַיױזי
荁ַֿյ❣㰆؛هةؘؠعמחַי湳זיַ䑒釐ֵֿסךꦘ
ַն
IBUFOBJOUFSO
Slide 104
Slide 104 text
ب٤وٜם㍑鹴瓀
˝ ┉樑癨ⶡם㍑鹴瓀ע$PNQPOFOUס㛙ך⮣僿יױֻף荁ַ
const config = { theme: 'sports' }
function Component () {
useEffect(() => {
loadConfig(config).then(() => {})
}, [config]);
}
˝ ┉亠ךյ׆ס┩מע1SPQT⮵榫י؛هةؘؠع榟䡗םלׂ
ֵסךյ׆ס亠嫎ֿ✳ֻ׆כע㵼םַ
IBUFOBJOUFSO
Slide 105
Slide 105 text
؛هةؘؠعס⫋榟䡗㍑鹴ג״מuseMemo⮵
榫
˝ useMemoע3FBDUמ磝ײ鱮ױיַ)PPLTסחךյאס⺲ס鵟յ⡁ْٓ׆כֿ⭳全ױ
葏乃珕㯸釐碛מ䧏הյאס乃珕╈סⶡ鏤丗丗ֻ$PNQPOFOU傴ַיײ
function WordCount ({children}) {
// textstringͳͷͰɺͦͷ··ґଘྻʹग़དྷΔ
const words = useMemo(() => children.split(' '), [text]);
useEffect(() => { alert(`୯ޠ${words.length}Ͱ͢`) }, [words]);
}
$PNQPOFOUס╈ס㯸釐碛עchildrenכַֹ⺲⯥ךׄ׆כֿ⭳全նLorem ipsum dolor sit ametסֹם䎬ך⽛צ⭳ն
ْٓעقنؚ٭ُ٤ت䷉ャסג״מ銶畀磵冽؞ٔشبٖג׆כ
IBUFOBJOUFSO
Slide 106
Slide 106 text
useCallbackך꞊丗ْٓ
˝ ⡁⺱喋מ꞊丗ْٓגַ㕙⺬עuseCallback⮵榫
˝ ْٓםַכ夵ٝ٤رٛ٤ء侇מ꞊丗؛هةؘؠعֿ榟䡗
יױֹ
const handler = useCallback((val) => alert(val), []);
useEffect(() => {
Api.notification.subscribe(handler)
}, [handler]);
IBUFOBJOUFSO
Slide 107
Slide 107 text
useMemouseCallback榫ַגقنؚ٭
ُ٤ت䷉ャ
˝ useMemouseCallbackע⡁꞊丗סْٓמזיuseEffectםלס┘釐ם⽛צ⭳䤰⯆׆כמ
זיقنؚ٭ُ٤تס䷉ャ僿䏨ך׀
˝ 攐מuseMemoךע❣㰆מ✳םַ㕙⺬ךյ⭚杼סꄆַ銶畀磵冽ْٓ׆כךٝ٤رٛ٤ء侇סهٞش
ؠ䤰ֻ׆כ⭳全
function Component ({a, b}) => {
const resultA = useMemo(() => superDuperHighCostCulculation(a), [a]);
const resultB = useMemo(() => superDuperHighCostCulculation(b), [b]);
return <>
{a}͔ΒʮΊͪΌͪ͘Όॏ͍ܭࢉʯΛͨ݁͠Ռ: {resultA}
{b}͔ΒʮΊͪΌͪ͘Όॏ͍ܭࢉʯΛͨ݁͠Ռ: {resultB}
>
}
IBUFOBJOUFSO
Slide 108
Slide 108 text
3FBDU$PNQPOFOU⫂ך%0.מؓؠجت
˝ 3FBDUמ磝ײ鱮ױיַյ⹆拨⟊䧏ך׀ref؛هةؘؠع⛼䡗
useRef✳ֹ
˝ ref؛هةؘؠعעcurrentوٞقطؔמ杯㏇ס⡁䧏זיַ
const textInput = useRef(null);
const submit = (e) => {
e.preventDefault();
if (textInput.current.value.length < 100) return alert('101จࣈҎ্͕ඞཁͰ͢');
createPost({body: textInput.current.value})
}
return
IBUFOBJOUFSO
Slide 109
Slide 109 text
%0.סؓؠجت鹴ׄ亠ֿ荁ַ
˝ %0.מ泡䫘ؓؠجتכյ3FBDUס⯆䐒㛙סכ׆ך⡁ֿ䐂ג㚺催
ג׆כמםն
˝ ٚؕهٚٛס齉⺬םלך儖䎎מ䑒釐םכ׀סײמיֽׂכ荁ַ
const [text, setText] = useState('');
const submit = (e) => {
e.preventDefault();
if (text < 100) return alert('101จࣈҎ্͕ඞཁͰ͢');
createPost({body: text})
}
return
setText(e.target.value)} />
IBUFOBJOUFSO
Slide 110
Slide 110 text
+BWB4DSJQUؘؗهؓوٛآ٭ب٘٤ך䬠❠
꤀מ✳榫ص٭ٜزؘؕ٤מחַי
5ZQF4DSJQU+BWB4DSJQU㲔꤀סؘؗهؓوٛآ٭ب٘٤ךٗ٭
ا٭סؘؗههٚؗاך㲔车꤀מעյַׂח־סص٭ٜ磝
ײ⺬י㚺䬵גגס䬠❠ն
IBUFOBJOUFSO
Slide 111
Slide 111 text
5ZQF4DSJQUסؤ٭غֿٗ٭ا٭מ㷐ׂױךס❆
˝ 5ZQF4DSJQU̜+BWB4DSJQU
˝ UTDך⭳全ֿյCBCFMך㚺䬵׆כ㛡ַ
˝ +BWB4DSJQU̜㵚䑴هٚؗاס◍䬵䓪ֵֿ+BWB4DSJQU
˝ "1*מזיעئَ٭عיַهٚؗاךאסױױךעⳂ־םַ׆כֵֿסךյCBCFM榫ַיյ䑒釐םQPMZMMםל磝ײ⪌
˝ 54̜+4ס㚺䬵CBCFMך车ֹ㕙⺬עյאב䑒釐םوٚءؕ٤⪌י㲔车
˝ ⠕⮯ס+BWB4DSJQUنٜ̜ؒؕⶡ┉ס+BWB4DSJQUنٜؒؕ
˝ XFCQBDLםלך+BWB4DSJQUסنٜؒؕ礴⺬ CVOEMF
ն&4.PEVMFT⪒יס梪㗞ךئَ٭عיַף┘釐כַֹ鐄ֵֿյחס
نٜؒؕמםזיַ亠ֿقنؚ٭ُ٤تםלס鈝憠ך僗⮵ם׆כֵ
˝ +BWB4DSJQUنٜ̜ؒؕ㏆竊ג+BWB4DSJQU TPVSDFNBQ
˝ ٗ٭ا٭ס䣆⩕מ㷐ׂכ׀מעյ㳊ꄈ峎גג״מNJOJGZגؤ٭غמ׆כֿ㛡ַն
˝ אסױױךע鐆׳סֿ㍭ꦘםסךյꝧ氦縖⺸ؙׄٚ٭عٚش؞٤ءסג״מ⩕ס54+4כס㵚䑴鋗ꎰגסֿTPVSDFNBQ
ꦘ鐆כע樟םյ㚺丗⺲꞊丗⺲םל乃㰄מ糋׀䬵ֻםלי㳊ꄈס⯡峎㍲նXFCQBDLמ磝ײ鱮ױיַ5FSTFSךעյ5SFF4IBLJOHכַֹ┘釐םؤ٭غס⯡ꢜ┘釐ם⮆㹎
ס⯡ꢜםל车ն
IBUFOBJOUFSO
Slide 112
Slide 112 text
XFCQBDLדכ٬٬٬
˝ 5ZQF4DSJQU־+BWB4DSJQUױךס㚺䬵כ◍䬵䓪סג״ס䳩⛼ע
CBCFM babel-loader磬榺ך⮵榫
ך车ֹ
˝ نٜؒؕס磵⺬םלעXFCQBDLס╚ג嚀耆
˝ 㳊ꄈ⯡峎ע5FSTFS webpack-terser-plugin磬榺ך⮵榫
ך车
ֹ
IBUFOBJOUFSO
Slide 113
Slide 113 text
create-react-appמחַי
˝ 3FBDU✳זגوٞةؘؠعס⛼䡗յ꞊鵽ص٭ٜס㵵⪌٬㲔车舅Ⳃיׂ
˝ 㓹儖氳מעױע׆✳זיֽׄף0,
˝ XFCQBDL
CBCFM
FTMJOUםל钥չס錃㲊ס榟䡗舅Ⳃך车ױ
˝ npm startךٞ٭ٜꝧ氦梪㗞ס玮ה┕ׅյnpm testךٗؼشعطتعֿ㲔车ך׀
˝ 鎋碷ע⫂鼧ך✳יַreact-scriptsמ硜יַ
˝ create-react-appך⮵榫ص٭ٜע㲊僿氳מ釤泡גיַיյ䅻מ僃二ס3FBDUؤ
ِٖؼطؔס湳釤ֿ孨־יַ
˝ create-react-appؚؗشز׆כךאַֹזג僃二סⳂ⺸כַֹסמ鉴
סךյ3FBDUס⼽鱨מחַי湳גַ☔ע׆סَٛةعٛ釳ַיײסֿ؛تتْ
IBUFOBJOUFSO
Slide 114
Slide 114 text
+BWB4DSJQUنٞ٤عؙ٤غ⼽鱨䤗软ס嘅嶖
מחַי
╚מهٚؗا┕ךⳂׂ+BWB4DSJQU%0.յ)5.-յ$44םלס"1*עאב♓
┖סֹם☼喋ךאב嘅嶖יַ
˝ &$."4DSJQU
˝ 8)"58()5.--JWJOH4UBOEBSE
˝ 8)"58(%0.-JWJOH4UBOEBSE
˝ 8$$444QFDJDBUJPOT
IBUFOBJOUFSO
Slide 115
Slide 115 text
ם☼喋湳ס־
˝ אס"1*ס䨕艵ַמחַי塜ַ䨕艵ַ㲊紶יַסע☼喋ךֵն
˝ ┩ס╈מ⪜ꝧיַ䗯㕔ֿ丗㛡ֵֿׂյאס䗯㕔ס塜僃磙氳מ
⟊錞ג״ס䗯㕔嶎ֿ☼喋ךֵն
˝ ❆ֻף+BWB4DSJQU$44םלס䨕艵ַֿؘؗههٚؗاꝴך樟ם㕙⺬յ
אס侇מ塜⟊錞יׂסע☼喋ךֵն
˝ 㲔꤀յنٞ٤عؙ٤غ╈䑏מ荇؆ם׆כיַכյ☼喋כهٚؗا
ס㲔逷מ䄐樟ֵֿ׆כמ鸿鷔יյ㕔⼔׆כֵֿױն
ؘؗههٚؗاמفء㕔⼔כ׀מ׆כפגׄ仼鋗
IBUFOBJOUFSO
Slide 116
Slide 116 text
&$."4DSJQUמחַי
˝ +BWB4DSJQUס嘅嶖☼喋ע&$."4DSJQUכַֹ⺲⯥ךյ&DNB*OUFSOBUJPOBMס╈ס5FDIOJDBM
$PNNJUUFF5$כַֹ䤗软㡦⚡ֿ╈䑏מ瓀㲊יַն
˝ 杯㏇ס☼喋עIUUQTHJUIVCDPNUDFDNBך畘杼יַיյ䅻מ僃二撶ֿ⪜ꝧ
禈ׄיַն
˝ ׆ַֹֹ䅻מ僃二撶ֿ⪜ꝧיַ䎬䌋-JWJOH4UBOEBSEכ⽛צױն
˝ 夵䇗僖ꮽסِ٭طؔ٤ءך&$."4DSJQUסֹםذءֿ䣒גיյف٭ة٘٤樑⺘ֿ♀
┙גס⪜ꝧױֿյאס侇憠ךסتػشوب٘شعךֵյאסف٭ة٘٤舅⛮
מעֵױ䙫⽏עםַך
CBCFMUTDס錃㲊ך⮵榫׆כֵױֿյ☼喋כיעא؆םמ妳מ䑒釐עםַךն׆סف٭ة٘٤כע斻玮יյ☼喋ס䬠勅ֿ鶟׳ذِؕ٤ءךאבס⭚杼硌מַֽי
㲔逷ֿ车יյ⮵榫⺎耆מם־ךնױגյ䏲鳭ױֿQPMZMMםלמזי㲔车⺎耆מם׆כֵױն
&DNB*OUFSOBUJPOBMע$םלס嘅嶖⛼哅车זיַ
IBUFOBJOUFSO
Slide 117
Slide 117 text
&$."4DSJQUס4UBHF
˝ &$."4DSJQUמע舅榺מ䬠勅 QSPQPTBM
⭳׆כֿ⭳全
˝ (JUIVC┕ךQSPQPTBMֿ⪜ꝧյJTTVF135$סِ٭طؔ٤ءםל
ךס閱鑜磬יյ4UBHFֿ┕ֿזג
˝ 鞊♳縖ךֵزٔ٤م؛٤סتط٭ة鶟״גַכַֹ䙫䓙䑒釐
˝ 妳מםوَٞ٭اֿٜם־ם־鱮ױםַ㕙⺬עյ*TTVFِ٭
طؔ٤ءؿ٭ع釤כك٤عֵֿ־
˝ אע域סֹםتط٭ة磬יյ4UBHFמםזג䏲מ&$."4DSJQUס☼
喋מ鱮ױն
IBUFOBJOUFSO
Slide 118
Slide 118 text
4UBHFס鎋碷
تط٭ة تط٭ةס哭釐
ؓؕظؓ敯䛜
嚀耆䬠勅
嚀耆ס☼喋傴غٚنع⛼䡗ג敯䛜
☼喋כיעׯ㱭䡗יַיյهٚؗاס㲔逷نؔ٭غفشؠ姲״
壿꣪
☼喋瓀㲊ֿ㱭▼յח♓┕ס㲔逷ֿ㰆㏇יַ敯䛜
&$."4DSJQUu+BWB4DSJQU1SJNFSKTQSJNFS
╚מ4UBHF♓⯥侇憠ךס㲔逷םלעאס䏲ס☼喋㚺催םלס⺎耆䓪ֵסךյهٚؗاסꝧ氦縖⺸ׄنٚء僗Ⲗמיַכ׀דׄ✳ֻגյQSFY♀ׄג⺲⯥ך"1*ֿ䬠❠
׆כֵնא㲔逷כי錉㳊םלס稷עֵն
ח♓┕ס+BWB4DSJQUסٚ٤ذّؕמ㲔逷ֿ㰆㏇יַכַֹ׆כֿ姲״ն╚םٚ٤ذّؕע(PPHMF$ISPNF/PEFKTך✳榫יַ74BGBSJך✳榫יַ
+BWB4DSJQU$PSFյ'JSFGPYך✳榫יַ4QJEFS.POLFZյ'BDFCPPLֿꝧ氦יַ)FSNFTםלֵֿն
IBUFOBJOUFSO
Slide 119
Slide 119 text
&$."4DSJQUס☼喋כ㲔逷
˝ 4UBHFמםזגյ&$."4DSJQUמ鱮ױיַםׂיյؘؗههٚؗاםלמ㲔逷י✳榫⭳全ֹמם
׆כֵֿ
˝ 鴫מ㲔逷יַםַכյ☼喋מ鱮״םַ
˝ אס敯䛜ך犉哕氳מ✳榫׆כךوَٞ٭اٜמنؔ٭غفشؠ׆כֿך׀
˝ ױגյ㲔逷ֿםַ敯䛜ךؤِٖؼطؔcore-jsמזיQPMZMM㲔逷ֿ䬠❠גյCBCFMמعٚ٤تق
ٜؕםלךؓوٛآ٭ب٘٤⫂ך✳榫ך׀ֹמם׆כֵֿ
˝ א㲔榫׆כךوَٞ٭اٜמنؔ٭غفشؠֿך׀גյ僗榫䓪炐׆כֿ⭳全
˝ &$."4DSJQUסوَٞ٭اٜע䅻מ⪒יֿ0QFOךյאמ꞊ظؔتشب٘٤0QFOםסךյ艄⽏סֵ䬠勅ֿ
ֵזגյ佭ꪜ釳ַיײיյ✳榫յَةطؔهם憠ゖ갭憠ֵֿף佭ꪜنؔ٭غفشؠ׆כךյ儔全ס
+BWB4DSJQU梪㗞ׂ׆כמ笋ֿױն
&$."4DSJQUסوَٞ٭اٜע㛡ׂס㕙⺬յאס䬠勅ֿրלסֹםٓزي٭ب٘٤ֵֿס־ցյրלסֹםゖ갭鉮婊ס־ցյրלסֹםٗ٭تآ٭تֵֿס־ցםלֿ鋗
יַסךյאס僗榫䓪םל炐׆כ靹春מ笋ֿױն
IBUFOBJOUFSO
Slide 120
Slide 120 text
ؘؗههٚؗا┕ס+BWB4DSJQUכ
&$."4DSJQU
˝ ؘؗههٚؗا┕ך㲔车ך׀+BWB4DSJQUע&$."4DSJQUס☼喋מ⻠ױיַסדׄךעםַ
˝ ❆ֻףlocation.assignע8)"58()5.--JWJOH4UBOEBSEյdocument.querySelectorע8)"58(
%0.-JWJOH4UBOEBSEך㲊紶יַ
˝ 8)"58(כַֹ磝笝מזי催二٬畘杼יַ)5.-%0.אבס-JWJOH4UBOEBSEם☼喋מ
זי畘杼יַն
˝ &$."4DSJQUס☼喋ךעםַסךյ)5.-%0.䣽םַ梪㗞 /PEFKTםל
ךע㲔车ך׀םַ
♓⯥ע8$מזי)5.-յ)5.-םלֿ瓀㲊יַגֿյ䇗僖מ8)"58(⣐מ塥ײ㳝׆כ辐伺յ䇗僖仼מע8)"58(ֿ⪜ꝧיַ-JWJOH4UBOEBSE塜䌋מ
8$סⳡ⼔כגն⹆縒
䇗מ"QQMF٬.P[JMMB٬0QFSBס炘מזי錃玮גնאס䏲յ8$כסؤِٖؼآ٭ب٘٤禈ׄםֿهٚؗاي٤ر٭鱮ײյ㛙㔃㒪״םֿ)5.--JWJOH
4UBOEBSE⪜ꝧ٬畘杼禈ׄיַג
IBUFOBJOUFSO
Slide 121
Slide 121 text
ؘؗههٚؗاي٤رכ8)"58(☼喋
˝ ╚מ(PPHMF$ISPNFꢛㅀע)5.-%0.מ꞊"1*ס䬠勅丗㛡ׂ车זיַ
˝ ׆ע䬠勅縖ךֵ(PPHMF$ISPNFמע鱮ױֿյ"QQMF.P[JJMBס
⹚㵚מ⚡ַյ☼喋כיע鱮ױםַ׆כ㛡չֵ
˝ $ISPNFס☼喋عٚش٭$ISPNF1MBUGPSN4UBUVT
˝ .P[JMMBס玮㕙辐伺יַؘؗهئؕع.P[JMMB4QFDJDBUJPO1PTJUJPOT
˝ 8$⫂ס8FC*ODVCBUPS$PNNVOJUZ(SPVQכַֹכ׆ך喋չם䬠勅ֿ⛼䡗٬
閱鑜יַ
IUUQTTDSBQCPYJPQBTUBLQVCꪫ氫8FC"1*鵽氦ך荇չ磆☭יַױ
IBUFOBJOUFSO
Slide 122
Slide 122 text
8$$444QFDJDBUJPOT
˝ ַ$44כ⽛ף$44ס杯㏇٬儔全ס☼喋ע8)"58(
ךעםׂ䌕׀禈׀8$מזי催二٬畘杼٬瓀㲊ֿ车יַ
˝ "MM$44TQFDJDBUJPOT
IBUFOBJOUFSO