はてなリモートインターン2021 フロントエンドブートキャンプ 講義資料

https://hatenacorp.jp/recruit/intern/2021

Transcript

1. Frontend Bootcamp 2021-08-17 id:Pasta-K from Mackerel Team IBUFOBJOUFSO
2. ׆סه٭ع؞ٔ٤وסإ٭ٜ ˝ 氵׈؆ֿ╚מ䏲ⶐסز٭ّꝧ氦ךنٞ٤عؙ٤غמ꞊؂׾׻ֹםذتؠמ⹦׽磝 ׳꤀מ㍭׼םַ僃⛥꡾ס湳閁؅חׄי׵׼ֹ ˝ ׆ס铺紶ך䣽ֹنٞ٤عؙ٤غסꯛ㓊ע+BWB4DSJQU5ZQF4DSJQU3FBDUך׌ ˝ 8FCꝧ氦מַֽי䇗չꄆ釐䈱؅㘃׊יַ׾نٞ٤عؙ٤غס┉珷؅氵׈؆מ 냕鵭מ؞ٔشزؓشو׊י׵׼ֹֽכַֹ泘鑜釤 ˝ םסךյ鐄伺סג״מ⼽鱨מ꞊׌׾鐄伺؅泸樋׊ג׽׊יַ׾׆כ׵ֵ׽ױ׌ ˝ ֵ؂׻ׂףؕ٤ذ٭٤ֿ磙؂זג䏲׵3FBDU׷5ZQF4DSJQUםלסنٞ٤عؙ٤غ 䤗软כ氵׈؆ֿ䢆׿׾꤀ס䣆Ⲃׄמם׿ף荁ַכ䓙זיַױ׌ IBUFOBJOUFSO
3. ه٭ع؞ٔ٤و ˝ ه٭ع؞ٔ٤وםסךյל؆ל؆ַ׀ױ׌ ˝ 䣆؅Ⳃ־׎׾ـ٤ث؛٤ق٭عכ־׵םַך׌ ˝ +BWB4DSJQU舅⛮؅湳׼םַ☔ע㵼׊糋ַי׀ׯ׽מם׾־׵׊׿ױ׎؆ֿյַח־ 䏔玮חכ䓙זי绂ַיַֽיׂד׈ַ ˝ ☪׌׃׌׬י؅杼鉮׊יַ׾䑒釐עםַך׌ ˝ 䏲ⶐסز٭ّמ⹆ⱶ׊יסꝧ氦ס꤀מؤ٭غ؅鐆ײ傴׀׌׾כ׀מ䓙ַ⭳׊ג׽յ釤 鲭׊ג׽յ磆☭׊יַ׾⹆縒䗯㕔؅׈׼מ釤י杼鉮׌׾꤀ס餉䫇־׽מ׊יׂד׈ַ ˝ 韬ゖעַחך׵堼鲛 IBUFOBJOUFSO
4. ٓر٤ם+BWB4DSJQU؅傴ׂ┕ך釶ֻיֽ׀ג ַ哭䒝 NJO ˝ &4 &4 ♓꡸מ+BWB4DSJQUמ⪌זג嚀耆؅╈䑏מ氵׈؆ֿ 㲔꤀מؤ٭غ؅鐆׳꤀מ湳זיַֽי培׊ַ+BWB4DSJQU┕ס哭 䒝מחַי磆☭׊ױ׌ IBUFOBJOUFSO
5. "SSPX
   'VODUJPO ˝ function׷return؅✳؂׍מ꞊丗؅榟䡗ך׀׾ ˝ 㓹儖氳מע׆ס亠嫎ך꞊丗؅榟䡗׊יֽׄףـُ׼םַ const hello = name => `Hello, ${name}`; hello('world') // hello, world ˝ 䌕丗ֿחסכ׀ע䌕丗؅㍱ֹ()׵泸樋⺎ ˝ 5JQT
   鲭׽⡁ֿ؛هةؘؠعסכ׀ע()ך㍱ֹכ荁ַ const getProps = () => ({ a: 'foo', b: 'bar' }) 
   ╚מthisֿ꞊؂זיׂ׾כـُ׾׻ֹמם׾ն鎋碷ע♀ꎰր"SSPX
   'VODUJPOמחַיց؅鐆؆ךׂד׈ַն IBUFOBJOUFSO
6. "SSPX
   'VODUJPO ˝ 䌕丗ֿ邾丗ֵ׾㕙⺬ע()ך㍱ֹ ˝ ꞊丗⫂ס鋗鳭ֿ邾丗车מ峚׾כ׀ע{}כreturn؅榫ַ׾ const hello = (name, lang) => { if (lang === 'ja') return `͜Μʹͪ͸ɺ${name}`; if (lang === 'es') return `Hola, ${name}`; return `Hello, ${name}`; } IBUFOBJOUFSO
7. 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
8. 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 {<pending>} ɾɾɾ ᶃ IBUFOBJOUFSO
9. 邾丗ס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
10. 邾丗ס1SPNJTF؅䣽ֹ亠嫎 const promises = [ getFromCache(), // cache͕ۭͷͱ͖͸ࣦഊ͢Δ getFromApi() ] ˝ Promise.race() ˝ חך׵䡗Ⱶ׌׾כյאסPromiseס3FTPMWF؅䐂׾նאס⯥מל׿־ֿ㜊䷴׌׾כ3FKFDU מם׾ն ˝ Promise.any() ˝ 僃⮣מ䡗Ⱶ׊ג3FTPMWF؅䐂׾նאס⯥מ㜊䷴׊י׵扛釱׈׿׾ն⪒יסPromiseס㲔车ֿ 㜊䷴׊ג㕙⺬מ3FKFDUמם׾ն IBUFOBJOUFSO
11. BTZODBXBJU ˝ BTZOD
    GVODUJPOס╈ךֵ׿ףյawait؅榫ַי1SPNJTF؅鲭׌ꪜ⺱僿꞊丗؅⺱僿꞊丗ס׻ֹמ䣽ֻ׾ ˝ ؙٚ٭ـ٤غٛ٤ء׌׾䑒釐ֵֿ׾㕙⺬עtry {} catch (e) {}؅✳榫׌׾ ˝ BTZOD
    GVODUJPOס╈ךؙٚ٭؅氦榟׈׎גַ㕙⺬ע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ס☼喋מ⪌זיַ׾5PQMFWFM
    awaitמ㵚䑴׊יַ׾梪㗞ךֵ׿ףBTZOD
    GVODUJPOס╈ך扛ׂי׵await؅⮵榫׌׾׆כֿך׀ױ׌ IBUFOBJOUFSO
12. BTZODBXBJU ˝ BTZOD
    GVODUJPO舅⛮׵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
13. DMBTT
    㲚銧 ˝ &4ךclass؞٭٠٭غֿ鴑ⱶ׈׿ג ˝ 犉哕氳מ✳ֹ׆כעא؆םמ扛ַ־׵׊׿םַׄלյ鐆׳׆כע㛡ַ־׵׊׿םַ class Rect { constructor (width, height) { this.width = width; this.height = height; } // getter΍setterΛఆٛͰ͖Δ 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
14. &$."4DSJQU
    .PEVMFT ˝ ☽סنٜؒؕ־׼ؕ٤َ٭ع׊י⮵榫ך׀׾׵סֿٓةٖ٭ٜ ˝ نֿٜؒؕ⮆־׿יַ׾׆כךյ㚺丗تؤ٭و ⺲⯥狜ꝴ םל׵⮆־׿׾ ˝ 塷⺒氳磬穅ך$PNNPO+4כַֹ䎬䌋ֿ/PEFKTםל؅╈䑏מꝎׂ䫑榫׈׿ י׀גֿյ&$."4DSJQUך嘅嶖⴫׈׿גٓةٖ٭ٜס☼磝ײֿ☪ךע /PEFKTյؘؗههٚؗاםלך׵䇶ׂئَ٭ع׈׿יַ׾ 
    㲔꤀מעئَ٭ع׊יַםַؘؗههٚؗا׷قنؚ٭ُ٤تסג״מ#BCFM؅✳זי㚺䬵׊ג䏲מյٓةٖ٭ٜ؅鉮ꃿ׊יח֐邾丗סنٜؒؕ؅ױכ״י鿥⟓׌׾ג״מXFCQBDLםל؅ ⮵榫׌׾׆כֿ㛡ַն鎋碷ע♀ꎰր+BWB4DSJQU؅ؘؗهؓوٛآ٭ب٘٤ך䬠❠׌׾꤀מ✳榫׌׾ص٭ٜزؘؕ٤מחַיց؅⹆拨׊יׂד׈ַն 
    &$."4DSJQUע+BWB4DSJQUס☼喋מֽׄ׾⺲燡ն&$."4DSJQU☼喋מחַיע♀ꎰր+BWB4DSJQU׷نٞ٤عؙ٤غ⼽鱨䤗软ס嘅嶖 ⴫ מחַיցך鉮鐄׊יַױ׌ն 
    module.exportsכַֹ攐墤ם؛هةؘؠع؅磬榺׊יؙؠتَ٭ع׊յrequire꞊丗؅⮵榫׊יؕ٤َ٭ع׌׾亠䌋նIUUQTOPEFKTPSHEPDTMBUFTUBQJNPEVMFTIUNM IBUFOBJOUFSO
15. EFGBVMU
    FYQPSU // module.js export default function doSomething () {} ˝ export defaultךؙؠتَ٭ع׌׾כյimport侇מע♳䙫 ס⺲⯥؅錃㲊ך׀׾ import awesome from './module' IBUFOBJOUFSO
16. ⺲⯥♀׀ؙؠتَ٭ع OBNFE
    FYQPSU ˝ 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
17. ؕ٤َ٭عס亠嫎מחַי ˝ 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
18. 5JQT IBUFOBJOUFSO
19. .%/
    8FC
    %PD؅鐆׵ֹ IUUQTEFWFMPQFSNP[JMMBPSH ˝ +BWB4DSJQU׷)5.-յ$44յ%0.םלס⺨牊"1*מחַיע׵ה؀؆յ)551םל 8FCמ꞊׌׾ֵ׼׹׾䤗软׷哭䒝מחַיס鉮鐄ֿ꥗磵׊יַ׾ؘؗهئؕع ˝ 3FBDUםלמחַיס鉮鐄׵僗׾ ˝ ؘؗه┕מע僗霄扛霄סֵ׼׹׾䗯㕔ֿ鬇ֿזיַ׾סךյنٞ٤عؙ٤غ׷ ؘؗهמחַיס׆כך㍭זג׼ױ׍ע.%/؅釤׾סֿ؛تتْ 
    NP[JMMBסغْؕ٤┖מֵ׾ֿյ(PPHMF׷ُؕؠٞخنعםלֿ0QFO
    8FC
    %PDTכַֹ㍚⛮؅鵟׋י䶹䭤؅׊יַ׾
    IUUQTPQFODPMMFDUJWFDPNPQFOXFCEPDTVQEBUFTJOUSPEVDJOH PQFOXFCEPDT 
    .%/ע.P[JMMB
    %FWFMPQFS
    /FUXPSLס樋 IBUFOBJOUFSO
20. ؘؗههٚؗاס吾碟־׼بٖشכ.%/סً٭ة؅ꝧ ׂ ˝ 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-؅✳ֹכSFEJSFDU
    OPUJDFֿ辐炐׈׿יյאסױױً٭ةמע괊׬םַסך˟ IBUFOBJOUFSO
21. 錃㲊ס喋㯸 IBUFOBJOUFSO
22. GPSPG ˝ ⹚䐝⺎耆 JUFSBCMF ם؛هةؘؠعס釐碛؅ꯂ樑מ⹦׽⭳׎׾ ˝ 鿥⮛յ乃㰄⮛յNodeListյMapյSetםל const iterable = [10, 20, 30]; for (const value of iterable) { console.log(value); } IBUFOBJOUFSO
23. /VMMJTI
    DPBMFTDJOH
    PQFSBUPS
    ?? ˝ +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
24. 0QUJPOBM
    DIBJOJOH
    ?. ˝ ؛هةؘؠعֿnull׷undefinedם⺎耆䓪ֵֿ׾כ׀յאס؛هةؘؠعסوٞقطؔ؅⽛שג״מifמ׻׾⮆㹎׷&&מ׻׾湾礘鍐❫ ؅傴ׂ䑒釐ֵֿזגն const val = nullOrObject && nullOrObject.method(); const result = val && val.methodOfReturnValue(); ˝ .?؅榫ַ׾כյ⽛צ⭳׊⩕ֿnullױגעundefinedסכ׀עא׿♓꡸סوٞقطؔؓؠجت؅׊םַնױגյאס㕙⺬עundefined כ׊י鍐❫׈׿׾ն const result = nullOrObject?.method()?.methodOfReturnValue(); nullOrObject׵nullOrObject.method()ס鲭׽⡁ֿ⪦מnullך׵undefinedך׵םַכ׀מյ nullOrObject.method().methodOfReturnValue()ס磵冽؅䐂׼׿׾ն 
    &&
    ע䄅鱨ֿ'BMTZםכ׀ע⺓鱨؅鍐❫׊םַ׆כ؅⮵榫׊יյnull׷undefinedסכ׀ע⺓鱨؅鍐❫׊םַ׻ֹמ⭳全׾նױגյ&&מ׻׾湾礘鍐❫ע➘⮵ם׵סס||כ⺱喋מ'BMTZמ꞊ ؂׾ゖ갭؅侇չ䌕׀颯׆׊י׊ױֹ׆כמ嫰䙫ն׆סゖ갭׵0QUJPOBM
    DIBJOJOHך⺱侇מ㍑鹴ך׀׾ն IBUFOBJOUFSO
25. 4QSFBE
    4ZOUBY ˝ ...؅✳ֹכ鿥⮛׷؛هةؘؠع؅㷣ꝧ⭳全׾ 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
26. 3FTU
    1BSBNFUFST ˝ ꞊丗ס䌕丗׵
    ...
    ך⹨ׄ⹦׾׆כך⺎㚺םꝎ׈ס䌕丗؅⹨ׄ⹦ ׿׾ ˝ 4QSFBE
    4ZOUBYכ鷿זיյחדׄ┦ח䌕丗ס儕㶾ך׊־✳ֻ םַ // 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
27. 5ZQF4DSJQUמחַי NJO IBUFOBJOUFSO
28. 5ZQF4DSJQU
    JT
    ⛰ +BWB4DSJQUמ㑔ؓؿط٭ب٘٤םל؅♀ׄ׼׿׾׻ֹמ׊גوٞءِٚ٤ء銧鏤ךյ㛡ׂס㕙⺬ע +BWB4DSJQUמ㚺䬵׊י־׼+BWB4DSJQUס⭚杼硌ך㲔车׌׾ն ˝ OPEFס氧㕙׷3FBDUס氧㕙םלךյئ٭فئؕغ׷نٞ٤عؙ٤غ؅嘦了׊י+BWB4DSJQU؅✳榫׊גא׆ א׆㛻׀םؘؗهؓوٛآ٭ب٘٤סꝧ氦ֿ沸؆מ车؂׿׾׻ֹמםזג ˝ א׆א׆ס釨嘗ס☔丗ךא׆א׆ס釨嘗ס+BWB4DSJQUסؤ٭غ؅㱦⪒מ傴ׂג״מ㑔ס䗯㕔؅✳ַגַ ˝ 磝ײ鱮ײס"1*ֿ⛰؅鲭׊יׂ׾ס־նٚؕهֿٚٛלַֹֹ鲭׽⡁؅鲭׊יׂ׾ס־ն ˝ ٚ٤ذّؕך㲔车׊ג꤀מ⮣״יٚ٤ذؙّؕٚ٭ֿ颯׀׾כַֹסעꡔׁגַն ˝ Uncaught TypeError: Cannot read property 'foo' of undefined ˝ אסג״מ+BWB4DSJQUמꪐ氳㑔♀ׄ؅ⱶֻג"MUFSOBUJWF
    +BWB4DSJQUכ׊יס5ZQF4DSJQUֿ䶹䧏׈׿׾׻ֹ מםזג IBUFOBJOUFSO
29. tsc
    5ZQF4DSJQU
    DPNQJMFS ˝ ُؕؠٞخنعס5ZQF4DSJQUز٭ّמ׻זיꝧ氦׈׿יַ׾5ZQF4DSJQU؅䣽ֹג״סص٭ٜ ˝ IUUQTHJUIVCDPNNJDSPTPGU5ZQF4DSJQU ˝ 5ZQF4DSJQU؅+BWB4DSJQUמ㚺䬵 ؤ٤قٜؕ ׌׾嚀耆כؤ٤قٜؕ侇סꪐ氳㑔鉮冪嚀耆؅䬠❠׊יַ׾ ˝ --noEmit؛وب٘٤؅♀ׄי׾כյꪐ氳㑔鉮冪嚀耆דׄ؅颦׼׎׾׆כֿך׀׾ ˝ 5ZQF4DSJQU־׼+BWB4DSJQU׫ס㚺䬵כ銧זי׵յ㑔ؓؿط٭ب٘٤璡ס⯡ꢜֿ׮כ؆ל ˝ +BWB4DSJQUٚ٤ذֿّؕ㲔车׌׾כ׀ס䨕׾艵ַמע䏅ꮶ؅┙ֻםַכ䓙זיַֽי荁ַ ˝ 鴫מ䬠❠׈׿יַ׾㑔מ⺬؂׎י傴ַי׵յ㲔꤀מעٚؕهٚٛס㲔逷כثٝיַיٚ٤ذؙّؕٚ٭ֿ颯׀׾׆כ׵燵מ ׻ׂ ֵ׾ ˝ +BWB4DSJQU׫ס㚺䬵舅⛮ע♏僀⺎耆ն#BCFM
    FTCVJMEםל ˝ 㛡ׂסوٞةؘؠعךעCBCFM؅✳榫׊יַ׾כ䓙ֹסךյ@babel/preset-typescript؅僗Ⲗמ׊גCBCFMך㚺䬵؅车ֹ亠ֿ錃 㲊ֿ邾ꥭ⴫׊ם־זג׽׊י؛تتْ 
    enum؅✳זיַ׾כؤ٭غֿ鴑ⱶ׈׿׾סך䏅ꮶ؅┙ֻ׾նenumע䏲鳭׌׾؛هةؘؠعכtypeofםלס磝ײ⺬؂׎ך♏僀⺎耆םסךյ㓹儖氳מע⮵榫׊םַ׻ֹמ׊יַ׾׆כֿ㛡 ַն IBUFOBJOUFSO
30. 㑔㲚銧鼧⮆؅鐆״׾׻ֹמם؀ֹ 5ZQF4DSJQUס♏辐氳ם辐杯םל؅磆☭׊יַ׀ױ׌ն ה׺זכ䣆⩕ך鍱׊גַ☔ע⪜䌋ס1MBZHSPVOEֽֿ䣆鬭ך׌ն IBUFOBJOUFSO
31. 㚺丗㲚銧侇ס㑔ؓؿط٭ب٘٤ // JavaScriptͷ৔߹ const a = 'hello'; // TypeScriptͷ৔߹͸ม਺໊ͱ=ͷؒʹ:Λஔ͍ͯܕΞϊςʔγϣϯΛॻ͘ const a: ʲ͜͜ʹܕΞϊςʔγϣϯʳ = 'hello'; // ྫ͑͹ const a: string = 'hello'; ׆׿ׂ׼ַדזג׼䫟鑜׊יׂ׿׾סךյ㲔꤀מע傴־םַ׆כ ׵㛡ַ IBUFOBJOUFSO
32. ♏辐氳ם辐杯Ζ ˝ وِٛطؔه㑔
    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<number> = [1, 2, 3, 5, 8]; const arr3: [string, number] = ['year', 2021]; // λϓϧ(Tuple)ܕͱ΋ IBUFOBJOUFSO
33. ♏辐氳ם辐杯Η ˝ ؛هةؘؠع ˝ +BWB4DSJQUס؛هةؘؠع⺱喋מ傴ַיյ⡁؅傴ׂכ׆؀מ㑔؅傴ׂ ˝ ؞٭⺲מ?؅♀ׄ׾כ؛وب٘ػٜם؞٭מםזיյ泸樋⺎耆מם׾ն const person: { name: string, age: number, address?: string } = { name: 'john', age: 21 } 
    string | undefined
    ס׻ֹם鋗鳭כ⺱׋כ磆☭׈׿׾׆כ׵ֵ׾ն⡁ֿ⪌זיַ׾־לֹ־ך+BWB4DSJQUכ׊י㲔车׊ג꤀ס䨕׾艵ַֿ㚺؂׾׆כֵֿ׾ Object.keys()םל ס ךյ⸬㳡מע⺱׋ךעםַ׆כמ嫰䙫ն攐מ5ZQF4DSJQU
    ך㵵⪌׈׿גexactOptionalPropertyTypes؅僗Ⲗמ׌׾כյUTDךס㑔鉮冪侇ס䨕׾艵ַ׵㚺؂׽ױ׌ն IBUFOBJOUFSO
34. type type؅✳ֹכ㑔辐杯מؙؕٛؓت؅♀ׄ׼׿׾ type Person = { name: string, age: number, }; type Team = Person[]; IBUFOBJOUFSO
35. 6OJPO
    5ZQF
    ⺬✡㑔 邾丗ס㑔סַ׍׿־؅嵹ג׌ type Primitive = string | number | boolean | undefined | null; type Color = 'red' | 'green' | 'blue' | 'yellow' |'perple'; IBUFOBJOUFSO
36. 㑔؝٭غ 5ZQF
    (VBSE מ✳ֻ׾➘⮵ם +BWB4DSJQUס庋畀㯸 +BWB4DSJQUס庋畀㯸ס╈מע僗Ⲗמ✳ֹ׆כךյꪐ氳鉮冪侇מ 5ZQF4DSJQUؤ٤قؕٚמ׻זי➘⮵מ✳榫׈׿׾׵סֵֿ׾ն typeofכin؅׆׆ךע磆☭׊ױ׌ն׆׿׼ע+BWB4DSJQUסٚ٤ ذّؕ┕ךⳂ⛼׌׾׆כמ嫰䙫ն IBUFOBJOUFSO
37. 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
38. typeof
    庋畀㯸ס⮵榫❆ ˝ 攐מnumber׷stringךֵ׾׆כמ⯆꡾׊גַכ׀מ값⭳ // paddingʹ͸ۭനͷ਺·ͨ͸λϒจࣈͳͲ͕΍ͬͯ͘Δ͜ͱΛ૝ఆͨؔ͠਺ function padLeft(val: string, padding: string | number) { if (typeof padding === 'number') { return ' '.repeat(padding) + val; } // padding͕numberͰͳ͍ͷͰɺstringͰ͋Δͱਪ࿦͞ΕΔ return padding + val; } IBUFOBJOUFSO
39. 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
40. 5BHHFE
    6OJPO
    5ZQFTך㑔؝٭غ׌׾ ˝ type׷kindס׻ֹםوٞقطؔמٛطٜٚ㑔؅錃㲊׊יַֽיյאס╈骰؅===׷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
41. as؅榫ַג㑔ؓئ٭ب٘٤ 5ZQF
    "TTFSUJPO ˝ 5ZQF4DSJQUמ׻זי䫟鑜׈׿ג㑔؅┕傴׀׊גַכ׀מ✳ֹ ˝ 㑔؞ٔتعךעםַ ٚ٤ذّؕ┕ךס䨕׾艵ַֿם؆׼㚺؂ ׾׆כעםַ ˝ 㛡ׂס㕙⺬ע㲹מם׾סךյ儖䎎מ䑒釐ם㕙⺬דׄ⮵榫׌׾ IBUFOBJOUFSO
42. 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
43. 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
44. any
    כ
    unknown 5ZQF4DSJQU┕ך┘㲊ם㑔؅䣽ֹג״ס亠嫎؅磆☭׊ױ׌ն IBUFOBJOUFSO
45. any ˝ ⛰׼־ס⡁ֿ⪌זיַ׾׆כ؅炐׌նundefined־׼؛هةؘ ؠع־׼꞊丗ױך⛰ֿ⪌זיַי׵荁ַնtscֿ㑔ס吾錞؅׊ םַסךյas⺱喋מ鹴ׄ׼׿׾㕙⺬ע鹴ׄ׾ն let anything: any = {}; // anyʹ͸ԿͰ΋୅ೖͰ͖Δ anything = () => {}; anything = null; anything.split(','); // anyͷ৔߹͸ϝιου΋ͳΜͰ΋ࢀরͰ͖Δ IBUFOBJOUFSO
46. 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
47. typeכinterface ˝ typeעؙؕٛؓت ˝ interfaceע؛هةؘؠعמ㑔؅♀ׄ׾⮯ס亠嫎ն ˝ 仴㰆ס׵סמ䏲־׼وٞقطؔ؅鴑ⱶך׀׾סעinterface ˝ ٚؕهֿٚٛ䬠❠׊גinterface؅⮵榫縖ֿ舅榺מ䦡䍖ך׀׾ ˝ typeע⮯ס⺲⯥؅♀ׄ׾䑒釐ֵֿ׾ ˝ typeכinterfaceס✳ַ⮆ׄעؤ٭غ釨硜םלך荇չם孱孬׷╚䍖ֵֿ׾ סךյ齁מ⪌׿ף齁מ䏼זיׂד׈ַ IBUFOBJOUFSO
48. interface؅榫ַג䦡䍖 GSPN
    5ZQF4DSJQU
    %PDVNFOUBUJPO
    
    &WFSZEBZ
    5ZQFT
    ⫂
    %JFSFODFT
    #FUXFFO
    5ZQF
    "MJBTFT
    BOE
    *OUFSGBDFT IBUFOBJOUFSO
49. ꞊丗 仴מئ٤وٜךע⛰䈱׵⭳י׀יַ׾ׄלյ䌕丗׷鲭׽⡁ס㑔ס傴׀亠 סقذ٭٤גה磆☭׊יֽ׀ױ׌ն 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
50. 㑔䌕丗 (FOFSJDT ˝ ꞊丗ס鲭׽⡁ס㑔מ꞊׌׾⯆硜؅㛙־׼┙ֻיյ꞊丗⫂鼧ך⮵榫ך׀׾ն ˝ ׻ׂ׻ׂ㑔㲊紶םל؅釤׾כ㲊紶׈׿יַי⮵榫⺎耆דׄלյ妳♀ַיַםַכַֹ׆כ׵׻ֵׂ ׾˟ ˝ 5ZQF4DSJQU
    ך
    RVFSZ4FMFDUPS
    ْخشغ؅✳ֹכ׀מ㑔䌕丗؅䧗㲊׌׾
    
    )BUFOB
    %FWFMPQFS
    #MPH const getJSON = <T>(url: string): Promise<T> => { // res.json͸anyͱͳΒͣʹܕҾ਺Ͱ౉͞Εͨ΋ͷͱղऍ͞ΕΔ return fetch(url).then<T>(res => res.json()) } // ͜͜Ͱusers͸User[]ʹͳΔ const users = getJSON<User[]>('/api/users'); // ͜͜Ͱblogs͸Blog[]ʹͳΔ const blogs = getJSON<Blog[]>('/api/blogs'); IBUFOBJOUFSO
51. 禈
    㑔䌕丗 ˝ extends؅✳ֹכ䧗㲊׊ג㑔ؕ٤ذ٭نؘ٭ت؅嵹ג׌׻ֹמ䧗㲊 ך׀׾ ˝ 㑔䌕丗؅אסױױ꞊丗ס䌕丗ס㑔מ✳ֹ׆כךꪐ氳鉮冪侇מ⽛צ⭳ ׊⩕ס䌕丗ס㑔־׼鲭׽⡁؅䫟鑜׊יׂ׿׾ function echo <T extends string> (text: T): T { return text }; const a = echo('foo'); // a ͷܕ͸ 'foo' const str: string = 'foo'; const b = echo(str); // b ͷܕ͸ 'string' IBUFOBJOUFSO
52. 0WFSMPBET ˝ ꞊丗ֿ䌕丗ס丗׷㑔םלמ❣זי䨕׾艵ַֿ㚺؂׾׆כ؅鋗鳭׌׾亠嫎 ˝ 䌕丗כ鲭׽⡁؅邾丗㲚銧׊ג䏲מ㲔逷؅傴ׂ ˝ 僃䏲ס㲔逷ע⪒יס0WFSMPBET؅嵹ג׌䑒釐ֵֿ׾ function request(url: string): Promise<Response>; function request(url: string, onlyIsOk: true): Promise<boolean>; function request(url: string, onlyIsOk = false) { const promise = fetch(url); if (onlyIsOk) return promise.then(res => res.ok); return promise; } IBUFOBJOUFSO
53. 0WFSMPBETכ꞊丗ס㑔㲚銧 ˝ 㓹儖ע湾ׂ傴ׂס؅✳זיֽׄף荁ַך׌ type f = (x: number) => number; ˝ ⺱喋ס׆כ؅׆ס׻ֹמ׵傴ׄ׾ type f = { (x: number): number; } ˝ 0WFSMPBET؅㑔㲚銧כ⪦מ傴׀גַ㕙⺬ע䏲縖؅✳ֹ type func = { (x: number): number; (x: string): string; } IBUFOBJOUFSO
54. never ˝ 祀㵚מ氦榟٬⮼鷼׊םַ׆כ؅辐׌㑔 ˝ ❆ֻף扛꡾ٜ٭وֵֿ׾꞊丗ע祀㵚מ㱭▼׊םַ꞊丗םסך鲭׽⡁עneverמם ׾ ˝ voidע♏⪌⺎耆דֿյneverמעneverסײ♏⪌⺎耆 חױ׽㚺丗מע㓹儖 氳מ♏⪌⭳全׍מؙٚ٭מם׾ function infiniteLoop(): never { while (true) {} } 
    TUSJDU/VMM$IFDLJOHֿ僗Ⲗמםזיַםַ㕙⺬סײ♏⪌⺎耆ն┉亠ך+BWB4DSJQUסٚ٤ذّؕ┕ךעundefinedםסךյ♏⪌׌׾׆כע׮כ؆לםַך׊׺ֹն IBUFOBJOUFSO
55. 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
56. ׉זכדׄ浊״׾ؤ٭ػ٭ ˝ ׆׆ױך؅杼鉮׊גכ׀מ鐆׳כ➘⮵םؤ٭ػ٭ך׌ ˝ ה׺זכ׊גطؠؼشؠכ⺬؂׎י傴ַיֽ׀ױ׌ IBUFOBJOUFSO
57. Readonly
    
    ReturnType ˝ Readonlyע؛هةؘؠع׷鿥⮛ס釐碛؅鐆ײ鱮ײ㵠榫מך׀׾ ˝ ⫋䅯氳מע鸵榫׈׿םַ׆כמ嫰䙫 type PersonRo = Readonly<Person> ˝ ReturnTypeע꞊丗ס鲭׽⡁㑔כ׊י䐂׾ type Func = () => string; type ReturnVal = ReturnType<Func> // ReturnVal͸stringͱղऍ͞ΕΔ IBUFOBJOUFSO
58. typeof
    庋畀㯸 ˝ ׆ה׼ע⯥鳭ס׵סכע鷿ֹ5ZQF4DSJQU磝ײ鱮ײס׵סն㑔ؓ ؿط٭ب٘٤؅傴ׂ㕙䢥ך⮵榫׌׾ն ˝ +BWB4DSJQUך㲚銧׈׿ג⡁؅ꪐ氳鉮冪׊י㑔؅䐂׾ const hello = () => 'hello'; type Func = typeof hello; type P = ReturnType<Func>; // P͸stringͱղऍ͞ΕΔ IBUFOBJOUFSO
59. keyof
    庋畀㯸 ؛هةؘؠعסLFZ؅⮛䧸׊יVOJPO
    UZQFכ׊י䐂׼׿׾ 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
60. *OEFYFE
    "DDFTT
    5ZQFT +BWB4DSJQUך鿥⮛׷؛هةؘؠعמ[]؅✳זי⡁؅⹦׽⭳׌׻ֹמ㑔 ך׵⺱׋׻ֹם׆כֿ⭳全׾նtypeof׷keyofםלכ磝ײ⺬؂׎׾׆ כך+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
61. ◫䄐㑔 *OUFSTFDUJPO
    5ZQFT 邾丗ס㑔؅磝ײ⺬؂׎י㑔؅榟䡗׌׾ն❆ֻףٗ٭ا٭ס嘤꡾מ 䑴׋יٝتَ٤تס㑔؅㚺ֻ׾㕙⺬ע׆ַֹֹ䚉׋ն 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
62. $POEJUJPOBM
    5ZQFT +BWB4DSJQUס└ꯁ庋畀㯸כ⺱׋׆כֿ㑔辐杯ס╈ך׵⭳全׾ն condition ? trueExpression : falseExpression // JavaScriptͷࡾ߲ԋࢉࢠ // SomeType͕OtherTypeΛຬͨͤ͹TrueTypeΛಘΔ SomeType extends OtherType ? TrueType : FalseType; 0WFSMPBET؅✳؂׍מ꞊丗ס䌕丗מ䑴׋י鲭׽⡁ס㑔؅㚺ֻ׾ declare function getID<T extends boolean>(fancy: T): T extends true ? string : number; const stringReturnValue = getID(true); const numberReturnValue = getID(false); const stringOrNumber = getID(Math.random() < 0.5); IBUFOBJOUFSO
63. 3FBDUמחַי NJO IBUFOBJOUFSO
64. 3FBDUמחַי ׆ס珕ךע3FBDUמ꞊׌׾僃⛥꡾ס鐆ײ傴׀ֿ⭳全׾׻ֹמם׾׆ כ؅泘䧗׊ױ׌ն IBUFOBJOUFSO
65. 㲚銧氳 EFDMBSBUJWF 6*מחַי ˝ 6*鼧⮆؅㲚銧氳מ鋗鳭׌׾亠嫎ס׆כ ˝ חױ׽յלַֹֹ׆ככַֹס؅ה׺זכ釤יַ׀ױ׌ ˝ ؘؗهؓوٛآ٭ب٘٤סٛشز⴫׷تُ٭عنؚ٤ؓوٛס氧㕙 ךյ(6*؅Ⳃ氳מ啶疣٬㚺催׌׾ꄆ釐䈱כ姲״׼׿׾(6*ס邾ꥭ䓪ֿ 劲壿מ⺸┕׊גכַֹ塷⺒ֵֿ׽ױ׊ג ˝ א؆ם╈յ6*؅Ⳃ氳榟䡗׊יַ׾כյ(6*鼧⮆ס䳩⛼؅鴑ⱶ׌׾גצ מؤ٭غס邾ꥭ䓪ֿ냕ױזיַׂכַֹゖ갭מ׵泡ꪫ׊ֿהך׊ג IBUFOBJOUFSO
66. K2VFSZ؅⮵榫׊גⳂ氳榟䡗ס❆ const list = $('<ul>'); const button = $('<button>௥Ճ</button>'); let count = 0; button.on('click', () => { const item = $(`<li>${fizzbuzz(++count)}</li>`); list.append(item); }); $(document.body).append(list).append(button); IBUFOBJOUFSO
67. Ⳃ氳榟䡗סゖ갭憠 ˝ ؤ٭غ؅釤׾דׄךעלַֹֹ䡗冽擻ֿ榟䡗׈׿׾ס־ْؕ٭ ة׊ט׼ַ ˝ 6*ס鴑ⱶ׷榟䡗ֿאס㕙אס㕙ך傴־׿ֿהך꥗硜⴫ֿꦘ׊ׂ ם׽ֿה ˝ طتع׷אס☽錃銶┕ס䄄㜂םל׵ꦘ׊ׂם׾ IBUFOBJOUFSO
68. 㲚銧氳6*ס❆ ˝ )5.-ע㲚銧氳6*ס♏辐❆ ˝ ؤ٭غס釤ג泘ֿאסױױ辐炐׈׿׾ <ul> <li>1</li> <li>2</li> <li>fizz</li> <li>4</li> <li>buzz</li> </ul> IBUFOBJOUFSO
69. +49מחַי ˝ 3FBDUךע㛡ׂס㕙⺬յ+49כַֹ鋗嫎ֿ✳ֻ׾ ˝ )5.-؅傴ׂ׻ֹמ3FBDU&MFNFOU؅鋗鳭ך׀׾ ˝ 㲚銧氳מ6*؅傴ׂ׆כֿ⭳全׾ const list = <ul> <li>1</li> <li>2</li> <li>fizz</li> <li>4</li> <li>buzz</li> </ul> 
    +49ע+BWB4DSJQU؅斻舅מ䦡䍖׊ג啶乃ն#BCFMםלמ׻זי3FBDUך釐碛םל؅榟䡗׌׾+BWB4DSJQUסؤ٭غמ㚺䬵מ׈׿י㲔车׈׿ױ׌նIUUQTKBSFBDUKTPSHEPDTJOUSPEVDJOH KTYIUNM IBUFOBJOUFSO
70. +49מחַי ˝ {}؅✳ֹ׆כך+BWB4DSJQUס䌋؅㷣ꝧך׀׾ն+49舅⛮׵ױג䌋םסךյ⪌׿㯸מ׊י׵㛻┓㜂ն ˝ ✳ֻ׾㕙䢥ע釐碛ס╈ױגע㷯䓪 ˝ className class ׷htmlFor for םל┉鼧ע+BWB4DSJQUס◀硜鏤כ逇׾סך㚺催׈׿יַ׾ const classname = "fizz-buzz-list"; const itemProps = { className: 'fb-item', style: { listStyleType: 'square'} } const list = <ul id="foo" className={className} > {[1, 2, 3, 4, 5, 6].map((i) => <li {...itemProps}> {fizzbuzz(1)} </li>)} </ul> 
    䌋 FYQSFTTJPO עאס㕙ך⡁؅鲭׌׵סյ㚺丗מ♏⪌ך׀׾׵סס׆כך׌նחױ׽յ㚺丗׷乃㰄⮛דׄךםׂյ꞊丗⽛צ⭳׊ֿ⭳全ױ׌ն鴫מJG乃םלע✳ֻםַסךյ兢♭⮆㹎؅׊ג ַ㕙⺬ע└ꯁ庋畀㯸؅✳זג׽׊ױ׌ն IBUFOBJOUFSO
71. 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 <> <ul> {range.map(n => <li key={`fb-item-${n}`}>{fizzbuzz(n)}</li>)} </ul> <button onClick={increaseCount}>௥Ճ</button> </> } IBUFOBJOUFSO
72. 놹ֿ꧟ֻ׾♞䘶 7JSUVBM
    %0. ˝ 3FBDUס⫂鼧ךע㲔꤀ס%0.ךעםׂյ%0.כ㵚מם׾ⶡ硾ם啶鵰⛮؅䧏זיַ׾ն׆׿ֿ♞䘶%0.כ⽛ף׿ יַ׾ն ˝ 3FBDUךע敯䛜ס㚺催؅吾湳׌׾כյ㚺催⯥䏲ס♞䘶%0.ס䄐⮆؅銶畀׊յאס䄐⮆ֵֿ׾鼧⮆דׄ؅㲔꤀ס %0.מ鸵䑴׌׾ն ˝ هٚؗاסٝ٤رٛ٤ءؤتع؅䤰ֻחח׵յꝧ氦縖ע6*؅אסױױ鋗鳭׌׾דׄך荁ַכַֹ☼磝ײ؅㲔杯 ׊יַ׾ն ˝ ٛتعםלךꯂ樑ֿ⪌׿僀؂׾꤀םלע
    key
    כַֹ㷯䓪؅┙ֻ׾׆כךאס㯸釐碛ֿ⺱׋ךֵ׾׆כ؅炐׌׆כ ֿ⭳全׾ IUUQTKBSFBDUKTPSHEPDTSFDPODJMJBUJPOIUNM 
    %PDVNFOU
    0CKFDU
    .PEFMס樋ն)5.-׷9.-乃傴ס啶鵰؅䳩⛼׌׾ג״סوٞءِٚ٤ءؕ٤ذ٭نؘؕتס׆כն 
    IUUQT[FOOEFWNJ[DIJCPPLTDDGDDDC IBUFOBJOUFSO
73. 'VODUJPO
    $PNQPOFOUךֵ׾ْٛشع ˝ 3FBDU
    $PNQPOFOUע꞊丗؅榫ַי辐杯׌׾׆כך꞊丗㑔وٞءِٚ٤ءס哭䒝؅⮵榫ך׀׾׻ֹמ׊יַ׾ ˝ חױ׽3FBDU
    $PNQPOFOUע3FBDU
    $PNQPOFOUױגעnull؅鲭׌꞊丗 ˝ ظ٭ذעِٖؕ٭ذهٜךֵ׾׻ֹמ׌׾ ˝ ؛هةؘؠع׷鿥⮛؅䣽ֹ꤀עؤم٭؅⛼䡗׊י־׼㚺催׌׾նArray.prototype.pushםל滭㙗氳ם㚺 催؅׊םַ׻ֹמ׌׾ ˝ 䌕丗ס⡁־׼磵冽 3FBDU
    $PNQPOFOU ؅鲭׌硾睛꞊丗כ׊י辐杯׈׿׾ ˝ 1SFTFOUFS7JFXםלס㷺מ⮆ׄג䏲מյא׿׼؅磝ײ⺬؂׎ג⺬䡗꞊丗כ׊י3FBDU
    $PNQPOFOUֿ辐杯⭳全 ׾ ˝ 6OJU
    5FTUםלֿ癨ⶡמםזג 
    3FBDU$PNQPOFOUؠٚت؅禆䤔׊גDMBTT؅榫ַג亠嫎׵ֵ׾ֿյ㵧全氳ם䉬塛ֿ◀㲊׈׿יַ׾ג״յ꞊丗؅榫ַג亠嫎סײ؅✳榫׌׾׆כ؅䍚ׂ䫟㝢׊ױ׌ն IBUFOBJOUFSO
74. 'VODUJPO
    $PNQPOFOUכ5ZQF4DSJQU ˝ 5ZQF4DSJQUך+49؅鋗鳭׌׾㕙⺬ע䦡䍖㯸؅.tsxמ׌׾ ˝ 㑔䫟鑜מ♳׎׾כ
    () => JSX.Elementמם׾ն⟊㱤䓪םל؅縒ֻ ׾כReact.FCםל؅伺炐׌׾סֿ荁ַ type Props = { name: string } const Welcome: React.FC<Props> = ({name}) => { return <h1>Welcome {name}</h1> } 
    3FBDU
    $PNQPOFOU׊י┘塜םundefined؅鲭׌׆כםל؅吾⭳׊יׂ׿ױ׌ 
    㛻ױ־מReact.FCכReact.VFCכַֹ׵סֵֿ׽ױ׌ն3FBDUؤ٤َ٭ؾ٤عס㲊紶מ'$ךעםׂ7'$؅✳ֹ
    
    ַׄד׷䤗软ؿ٭ع IBUFOBJOUFSO
75. 1SPQTכ4UBUF ˝ 3FBDU
    $PNQPOFOUמע⡁؅䧏ח亠嫎ֿ㛻׀ׂחֵ׾ ˝ ꞊丗ס䌕丗כ׊י⹨ׄ⹦׾1SPQTכ⫂鼧敯䛜؅⟊䧏׌׾4UBUF IBUFOBJOUFSO
76. 1SPQT؅峚׌⹨ׄ⹦׾ ˝ ⹨ׄ⹦׾⣐ע꞊丗ס瑬䌕丗ך؛هةؘؠعכ׊י⹨ׄ⹦׾ type Props = { name: string } const Welcome: React.FC<Props> = ({name}) => { return <h1>Welcome {name}</h1> } ˝ 峚׌⣐ 鈐⣐ ע+49ך㷯䓪⡁כ׊י峚׌ն؛هةؘؠعס؞٭כ⡁ֿא׿ב ׿㷯䓪⺲כ⡁מ㵚䑴׌׾ <Welcome name='John' /> // <h1>Welcome John</h1> IBUFOBJOUFSO
77. 敯䛜 4UBUF ؅䣽ֹ ˝ useStateכַֹ攐墤ם꞊丗؅✳ֹ׆כך敯䛜؅䧏ח׆כֿ⭳全׾ ˝ ׆ַֹזגuse־׼㡎ױ׾꞊丗ע3FBDUךنشؠ )PPLT כ⽛ף׿׾攐⮯ם꞊丗 function Counter () { const [count, setCount] = useState(0); const increaseCount = () => setCount(prevCount => prevCount + 1); return <div> Χ΢ϯτ: {count} <button onClick={increaseCount}>Χ΢ϯτ</button> </div> } IBUFOBJOUFSO
78. 3FBDUס)PPLTמחַי IBUFOBJOUFSO
79. )PPLTס䫍 3VMFT
    PG
    )PPLT
    ˑ
    3FBDU ˝ ⺲⯥עuse־׼㡎״׾ ˝ عشوٝيٜך⽛ש ˝ ifס╈םלך⽛ףםַ ˝ FBSMZ
    SFUVSO׌׾⯥מ䑒׍⽛ש ׆׿׼עeslint-plugin-react-hooksך吾⭳׊יׂ׿׾׻ֹמ⭳全׾ IBUFOBJOUFSO
80. ♏辐氳ם磝ײ鱮ײ)PPLTס磆☭ IBUFOBJOUFSO
81. useState ˝ useState()ך⮣僿⡁؅┙ֻ׾׆כֿ⭳全յ鲭׽⡁סذوٜסח泘ֿ 杯㏇ס⡁ךյח泘ֿTFUUFSמםזיַ׾ ˝ 鲭׽⡁ֿذوٜ 鿥⮛ םסךյ㞐׀ם⺲⯥؅חׄ׾סֿ癨ⶡ ˝ TFUUFS؅⽛שכ⫂鼧敯䛜ֿ催二׈׿ג׆כֿ$PNQPOFOUמ鵟湳׈׿ יյ♞䘶%0.ס⫋榟䡗յ奂鬳յٝ٤رٛ٤ءס催二ֿ车؂׿׾ ˝ 䫟鑜ך׀םַ׵ס؅㑔䧗㲊׊גַ㕙⺬ע㑔䌕丗؅榫ַ׾׆כֿ⭳全׾ const [color, setColor] = useState<Color>('red'); IBUFOBJOUFSO
82. useStateסTFUUFSמחַי ˝ 二׊ַ⡁؅峚׌ const [color, setColor] = useState<Color>('red'); const change2Blue = () => setColor('blue'); ˝ 泡⯥ס⡁؅⮵榫׊י二׊ַ⡁؅婊㲊׌׾ const [count, setCount] = useState(0); const increaseCount = () => setCount(prevCount => prevCount + 1); IBUFOBJOUFSO
83. 二׊ַ⡁؅峚׌כ׀ס蛽כ׊狌 const [count, setCount] = useState(0); const increaseCount = () => setCount(count + 1); כ׊י׊ױֹכյ const increaseDouble = () => { increment(); increment(); } ס׻ֹם׵ס؅⛼זגכ׀מյincreaseDouble؅⽛؆ך׵1׊־㘃ֻםַכ ַֹ杯霄מ鸿鷔׌׾ך׊׺ֹն IBUFOBJOUFSO
84. ꞊丗⫂ס㚺丗تؤ٭وכ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
85. ؤ٭ٜفشؠ꞊丗؅峚׌亠嫎ך傴׀泡׌ ❆ֻףյ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
86. useEffect ˝ 3FBDU
    $PNQPOFOU⫂ךⰜ⛼榫⭚杼׷ꪜ⺱僿מ⭚杼؅车ַגַ㕙 ⺬מ⮵榫׌׾)PPLT ˝ %0.؅催二׊ג䏲מ⽛צ⭳׈׿׾⭚杼؅傴ׂ׆כֿ⭳全׾ ˝ %0.ס催二䏲מQSPQT׷TUBUF؅⮵榫׊ג⭚杼؅㲔车׌׾׆כ ֿ⭳全׾ IBUFOBJOUFSO
87. $PNQPOFOUס催二夵מ؜ؗ٤ذ٭ס丗؅ alertךٗ٭ا٭מ鵟湳׌׾ function Counter () { const [count, setCount] = useState(0); const increaseCount = () => setCount(prevCount => prevCount + 1); alert(count) return <div>{/* ུ */}</div> } ˝ alertע⺱僿氳מ㲔车׈׿׾꞊丗םסךյٗ٭ا٭ֿր0,ց؅鹟䥃׌׾ױ ך㲔车ֿ塛ױ׽յٝ٤رٛ٤ءֿ׈׿םׂםזי׊ױֹն IBUFOBJOUFSO
88. useEffectס╈ךalert؅⽛ש function Counter () { const [count, setCount] = useState(0); const increaseCount = () => setCount(prevCount => prevCount + 1); useEffect(() => { alert(count) }); return <div>{/* ུ */}</div> } ˝ $PNQPOFOUֿٝ٤رٛ٤ء׈׿ג䏲מյ׆ס$PNQPOFOU؅ٝ٤رٛ٤ ء׊גⰜ⛼榫כ׊יalertֿ辐炐׈׿׾ 
    ׆׿עئ٤وٜםסךյalert؅✳זיױ׌ֿյ㲔꤀מٗ٭ا٭מنؔ٭غفشؠ؅׌׾ג״מalert؅✳ֹסע䌕׀禈׀6*؅هٞش؞٤ء׊י׊ױֹסך鹴ׄג亠ֿ荁ַך׌ն鸵⮉ם6* ؅$PNQPOFOU⫂㛙מ榫䙫׊יֽׂכ荁ַך׊׺ֹն IBUFOBJOUFSO
89. 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
90. 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
91. useEffectכؠٛ٭٤ػشو ˝ useEffectע꞊丗؅鲭׌׆כךאס꞊丗ֿ域סⰜ⛼榫ֿ⽛צ⭳׈׿׾⯥מ㲔车׈׿׾ ˝ ׆׿؅⮵榫׌׾כⰜ⛼榫סؠٛ٭٤ػشوֿ⭳全׾ roomIdֿ㚺催׈׿׾כյزٔشعס⹿ַ頇鐆؅⹦׽寕׊յ二׊ַ頇鐆؅ꝧ㡎׌׾❆ useEffect(() => { const handler = () => {/* ৽͍͠ϝοηʔδΛड͚औͬͨͱ͖ͷॲཧ */}; chat.subscribe(roomId, handler); return () => { chat.unsubscribe(roomId); } }, [roomId]) 
    狜鿥⮛؅䧗㲊׊יַ׾㕙⺬םלעؓ٤ُؗ٤ع侇מ׵㲔车׈׿׾ IBUFOBJOUFSO
92. 斻舅نشؠ $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
93. 斻舅نشؠמחַיס5JQT ˝ 斻舅نشؠמ$PNQPOFOUס䏔Ⱏ؅⪦鵟⴫׌׾׆כך⮉׽⭳׊ג嚀耆סײ؅طتع⺎耆מם׾ ˝ 斻舅نشؠך鲭׌؛هةؘؠع׷꞊丗םלעuseState׷useMemoյuseEffectך⺱┉䓪؅䥵⟊׊ יֽׂ<?> ˝ 攐מ꞊丗מחַיעֹז־׽碛儢מ꞊丗؛هةؘؠع؅鲭׊י׊ױַֿהםסךյ妳מ׊יֽׂכ⺮ ˝ 斻舅نشؠ؅⽛צ⭳׌⣐ֿ⺱┉䓪؅⟊䧏׌׾ג״מuseEffectמ峚׌ ׆כ؅吾鋀׌׾ 䑒釐ֿ⭳ י׀י׊ױֹ ˝ 磵冽յאסױױךע⮵榫ך׀׍מuseEffect׌׾׆כמם׽յ磵冽氳מ⫋⮵榫䓪׵┖ֿזי׊ױ ֹ <?>
    鎋׊ׂע♀ꎰր)PPLTס❣㰆ס奂鬳כ؛هةؘؠعס⺱┉䓪מחַיցך鉮鐄׊יַױ׌ն IBUFOBJOUFSO
94. 3FBDU
    'SBHNFOUמחַי ˝ <>כ</>ך㍱ֹכ3FBDU
    'SBHNFOU؅⛼׾׆כֿ⭳全׾ ˝ 3FBDU
    $PNQPOFOUעחס&MFNFOUמםזיַ׾䑒釐ֵֿ׾סךյ׆׿؅✳؂םַכ┘釐ם<div>םל ך㍱؂םַכַׄםׂם׾ ˝ ח♓┕ס3FBDU
    $PNQPOFOU؅┾׬׾דׄסכ׀מ僗Ⲗ function Component () { return <> <span>hello</span> <br /> <span>͜Μʹͪ͸</span> </> } 
    keyםלסوٞقطؔ؅錃㲊׊גַ㕙⺬ע
    <React.Fragment>כ</React.Fragment>ך׵♏榫⺎耆 IBUFOBJOUFSO
95. ֽ檄׿׈ױך׊ג ˝ 5ZQF4DSJQUכ3FBDUמחַיاشכ哭鈝מחַיֽ⚥ֻ׊ױ׊ג ˝ ׆׿דׄך氵׈؆ֿ傴ׂסעꦘ׊ַ־׵׊׿ױ׎؆ֿյ5ZQF4DSJQU׷ 3FBDUמ䧪䡵׌׾׀ז־ׄמםזיׂ׿׿ףכ䓙זיַױ׌ ˝ ׆׿♓㛙מ׵עיםؕ٤ذ٭٤ך⮣״י㰢ש٬鉴׿׾䤗软ֵֿ׾כ䓙 ַױ׌ֿյ佭ꪜ膳׎׍מزٔٝ٤ة׊יׂד׈ַ ˝ +BWB4DSJQU׷نٞ٤عؙ٤غס┩槡ע催מ䇶ֿזיַױ׌նؘؗههٚؗ ا؅╈䑏מֵ׼׹׾כ׆؀ךٗ٭ا٭ס泘מ泡䫘鉴׿׾׆כס㛡ַنٞ ٤عؙ٤غס┩槡؅哧׊؆ךׂד׈ַն IBUFOBJOUFSO
96. ׵זכ湳׽גַ 㵼׊馐ײ⭳׌ג״מ؛تتْס傴盈׷ؘؗهئؕعמחַיնױ׍ע5ZQF4DSJQU׷3FBDUע⪜ 䌋ئؕعסزٖ٭عٜٛؓ׷غ؞ْٖ٤عֿ⩗㲔׊יַ׾סךյא׿׼؅鐆׳ס׵؛تتْն ˝ +BWB4DSJQU
    +BWB4DSJQU
    1SJNFS
    
    鳿؂םַג״ס⪌ꝛ傴
    KTQSJNFS ˝ 5ZQF4DSJQU
    وٞءِٚ٤ء5ZQF4DSJQU ˝ 3FBDU
    3FBDUـ٤ث؛٤ٚ٭ؼ٤ء
    瑬撶 ˝ %0.
    *OUSPEVDUJPO
    UP
    UIF
    %0.
    
    8FC
    "1*T
    ]
    .%/ ⛰־㍭זג׆כ湳׽גַ׆כֵֿזג׼յ⦇׷ْ٤ذ٭אס☽骰鲣םؙ٤ةؼؓמם؆ך׵绂 ַיײיׂד׈ַ IBUFOBJOUFSO
97. ♀ꎰ 儖稴מ⪌׽⮉׼ם־זג馐ײ鱮؆ד遨餉׷鉮鐄מחַי傴ַיַױ׌ն艄⽏ֵֿ׿ף鐆؆ךׂד׈ַ氳םؤ٭ػ٭ך׌ն ˝ "SSPX
    'VODUJPOמחַי ˝ "SSPX
    'VODUJPOמ糋׀䬵ֻ⭳全םַآ٭ت ˝ "SSPX
    'VODUJPOכthis ˝ )PPLTס❣㰆ס奂鬳כ؛هةؘؠعס⺱┉䓪מחַי ˝ useMemo׷useCallback؅榫ַגقنؚ٭ُ٤ت䷉ャ ˝ 3FBDU
    $PNQPOFOU⫂ך%0.מؓؠجت׌׾ ˝ +BWB4DSJQU؅ؘؗهؓوٛآ٭ب٘٤ך䬠❠׌׾꤀מ✳榫׌׾ص٭ٜزؘؕ٤מחַי ˝ +BWB4DSJQU׷نٞ٤عؙ٤غ⼽鱨ס╚םص٭ٜמחַי ˝ +BWB4DSJQU׷نٞ٤عؙ٤غ⼽鱨䤗软ס嘅嶖 ⴫ מחַי IBUFOBJOUFSO
98. "SSPX
    'VODUJPOמ糋׀䬵ֻ⭳全םַآ٭ت ˝ function؅✳זיؤ٤تعٚؠذ꞊丗מ׊יַ׾ new׊יַ ׾ ˝ arguments؅⹆拨׊יַ׾ ˝ this؅⹆拨׊יַ׾ ˝ ׆סآ٭تמחַי鉮鐄׊ױ׌ IBUFOBJOUFSO
99. "SSPX
    'VODUJPOכthis ˝ "SSPX
    'VODUJPOכfunction؞٭٠٭غך榟䡗׊ג꞊丗כךע ╚מthisס䣽ַֿ㛻׀ׂ樟ם׾ ˝ ׆ס׆כמ׻זיⶡ硾ם糋׀䬵ֻֿ┘⺎ם㕙⺬ֵֿ׾ IBUFOBJOUFSO
100. 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
101. thisסتؤ٭وס鷿ַמחַי ˝ "SSPX
     'VODUJPOדכتؤ٭وֿ㛙כ⺱׋מם׾ const person = { name: 'chris', say: function () { setTimeout( () => { console.log(`I'm ${this.name}`) } , 100); } }; person.say(); // I'm chris IBUFOBJOUFSO
102. )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
103. ❣㰆鿥⮛מ؛هةؘؠع؅⪌׿׾آ٭تמחַי const config = { theme: 'sports' } useEffect(() => { loadConfig(config).then(() => {}) }, [config]) ס׻ֹם㕙⺬מעٝ٤رٛ٤ءס䈱מյconfigֿ⫋榟䡗׈׿׾ն׻זיյ 樟ם׾⡁כ׊י鏀閁׈׿י׊ױַյ夵㍑Ⱌ⛼榫ֿ⽛צ⭳׈׿י׊ױֹն׆ס ׻ֹם❆ס㕙⺬ע❣㰆מ
     [config.theme]כַֹ겧מ⡁؅傴ַי׊ױזי ׵荁ַֿյ❣㰆׌׾؛هةؘؠعמחַי湳זיַ׾䑒釐ֵֿ׾סךꦘ׊ ַն IBUFOBJOUFSO
104. ب٤وٜם㍑鹴瓀 ˝ ┉樑癨ⶡם㍑鹴瓀ע$PNQPOFOUס㛙ך⮣僿⴫׊י׊ױֻף荁ַ const config = { theme: 'sports' } function Component () { useEffect(() => { loadConfig(config).then(() => {}) }, [config]); } ˝ ┉亠ךյ׆ס┩מע1SPQT؅⮵榫׊י؛هةؘؠع؅榟䡗׌׾םל׵׻ׂ ֵ׾סךյ׆ס亠嫎ֿ✳ֻ׾׆כע㵼םַ IBUFOBJOUFSO
105. ؛هةؘؠعס⫋榟䡗؅㍑鹴׌׾ג״מ
     useMemo
     ؅⮵ 榫׌׾ ˝ useMemoע3FBDUמ磝ײ鱮ױ׿יַ׾)PPLTסחךյאס⺲ס鵟׽յ⡁؅ْٓ⴫׌׾׆כֿ⭳全ױ׌ 葏乃珕؅㯸釐碛מ䧏הյאס乃珕╈סⶡ鏤丗؅丗ֻ׾$PNQPOFOU؅傴ַיײ׾ function WordCount ({children}) { // text͸stringͳͷͰɺͦͷ··ґଘ഑ྻʹग़དྷΔ const words = useMemo(() => children.split(' '), [text]); useEffect(() => { alert(`୯ޠ਺͸${words.length}Ͱ͢`) }, [words]); } 
     $PNQPOFOUס╈ס㯸釐碛עchildrenכַֹ⺲⯥ך⹨ׄ⹦׾׆כֿ⭳全׾ն<WordCount>Lorem ipsum dolor sit amet</WordCount>ס׻ֹם䎬ך⽛צ⭳׌ն 
     ْٓ⴫עقنؚ٭ُ٤ت䷉ャסג״מ銶畀磵冽؅؞ٔشبٖ׊ג׽׌׾׆כ IBUFOBJOUFSO
106. useCallbackך꞊丗؅ْٓ⴫׌׾ ˝ ⡁⺱喋מ꞊丗؅ْٓ⴫׊גַ㕙⺬עuseCallback؅⮵榫׌׾ ˝ ْٓ⴫׊םַכ夵ٝ٤رٛ٤ء侇מ꞊丗؛هةؘؠعֿ榟䡗 ׈׿י׊ױֹ const handler = useCallback((val) => alert(val), []); useEffect(() => { Api.notification.subscribe(handler) }, [handler]); IBUFOBJOUFSO
107. useMemo׷useCallback؅榫ַגقنؚ٭ ُ٤ت䷉ャ ˝ useMemo׷useCallbackע⡁׷꞊丗סْٓ⴫מ׻זיuseEffectםלס┘釐ם⽛צ⭳׊؅䤰⯆׌׾׆כמ ׻זיقنؚ٭ُ٤تס䷉ャ؅僿䏨ך׀׾ ˝ 攐מuseMemoךע❣㰆מ✳؂םַ㕙⺬ך׵յ⭚杼סꄆַ銶畀磵冽؅ْٓ⴫׌׾׆כךٝ٤رٛ٤ء侇סهٞش ؠ؅䤰ֻ׾׆כ׵⭳全׾ function Component ({a, b}) => { const resultA = useMemo(() => superDuperHighCostCulculation(a), [a]); const resultB = useMemo(() => superDuperHighCostCulculation(b), [b]); return <> <span>{a}͔ΒʮΊͪΌͪ͘Όॏ͍ܭࢉʯΛͨ݁͠Ռ: {resultA}</span> <span>{b}͔ΒʮΊͪΌͪ͘Όॏ͍ܭࢉʯΛͨ݁͠Ռ: {resultB}</span> </> } IBUFOBJOUFSO
108. 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 <form onSubmit={submit}> <input type='text' ref={textInput} /> </form> IBUFOBJOUFSO
109. %0.׫סؓؠجت؅鹴ׄ׾亠ֿ荁ַ ˝ %0.מ泡䫘ؓؠجت׌׾כյ3FBDUס⯆䐒㛙סכ׆؀ך⡁ֿ⹦䐂׈׿ג׽㚺催 ׈׿ג׽׌׾׆כמם׾ն ˝ ٚؕهٚٛס齉⺬םלך儖䎎מ䑒釐םכ׀סײמ׊יֽׂכ荁ַ const [text, setText] = useState(''); const submit = (e) => { e.preventDefault(); if (text < 100) return alert('101จࣈҎ্͕ඞཁͰ͢'); createPost({body: text}) } return <form onSubmit={submit}> <input type='text' onChange={(e) => setText(e.target.value)} /> </form> IBUFOBJOUFSO
110. +BWB4DSJQU؅ؘؗهؓوٛآ٭ب٘٤ך䬠❠ ׌׾꤀מ✳榫׌׾ص٭ٜزؘؕ٤מחַי 5ZQF4DSJQU+BWB4DSJQU؅㲔꤀סؘؗهؓوٛآ٭ب٘٤ךٗ٭ ا٭סؘؗههٚؗاך㲔车׌׾꤀מעյַׂח־סص٭ٜ؅磝 ײ⺬؂׎י㚺䬵׊ג׽׊ג׵ס؅䬠❠׌׾ն IBUFOBJOUFSO
111. 5ZQF4DSJQUסؤ٭غֿٗ٭ا٭מ㷐ׂױךס❆ ˝ 5ZQF4DSJQU̜+BWB4DSJQU ˝ UTDך׵⭳全׾ֿյCBCFMך㚺䬵׌׾׆כ׵㛡ַ ˝ +BWB4DSJQU̜㵚䑴هٚؗا׫ס◍䬵䓪ֵֿ׾+BWB4DSJQU ˝ "1*מ׻זיעئَ٭ع׊יַ׾هٚؗاךאסױױךעⳂ־םַ׆כֵֿ׾סךյCBCFM؅榫ַיյ䑒釐םQPMZMMםל؅磝ײ⪌׿׾ ˝ 54̜+4ס㚺䬵׵CBCFMך车ֹ㕙⺬עյא׿ב׿䑒釐םوٚءؕ٤؅⪌׿י㲔车 ˝ ⠕⮯ס+BWB4DSJQUنٜ̜ؒؕⶡ┉ס+BWB4DSJQUنٜؒؕ ˝ XFCQBDLםלך+BWB4DSJQUסنٜؒؕ؅礴⺬ CVOEMF ׌׾ն&4
     .PEVMFT؅⪒יס梪㗞ךئَ٭ع׊יַ׿ף┘釐כַֹ鐄׵ֵ׾ֿյחס نٜؒؕמםזיַ׾亠ֿقنؚ٭ُ٤تםלס鈝憠ך僗⮵ם׆כ׵ֵ׾ ˝ +BWB4DSJQUنٜ̜ؒؕ㏆竊׈׿ג+BWB4DSJQU TPVSDFNBQ ˝ ٗ٭ا٭ס䣆⩕מ㷐ׂכ׀מעյ㳊ꄈ؅峎׼׊ג׽׌׾ג״מNJOJGZ׈׿גؤ٭غמ׌׾׆כֿ㛡ַն ˝ אסױױךע鐆׳סֿ㍭ꦘםסךյꝧ氦縖⺸ׄ׷ؙٚ٭عٚش؞٤ءסג״מ⩕ס54+4כס㵚䑴؅鋗ꎰ׊ג׵סֿTPVSDFNBQ 
     ꦘ鐆⴫כע樟ם׽յ㚺丗⺲׷꞊丗⺲םל؅乃㰄מ糋׀䬵ֻ׾םל׊י㳊ꄈס⯡峎؅㍲׾նXFCQBDLמ磝ײ鱮ױ׿יַ׾5FSTFSךעյ5SFF4IBLJOHכַֹ┘釐םؤ٭غס⯡ꢜ׷┘釐ם⮆㹎 ס⯡ꢜםל׵车؂׿׾ն IBUFOBJOUFSO
112. XFCQBDLדכ٬٬٬ ˝ 5ZQF4DSJQU־׼+BWB4DSJQUױךס㚺䬵כ◍䬵䓪סג״ס䳩⛼ע CBCFM babel-loader磬榺ך⮵榫 ך车ֹ ˝ نٜؒؕס磵⺬םלעXFCQBDLס╚ג׾嚀耆 ˝ 㳊ꄈ⯡峎ע5FSTFS webpack-terser-plugin磬榺ך⮵榫 ך车 ֹ IBUFOBJOUFSO
113. create-react-app
     מחַי ˝ 3FBDU؅✳זגوٞةؘؠعס⛼䡗յ꞊鵽ص٭ٜס㵵⪌٬㲔车؅舅Ⳃ⴫׊יׂ׿׾ ˝ 㓹儖氳מעױ׍ע׆׿؅✳זיֽׄף0, ˝ XFCQBDL
     CBCFM
     FTMJOUםל钥չס錃㲊ס榟䡗׵舅Ⳃך车؂׿ױ׌ ˝ npm startךٞ٭؜ٜꝧ氦梪㗞ס玮ה┕ׅյnpm testךٗؼشعطتعֿ㲔车ך׀׾ ˝ 鎋碷ע⫂鼧ך✳؂׿יַ׾react-scriptsמ꥗硜׈׿יַ׾ ˝ create-react-appך⮵榫׌׾ص٭ٜע㲊僿氳מ釤泡׈׿ג׽׊יַיյ䅻מ僃二ס3FBDUؤ ِٖؼطؔס湳釤ֿ孨־׈׿יַ׾ ˝ create-react-app؅ؚؗشز׌׾׆כךאַֹזג僃二סⳂ⺸כַֹ׵סמ׵鉴׿׼׿׾ סךյ3FBDUס⼽鱨מחַי湳׽גַ☔ע׆סَٛةعٛ؅釳ַיײ׾סֿ؛تتْ IBUFOBJOUFSO
114. +BWB4DSJQU׷نٞ٤عؙ٤غ⼽鱨䤗软ס嘅嶖 ⴫ מחַי ╚מهٚؗا┕ךⳂׂ+BWB4DSJQU׷%0.յ)5.-յ$44םלס"1*עא׿ב׿♓ ┖ס׻ֹם☼喋ךא׿ב׿嘅嶖⴫׈׿יַ׾ ˝ &$."4DSJQU ˝ 8)"58(
     )5.-
     -JWJOH
     4UBOEBSE ˝ 8)"58(
     %0.
     -JWJOH
     4UBOEBSE ˝ 8$
     $44
     4QFDJDBUJPOT IBUFOBJOUFSO
115. ם׏☼喋؅湳׾ס־ ˝ אס"1*ס䨕׾艵ַמחַי塜׊ַ䨕׾艵ַ؅㲊紶׊יַ׾סע☼喋ךֵ׾ն ˝ ┩ס╈מ⪜ꝧ׈׿יַ׾䗯㕔ֿ丗㛡ֵׂ׾ֿյאס䗯㕔ס塜׊׈؅僃磙氳מ ⟊錞׌׾ג״ס䗯㕔嶎ֿ☼喋ךֵ׾ն ˝ ❆ֻף+BWB4DSJQU׷$44םלס䨕׾艵ַֿؘؗههٚؗاꝴך樟ם׾㕙⺬յ אס侇מ塜׊׈؅⟊錞׊יׂ׿׾סע☼喋ךֵ׾ն ˝ 㲔꤀յنٞ٤عؙ٤غ؅╈䑏מ荇؆ם׆כ؅׊יַ׾כյ☼喋כهٚؗا ס㲔逷מ䄐樟ֵֿ׾׆כמ鸿鷔׊יյ㕔⼔׌׾׆כֵֿ׽ױ׌ն 
     ؘؗههٚؗاמفء㕔⼔؅׌׾כ׀מ׷׾׆כ
     
     פ׌גׄ仼鋗 IBUFOBJOUFSO
116. &$."4DSJQUמחַי ˝ +BWB4DSJQUס嘅嶖☼喋ע&$."4DSJQUכַֹ⺲⯥ךյ&DNB
     *OUFSOBUJPOBMס╈ס5FDIOJDBM
     $PNNJUUFF
     5$כַֹ䤗软㡦⿦⚡ֿ╈䑏מ瓀㲊׈׿יַ׾ն ˝ 杯㏇ס☼喋עIUUQTHJUIVCDPNUDFDNBך畘杼׈׿יַיյ
     䅻מ僃二撶ֿ⪜ꝧ׈׿ 禈ׄיַ׾ն ˝ ׆ַֹֹ䅻מ僃二撶ֿ⪜ꝧ׈׿יַ׾䎬䌋؅-JWJOH
     4UBOEBSEכ⽛צױ׌ն ˝ 夵䇗僖ꮽסِ٭طؔ٤ءך&$."4DSJQU
     ס׻ֹםذءֿ䣒ג׿יյف٭ة٘٤樑⺘ֿ♀ ┙׊ג׵ס׵⪜ꝧ׈׿ױ׌ֿյאס侇憠ךסتػشوب٘شعךֵ׽յאסف٭ة٘٤舅⛮ מעֵױ׽䙫⽏עםַך׌ 
     CBCFM׷UTDס錃㲊ך⮵榫׌׾׆כ׵ֵ׽ױ׌ֿյ☼喋כ׊יעא؆םמ妳מ׌׾䑒釐עםַך׌ն׆סف٭ة٘٤כע斻玮׊יյ☼喋ס䬠勅ֿ鶟׳ذِؕ٤ءךא׿ב׿ס⭚杼硌מַֽי 㲔逷ֿ车؂׿יյ⮵榫⺎耆מם׾־׼ך׌նױגյ䏲鳭׊ױ׌ֿQPMZMMםלמ׻זי㲔车⺎耆מם׾׆כ׵ֵ׽ױ׌ն 
     &DNB
     *OUFSOBUJPOBMע$םלס嘅嶖⴫⛼哅׵车זיַ׾ IBUFOBJOUFSO
117. &$."4DSJQUס4UBHF ˝ &$."4DSJQUמע舅榺מ䬠勅 QSPQPTBM ؅⭳׌׆כֿ⭳全׾ ˝ (JUIVC┕ךQSPQPTBMֿ⪜ꝧ׈׿յJTTVF׷13׷5$סِ٭طؔ٤ءםל ךס閱鑜؅磬יյ4UBHFֿ┕ֿזג׽׌׾ ˝ 鞊♳縖ךֵ׾زٔ٤م؛٤סتط٭ة؅鶟״גַכַֹ䙫䓙׵䑒釐 ˝ 妳מם׾وَٞ٭اֿٜם־ם־⹦׽鱮ױ׿םַ㕙⺬עյ*TTVF׷ِ٭ طؔ٤ءؿ٭ع؅釤׾כك٤عֵֿ׾־׵ ˝ א׿׼ע域ס׻ֹםتط٭ة؅磬יյ4UBHF
     מםזג䏲מ&$."4DSJQUס☼ 喋מ⹦׽鱮ױ׿׾ն IBUFOBJOUFSO
118. 4UBHFס鎋碷 تط٭ة تط٭ةס哭釐  ؓؕظؓ敯䛜  嚀耆䬠勅  嚀耆ס☼喋傴غٚنع؅⛼䡗׊ג敯䛜  ☼喋כ׊יע׮ׯ㱭䡗׊יַיյهٚؗاס㲔逷׷نؔ٭غفشؠ؅姲״ ׾壿꣪  ☼喋瓀㲊ֿ㱭▼׊յח♓┕ס㲔逷ֿ㰆㏇׊יַ׾敯䛜 &$."4DSJQU
     u
     +BWB4DSJQU
     1SJNFS
     KTQSJNFS 
     ╚מ4UBHF♓⯥侇憠ךס㲔逷םלעאס䏲ס☼喋㚺催םלס⺎耆䓪׵ֵ׾סךյهٚؗاסꝧ氦縖⺸ׄنٚء؅僗Ⲗמ׊יַ׾כ׀דׄ✳ֻג׽յQSFY؅♀ׄג⺲⯥ך"1*ֿ䬠❠׈׿׾ ׆כ׵ֵ׾նא׿׼׵㲔逷כ׊י錉㳊׈׿׾םלס稷׈עֵ׾ն 
     ח♓┕ס+BWB4DSJQUסٚ٤ذّؕמ㲔逷ֿ㰆㏇׊יַ׾כַֹ׆כֿ姲״׼׿׾ն╚םٚ٤ذّؕע(PPHMF
     $ISPNF׷/PEFKTך✳榫׈׿יַ׾7׷4BGBSJך✳榫׈׿יַ׾ +BWB4DSJQU$PSFյ'JSFGPYך✳榫׈׿יַ׾4QJEFS.POLFZյ'BDFCPPLֿꝧ氦׊יַ׾)FSNFTםלֵֿ׾ն IBUFOBJOUFSO
119. &$."4DSJQUס☼喋כ㲔逷 ˝ 4UBHF
     מםזג׽յ&$."4DSJQUמ⹦׽鱮ױ׿יַםׂי׵յؘؗههٚؗاםלמ㲔逷׈׿י✳榫⭳全׾׻ֹמם׾ ׆כֵֿ׾ ˝ 鴫מ㲔逷׈׿יַםַכյ☼喋מ⹦׽鱮״םַ ˝ אס敯䛜ך犉哕氳מ✳榫׌׾׆כךوَٞ٭اٜמنؔ٭غفشؠ؅׌׾׆כֿך׀׾ ˝ ױגյ㲔逷ֿםַ敯䛜ך׵ؤِٖؼطؔ׷core-jsמ׻זיQPMZMM㲔逷ֿ䬠❠׈׿ג׽յCBCFMמ׻׾عٚ٤تق ٜؕםלךؓوٛآ٭ب٘٤⫂ך✳榫ך׀׾׻ֹמם׾׆כֵֿ׾ ˝ א׿׼؅㲔榫׌׾׆כך׵وَٞ٭اٜמنؔ٭غفشؠֿך׀ג׽յ僗榫䓪؅炐׌׆כֿ⭳全׾ ˝ &$."4DSJQUסوَٞ٭اٜע䅻מ⪒יֿ0QFOךյא׿מ꞊؂׾ظؔت؜شب٘٤׵0QFOםסךյ艄⽏סֵ׾䬠勅ֿ ֵזג׼յ佭ꪜ釳ַיײיյ✳榫׊յَةطؔهם憠׷ゖ갭憠ֵֿ׿ף佭ꪜنؔ٭غفشؠ؅׌׾׆כךյ儔全ס +BWB4DSJQU梪㗞؅׻ׂ׌׾׆כמ笋ֿ׽ױ׌ն 
     &$."4DSJQUסوَٞ٭اٜע㛡ׂס㕙⺬յאס䬠勅ֿրלס׻ֹםٓزي٭ب٘٤ֵֿ׾ס־ցյրלס׻ֹםゖ갭؅鉮婊׌׾ס־ցյրלס׻ֹםٗ٭تآ٭تֵֿ׾ס־ցםלֿ鋗 ׈׿יַ׾סךյאס僗榫䓪םל؅炐׌׆כ׵靹春מ笋ֿ׽ױ׌ն IBUFOBJOUFSO
120. ؘؗههٚؗا┕ס+BWB4DSJQUכ &$."4DSJQU ˝ ؘؗههٚؗا┕ך㲔车ך׀׾+BWB4DSJQUע&$."4DSJQUס☼喋מ⻠ױ׿יַ׾׵סדׄךעםַ ˝ ❆ֻףlocation.assignע8)"58(
     )5.-
     -JWJOH
     4UBOEBSEյdocument.querySelectorע8)"58(
     %0.
     -JWJOH
     4UBOEBSEך㲊紶׈׿יַ׾ ˝ 8)"58(כַֹ磝笝מ׻זי催二٬畘杼׈׿יַ׾)5.-%0.א׿ב׿ס-JWJOH
     4UBOEBSEם☼喋מ ׻זי畘杼׈׿יַ׾ն ˝ &$."4DSJQUס☼喋ךעםַסךյ)5.-׷%0.؅䣽؂םַ梪㗞 /PEFKTםל ךע㲔车ך׀םַ 
     ♓⯥ע8$מ׻זי)5.-յ)5.-םלֿ瓀㲊׈׿יַגֿյ䇗僖מ8)"58(⣐מ塥ײ㳝׾׆כ؅辐伺յ䇗僖仼מע8)"58(ֿ⪜ꝧ׊יַ׾-JWJOH
     4UBOEBSE؅塜䌋מ 8$סⳡ⼔כ׊גն⹆縒
     <IUUQTGVUVSFBSDIJUFDUHJUIVCJPBSUJDMFTB
     לֹ׊י)5.-ֿ䉬塛׈׿גס־
     ]
     نٖ٭زٔ٭䤗软هٞء> 
     䇗מ"QQMF٬.P[JMMB٬0QFSBס炘מ׻זי錃玮׈׿גնאס䏲յ8$כסؤِٖؼآ٭ب٘٤؅禈ׄםֿ׼׵هٚؗاي٤ر٭؅⹦׽鱮ײյ㛙㔃؅㒪״םֿ׼)5.-
     -JWJOH
     4UBOEBSE؅⪜ꝧ٬畘杼׊禈ׄיַג IBUFOBJOUFSO
121. ؘؗههٚؗاي٤رכ8)"58(☼喋 ˝ ╚מ(PPHMF
     $ISPNFꢛㅀע)5.-׷%0.מ꞊؂׾"1*ס䬠勅؅丗㛡ׂ车זיַ׾ ˝ ׆׿׼ע䬠勅縖ךֵ׾(PPHMF
     $ISPNFמע⹦׽鱮ױ׿׾ֿյ"QQMF׷.P[JJMBס ⹚㵚מ⚡ַյ☼喋כ׊יע⹦׽鱮ױ׿םַ׆כ׵㛡չֵ׾ ˝ $ISPNFס☼喋عٚش؜٭
     $ISPNF
     1MBUGPSN
     4UBUVT ˝ .P[JMMBס玮㕙؅辐伺׊יַ׾ؘؗهئؕع
     .P[JMMB
     4QFDJDBUJPO
     1PTJUJPOT ˝ 8$⫂ס8FC
     *ODVCBUPS
     $PNNVOJUZ
     (SPVQכַֹכ׆؀ך喋չם䬠勅ֿ⛼䡗٬ 閱鑜׈׿יַ׾ 
     IUUQTTDSBQCPYJPQBTUBLQVCꪫ氫8FC"1*鵽氦
     ך荇չ磆☭׊יַױ׌ IBUFOBJOUFSO
122. 8$
     $44
     4QFDJDBUJPOT ˝ ַ؂׹׾$44כ⽛ף׿׾$44ס杯㏇٬儔全ס☼喋ע8)"58( ךעםׂ䌕׀禈׀8$מ׻זי催二٬畘杼٬瓀㲊ֿ车؂׿יַ ׾ ˝ "MM
     $44
     TQFDJDBUJPOT IBUFOBJOUFSO