Slide 1

Slide 1 text

Frontend Bootcamp 2021-08-17 id:Pasta-K from Mackerel Team IBUFOBJOUFSO

Slide 2

Slide 2 text

׆סه٭ع؞ٔ٤وסإ٭ٜ ˝ 氵׈؆ֿ╚מ䏲ⶐסز٭ّꝧ氦ךنٞ٤عؙ٤غמ꞊؂׾׻ֹםذتؠמ⹦׽磝 ׳꤀מ㍭׼םַ僃⛥꡾ס湳閁؅חׄי׵׼ֹ ˝ ׆ס铺紶ך䣽ֹنٞ٤عؙ٤غסꯛ㓊ע+BWB4DSJQU5ZQF4DSJQU3FBDUך׌ ˝ 8FCꝧ氦מַֽי䇗չꄆ釐䈱؅㘃׊יַ׾نٞ٤عؙ٤غס┉珷؅氵׈؆מ 냕鵭מ؞ٔشزؓشو׊י׵׼ֹֽכַֹ泘鑜釤 ˝ םסךյ鐄伺סג״מ⼽鱨מ꞊׌׾鐄伺؅泸樋׊ג׽׊יַ׾׆כ׵ֵ׽ױ׌ ˝ ֵ؂׻ׂףؕ٤ذ٭٤ֿ磙؂זג䏲׵3FBDU׷5ZQF4DSJQUםלסنٞ٤عؙ٤غ 䤗软כ氵׈؆ֿ䢆׿׾꤀ס䣆Ⲃׄמם׿ף荁ַכ䓙זיַױ׌ 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 ˝ function׷return؅✳؂׍מ꞊丗؅榟䡗ך׀׾ ˝ 㓹儖氳מע׆ס亠嫎ך꞊丗؅榟䡗׊יֽׄףـُ׼םַ 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; } // 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

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?. ˝ ؛هةؘؠعֿ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מ꞊ ؂׾ゖ갭؅侇չ䌕׀颯׆׊י׊ױֹ׆כמ嫰䙫ն׆סゖ갭׵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庋畀㯸ס⮵榫❆ ˝ 攐מ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

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ך㑔؝٭غ׌׾ ˝ 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

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⫂%JFSFODFT#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.json͸anyͱͳΒͣʹܕҾ਺Ͱ౉͞Εͨ΋ͷͱղऍ͞ΕΔ return fetch(url).then(res => res.json()) } // ͜͜Ͱusers͸User[]ʹͳΔ const users = getJSON('/api/users'); // ͜͜Ͱblogs͸Blog[]ʹͳΔ 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 // ReturnVal͸stringͱղऍ͞ΕΔ IBUFOBJOUFSO

Slide 58

Slide 58 text

typeof庋畀㯸 ˝ ׆ה׼ע⯥鳭ס׵סכע鷿ֹ5ZQF4DSJQU磝ײ鱮ײס׵סն㑔ؓ ؿط٭ب٘٤؅傴ׂ㕙䢥ך⮵榫׌׾ն ˝ +BWB4DSJQUך㲚銧׈׿ג⡁؅ꪐ氳鉮冪׊י㑔؅䐂׾ const hello = () => 'hello'; type Func = typeof hello; type P = ReturnType; // P͸stringͱղऍ͞ΕΔ 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ך鿥⮛׷؛هةؘؠعמ[]؅✳זי⡁؅⹦׽⭳׌׻ֹמ㑔 ך׵⺱׋׻ֹם׆כֿ⭳全׾ն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

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
IBUFOBJOUFSO

Slide 69

Slide 69 text

+49מחַי ˝ 3FBDUךע㛡ׂס㕙⺬յ+49כַֹ鋗嫎ֿ✳ֻ׾ ˝ )5.-؅傴ׂ׻ֹמ3FBDU&MFNFOU؅鋗鳭ך׀׾ ˝ 㲚銧氳מ6*؅傴ׂ׆כֿ⭳全׾ const list =
  • 1
  • 2
  • fizz
  • 4
  • buzz
+49ע+BWB4DSJQU؅斻舅מ䦡䍖׊ג啶乃ն#BCFMםלמ׻זי3FBDUך釐碛םל؅榟䡗׌׾+BWB4DSJQUסؤ٭غמ㚺䬵מ׈׿י㲔车׈׿ױ׌նIUUQTKBSFBDUKTPSHEPDTJOUSPEVDJOH KTYIUNM IBUFOBJOUFSO

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)}
  • )}
䌋 FYQSFTTJPO עאס㕙ך⡁؅鲭׌׵סյ㚺丗מ♏⪌ך׀׾׵סס׆כך׌նחױ׽յ㚺丗׷乃㰄⮛דׄךםׂյ꞊丗⽛צ⭳׊ֿ⭳全ױ׌ն鴫מJG乃םלע✳ֻםַסךյ兢♭⮆㹎؅׊ג ַ㕙⺬ע└ꯁ庋畀㯸؅✳זג׽׊ױ׌ն IBUFOBJOUFSO

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)}
  • )}
௥Ճ > } IBUFOBJOUFSO

Slide 72

Slide 72 text

놹ֿ꧟ֻ׾♞䘶 7JSUVBM %0. ˝ 3FBDUס⫂鼧ךע㲔꤀ס%0.ךעםׂյ%0.כ㵚מם׾ⶡ硾ם啶鵰⛮؅䧏זיַ׾ն׆׿ֿ♞䘶%0.כ⽛ף׿ יַ׾ն ˝ 3FBDUךע敯䛜ס㚺催؅吾湳׌׾כյ㚺催⯥䏲ס♞䘶%0.ס䄐⮆؅銶畀׊յאס䄐⮆ֵֿ׾鼧⮆דׄ؅㲔꤀ס %0.מ鸵䑴׌׾ն ˝ هٚؗاסٝ٤رٛ٤ءؤتع؅䤰ֻחח׵յꝧ氦縖ע6*؅אסױױ鋗鳭׌׾דׄך荁ַכַֹ☼磝ײ؅㲔杯 ׊יַ׾ն ˝ ٛتعםלךꯂ樑ֿ⪌׿僀؂׾꤀םלעkeyכַֹ㷯䓪؅┙ֻ׾׆כךאס㯸釐碛ֿ⺱׋ךֵ׾׆כ؅炐׌׆כ ֿ⭳全׾ IUUQTKBSFBDUKTPSHEPDTSFDPODJMJBUJPOIUNM %PDVNFOU0CKFDU.PEFMס樋ն)5.-׷9.-乃傴ס啶鵰؅䳩⛼׌׾ג״סوٞءِٚ٤ءؕ٤ذ٭نؘؕتס׆כն IUUQT[FOOEFWNJ[DIJCPPLTDDGDDDC 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'$؅✳ַֹׄד׷䤗软ؿ٭ع IBUFOBJOUFSO

Slide 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

IBUFOBJOUFSO

Slide 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.ס催二䏲מQSPQT׷TUBUF؅⮵榫׊ג⭚杼؅㲔车׌׾׆כ ֿ⭳全׾ 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ס䏔Ⱏ؅⪦鵟⴫׌׾׆כך⮉׽⭳׊ג嚀耆סײ؅طتع⺎耆מם׾ ˝ 斻舅نشؠך鲭׌؛هةؘؠع׷꞊丗םלעuseState׷useMemoյ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

Slide 95

Slide 95 text

ֽ檄׿׈ױך׊ג ˝ 5ZQF4DSJQUכ3FBDUמחַיاشכ哭鈝מחַיֽ⚥ֻ׊ױ׊ג ˝ ׆׿דׄך氵׈؆ֿ傴ׂסעꦘ׊ַ־׵׊׿ױ׎؆ֿյ5ZQF4DSJQU׷ 3FBDUמ䧪䡵׌׾׀ז־ׄמםזיׂ׿׿ףכ䓙זיַױ׌ ˝ ׆׿♓㛙מ׵עיםؕ٤ذ٭٤ך⮣״י㰢ש٬鉴׿׾䤗软ֵֿ׾כ䓙 ַױ׌ֿյ佭ꪜ膳׎׍מزٔٝ٤ة׊יׂד׈ַ ˝ +BWB4DSJQU׷نٞ٤عؙ٤غס┩槡ע催מ䇶ֿזיַױ׌նؘؗههٚؗ ا؅╈䑏מֵ׼׹׾כ׆؀ךٗ٭ا٭ס泘מ泡䫘鉴׿׾׆כס㛡ַنٞ ٤عؙ٤غס┩槡؅哧׊؆ךׂד׈ַն IBUFOBJOUFSO

Slide 96

Slide 96 text

׵זכ湳׽גַ 㵼׊馐ײ⭳׌ג״מ؛تتْס傴盈׷ؘؗهئؕعמחַיնױ׍ע5ZQF4DSJQU׷3FBDUע⪜ 䌋ئؕعסزٖ٭عٜٛؓ׷غ؞ْٖ٤عֿ⩗㲔׊יַ׾סךյא׿׼؅鐆׳ס׵؛تتْն ˝ +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ס❣㰆ס奂鬳כ؛هةؘؠعס⺱┉䓪מחַי ˝ useMemo׷useCallback؅榫ַגقنؚ٭ُ٤ت䷉ャ ˝ 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}) { // text͸stringͳͷͰɺͦͷ··ґଘ഑ྻʹग़དྷΔ 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

useMemo׷useCallback؅榫ַגقنؚ٭ ُ٤ت䷉ャ ˝ useMemo׷useCallbackע⡁׷꞊丗סْٓ⴫מ׻זי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؅榫ַיյ䑒釐םQPMZMMםל؅磝ײ⪌׿׾ ˝ 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$$444QFDJDBUJPOT IBUFOBJOUFSO

Slide 115

Slide 115 text

ם׏☼喋؅湳׾ס־ ˝ אס"1*ס䨕׾艵ַמחַי塜׊ַ䨕׾艵ַ؅㲊紶׊יַ׾סע☼喋ךֵ׾ն ˝ ┩ס╈מ⪜ꝧ׈׿יַ׾䗯㕔ֿ丗㛡ֵׂ׾ֿյאס䗯㕔ס塜׊׈؅僃磙氳מ ⟊錞׌׾ג״ס䗯㕔嶎ֿ☼喋ךֵ׾ն ˝ ❆ֻף+BWB4DSJQU׷$44םלס䨕׾艵ַֿؘؗههٚؗاꝴך樟ם׾㕙⺬յ אס侇מ塜׊׈؅⟊錞׊יׂ׿׾סע☼喋ךֵ׾ն ˝ 㲔꤀յنٞ٤عؙ٤غ؅╈䑏מ荇؆ם׆כ؅׊יַ׾כյ☼喋כهٚؗا ס㲔逷מ䄐樟ֵֿ׾׆כמ鸿鷔׊יյ㕔⼔׌׾׆כֵֿ׽ױ׌ն ؘؗههٚؗاמفء㕔⼔؅׌׾כ׀מ׷׾׆כפ׌גׄ仼鋗 IBUFOBJOUFSO

Slide 116

Slide 116 text

&$."4DSJQUמחַי ˝ +BWB4DSJQUס嘅嶖☼喋ע&$."4DSJQUכַֹ⺲⯥ךյ&DNB*OUFSOBUJPOBMס╈ס5FDIOJDBM $PNNJUUFF5$כַֹ䤗软㡦⿦⚡ֿ╈䑏מ瓀㲊׈׿יַ׾ն ˝ 杯㏇ס☼喋עIUUQTHJUIVCDPNUDFDNBך畘杼׈׿יַיյ䅻מ僃二撶ֿ⪜ꝧ׈׿ 禈ׄיַ׾ն ˝ ׆ַֹֹ䅻מ僃二撶ֿ⪜ꝧ׈׿יַ׾䎬䌋؅-JWJOH4UBOEBSEכ⽛צױ׌ն ˝ 夵䇗僖ꮽסِ٭طؔ٤ءך&$."4DSJQUס׻ֹםذءֿ䣒ג׿יյف٭ة٘٤樑⺘ֿ♀ ┙׊ג׵ס׵⪜ꝧ׈׿ױ׌ֿյאס侇憠ךסتػشوب٘شعךֵ׽յאסف٭ة٘٤舅⛮ מעֵױ׽䙫⽏עםַך׌ CBCFM׷UTDס錃㲊ך⮵榫׌׾׆כ׵ֵ׽ױ׌ֿյ☼喋כ׊יעא؆םמ妳מ׌׾䑒釐עםַך׌ն׆סف٭ة٘٤כע斻玮׊יյ☼喋ס䬠勅ֿ鶟׳ذِؕ٤ءךא׿ב׿ס⭚杼硌מַֽי 㲔逷ֿ车؂׿יյ⮵榫⺎耆מם׾־׼ך׌նױגյ䏲鳭׊ױ׌ֿQPMZMMםלמ׻זי㲔车⺎耆מם׾׆כ׵ֵ׽ױ׌ն &DNB*OUFSOBUJPOBMע$םלס嘅嶖⴫⛼哅׵车זיַ׾ IBUFOBJOUFSO

Slide 117

Slide 117 text

&$."4DSJQUס4UBHF ˝ &$."4DSJQUמע舅榺מ䬠勅 QSPQPTBM ؅⭳׌׆כֿ⭳全׾ ˝ (JUIVC┕ךQSPQPTBMֿ⪜ꝧ׈׿յJTTVF׷13׷5$סِ٭طؔ٤ءםל ךס閱鑜؅磬יյ4UBHFֿ┕ֿזג׽׌׾ ˝ 鞊♳縖ךֵ׾زٔ٤م؛٤סتط٭ة؅鶟״גַכַֹ䙫䓙׵䑒釐 ˝ 妳מם׾وَٞ٭اֿٜם־ם־⹦׽鱮ױ׿םַ㕙⺬עյ*TTVF׷ِ٭ طؔ٤ءؿ٭ع؅釤׾כك٤عֵֿ׾־׵ ˝ א׿׼ע域ס׻ֹםتط٭ة؅磬יյ4UBHFמםזג䏲מ&$."4DSJQUס☼ 喋מ⹦׽鱮ױ׿׾ն IBUFOBJOUFSO

Slide 118

Slide 118 text

4UBHFס鎋碷 تط٭ة تط٭ةס哭釐  ؓؕظؓ敯䛜  嚀耆䬠勅  嚀耆ס☼喋傴غٚنع؅⛼䡗׊ג敯䛜  ☼喋כ׊יע׮ׯ㱭䡗׊יַיյهٚؗاס㲔逷׷نؔ٭غفشؠ؅姲״ ׾壿꣪  ☼喋瓀㲊ֿ㱭▼׊յח♓┕ס㲔逷ֿ㰆㏇׊יַ׾敯䛜 &$."4DSJQUu+BWB4DSJQU1SJNFSKTQSJNFS ╚מ4UBHF♓⯥侇憠ךס㲔逷םלעאס䏲ס☼喋㚺催םלס⺎耆䓪׵ֵ׾סךյهٚؗاסꝧ氦縖⺸ׄنٚء؅僗Ⲗמ׊יַ׾כ׀דׄ✳ֻג׽յQSFY؅♀ׄג⺲⯥ך"1*ֿ䬠❠׈׿׾ ׆כ׵ֵ׾նא׿׼׵㲔逷כ׊י錉㳊׈׿׾םלס稷׈עֵ׾ն ח♓┕ס+BWB4DSJQUסٚ٤ذّؕמ㲔逷ֿ㰆㏇׊יַ׾כַֹ׆כֿ姲״׼׿׾ն╚םٚ٤ذّؕע(PPHMF$ISPNF׷/PEFKTך✳榫׈׿יַ׾7׷4BGBSJך✳榫׈׿יַ׾ +BWB4DSJQU$PSFյ'JSFGPYך✳榫׈׿יַ׾4QJEFS.POLFZյ'BDFCPPLֿꝧ氦׊יַ׾)FSNFTםלֵֿ׾ն IBUFOBJOUFSO

Slide 119

Slide 119 text

&$."4DSJQUס☼喋כ㲔逷 ˝ 4UBHFמםזג׽յ&$."4DSJQUמ⹦׽鱮ױ׿יַםׂי׵յؘؗههٚؗاםלמ㲔逷׈׿י✳榫⭳全׾׻ֹמם׾ ׆כֵֿ׾ ˝ 鴫מ㲔逷׈׿יַםַכյ☼喋מ⹦׽鱮״םַ ˝ אס敯䛜ך犉哕氳מ✳榫׌׾׆כךوَٞ٭اٜמنؔ٭غفشؠ؅׌׾׆כֿך׀׾ ˝ ױגյ㲔逷ֿםַ敯䛜ך׵ؤِٖؼطؔ׷core-jsמ׻זיQPMZMM㲔逷ֿ䬠❠׈׿ג׽յ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[JMMB4QFDJDBUJPO1PTJUJPOT ˝ 8$⫂ס8FC*ODVCBUPS$PNNVOJUZ(SPVQכַֹכ׆؀ך喋չם䬠勅ֿ⛼䡗٬ 閱鑜׈׿יַ׾ IUUQTTDSBQCPYJPQBTUBLQVCꪫ氫8FC"1*鵽氦ך荇չ磆☭׊יַױ׌ IBUFOBJOUFSO

Slide 122

Slide 122 text

8$$444QFDJDBUJPOT ˝ ַ؂׹׾$44כ⽛ף׿׾$44ס杯㏇٬儔全ס☼喋ע8)"58( ךעםׂ䌕׀禈׀8$מ׻זי催二٬畘杼٬瓀㲊ֿ车؂׿יַ ׾ ˝ "MM$44TQFDJDBUJPOT IBUFOBJOUFSO