Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Hatena
October 08, 2021

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

Hatena

October 08, 2021
Tweet

More Decks by Hatena

Other Decks in Technology

Transcript

  1. ׆סه٭ع؞ٔ٤وסإ٭ٜ ˝ 氵׈؆ֿ╚מ䏲ⶐסز٭ّꝧ氦ךنٞ٤عؙ٤غמ꞊؂׾׻ֹםذتؠמ⹦׽磝 ׳꤀מ㍭׼םַ僃⛥꡾ס湳閁؅חׄי׵׼ֹ ˝ ׆ס铺紶ך䣽ֹنٞ٤عؙ٤غסꯛ㓊ע+BWB4DSJQU5ZQF4DSJQU3FBDUך׌ ˝ 8FCꝧ氦מַֽי䇗չꄆ釐䈱؅㘃׊יַ׾نٞ٤عؙ٤غס┉珷؅氵׈؆מ 냕鵭מ؞ٔشزؓشو׊י׵׼ֹֽכַֹ泘鑜釤 ˝

    םסךյ鐄伺סג״מ⼽鱨מ꞊׌׾鐄伺؅泸樋׊ג׽׊יַ׾׆כ׵ֵ׽ױ׌ ˝ ֵ؂׻ׂףؕ٤ذ٭٤ֿ磙؂זג䏲׵3FBDU׷5ZQF4DSJQUםלסنٞ٤عؙ٤غ 䤗软כ氵׈؆ֿ䢆׿׾꤀ס䣆Ⲃׄמם׿ף荁ַכ䓙זיַױ׌ IBUFOBJOUFSO
  2. ه٭ع؞ٔ٤و ˝ ه٭ع؞ٔ٤وםסךյל؆ל؆ַ׀ױ׌ ˝ 䣆؅Ⳃ־׎׾ـ٤ث؛٤ق٭عכ־׵םַך׌ ˝ +BWB4DSJQU舅⛮؅湳׼םַ☔ע㵼׊糋ַי׀ׯ׽מם׾־׵׊׿ױ׎؆ֿյַח־ 䏔玮חכ䓙זי绂ַיַֽיׂד׈ַ ˝ ☪׌׃׌׬י؅杼鉮׊יַ׾䑒釐עםַך׌

    ˝ 䏲ⶐסز٭ّמ⹆ⱶ׊יסꝧ氦ס꤀מؤ٭غ؅鐆ײ傴׀׌׾כ׀מ䓙ַ⭳׊ג׽յ釤 鲭׊ג׽յ磆☭׊יַ׾⹆縒䗯㕔؅׈׼מ釤י杼鉮׌׾꤀ס餉䫇־׽מ׊יׂד׈ַ ˝ 韬ゖעַחך׵堼鲛 IBUFOBJOUFSO
  3. "SSPX'VODUJPO ˝ function׷return؅✳؂׍מ꞊丗؅榟䡗ך׀׾ ˝ 㓹儖氳מע׆ס亠嫎ך꞊丗؅榟䡗׊יֽׄףـُ׼םַ const hello = name =>

    `Hello, ${name}`; hello('world') // hello, world ˝ 䌕丗ֿחסכ׀ע䌕丗؅㍱ֹ()׵泸樋⺎ ˝ 5JQT鲭׽⡁ֿ؛هةؘؠعסכ׀ע()ך㍱ֹכ荁ַ const getProps = () => ({ a: 'foo', b: 'bar' }) ╚מthisֿ꞊؂זיׂ׾כـُ׾׻ֹמם׾ն鎋碷ע♀ꎰր"SSPX'VODUJPOמחַיց؅鐆؆ךׂד׈ַն IBUFOBJOUFSO
  4. "SSPX'VODUJPO ˝ 䌕丗ֿ邾丗ֵ׾㕙⺬ע()ך㍱ֹ ˝ ꞊丗⫂ס鋗鳭ֿ邾丗车מ峚׾כ׀ע{}כreturn؅榫ַ׾ const hello = (name, lang)

    => { if (lang === 'ja') return `͜Μʹͪ͸ɺ${name}`; if (lang === 'es') return `Hola, ${name}`; return `Hello, ${name}`; } IBUFOBJOUFSO
  5. 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
  6. 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
  7. 邾丗ס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
  8. 邾丗ס1SPNJTF؅䣽ֹ亠嫎 const promises = [ getFromCache(), // cache͕ۭͷͱ͖͸ࣦഊ͢Δ getFromApi() ]

    ˝ Promise.race() ˝ חך׵䡗Ⱶ׌׾כյאסPromiseס3FTPMWF؅䐂׾նאס⯥מל׿־ֿ㜊䷴׌׾כ3FKFDU מם׾ն ˝ Promise.any() ˝ 僃⮣מ䡗Ⱶ׊ג3FTPMWF؅䐂׾նאס⯥מ㜊䷴׊י׵扛釱׈׿׾ն⪒יסPromiseס㲔车ֿ 㜊䷴׊ג㕙⺬מ3FKFDUמם׾ն IBUFOBJOUFSO
  9. 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
  10. 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
  11. 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
  12. &$."4DSJQU.PEVMFT ˝ ☽סنٜؒؕ־׼ؕ٤َ٭ع׊י⮵榫ך׀׾׵סֿٓةٖ٭ٜ ˝ نֿٜؒؕ⮆־׿יַ׾׆כךյ㚺丗تؤ٭و ⺲⯥狜ꝴ םל׵⮆־׿׾ ˝ 塷⺒氳磬穅ך$PNNPO+4כַֹ䎬䌋ֿ/PEFKTםל؅╈䑏מꝎׂ䫑榫׈׿ י׀גֿյ&$."4DSJQUך嘅嶖⴫׈׿גٓةٖ٭ٜס☼磝ײֿ☪ךע

    /PEFKTյؘؗههٚؗاםלך׵䇶ׂئَ٭ع׈׿יַ׾ 㲔꤀מעئَ٭ع׊יַםַؘؗههٚؗا׷قنؚ٭ُ٤تסג״מ#BCFM؅✳זי㚺䬵׊ג䏲מյٓةٖ٭ٜ؅鉮ꃿ׊יח֐邾丗סنٜؒؕ؅ױכ״י鿥⟓׌׾ג״מXFCQBDLםל؅ ⮵榫׌׾׆כֿ㛡ַն鎋碷ע♀ꎰր+BWB4DSJQU؅ؘؗهؓوٛآ٭ب٘٤ך䬠❠׌׾꤀מ✳榫׌׾ص٭ٜزؘؕ٤מחַיց؅⹆拨׊יׂד׈ַն &$."4DSJQUע+BWB4DSJQUס☼喋מֽׄ׾⺲燡ն&$."4DSJQU☼喋מחַיע♀ꎰր+BWB4DSJQU׷نٞ٤عؙ٤غ⼽鱨䤗软ס嘅嶖 ⴫ מחַיցך鉮鐄׊יַױ׌ն module.exportsכַֹ攐墤ם؛هةؘؠع؅磬榺׊יؙؠتَ٭ع׊յrequire꞊丗؅⮵榫׊יؕ٤َ٭ع׌׾亠䌋նIUUQTOPEFKTPSHEPDTMBUFTUBQJNPEVMFTIUNM IBUFOBJOUFSO
  13. EFGBVMUFYQPSU // module.js export default function doSomething () {} ˝

    export defaultךؙؠتَ٭ع׌׾כյimport侇מע♳䙫 ס⺲⯥؅錃㲊ך׀׾ import awesome from './module' IBUFOBJOUFSO
  14. ⺲⯥♀׀ؙؠتَ٭ع 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
  15. ؕ٤َ٭عס亠嫎מחַי ˝ 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
  16. ؘؗههٚؗاס吾碟־׼بٖشכ.%/סً٭ة؅ꝧ ׂ ˝ 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
  17. GPSPG ˝ ⹚䐝⺎耆 JUFSBCMF ם؛هةؘؠعס釐碛؅ꯂ樑מ⹦׽⭳׎׾ ˝ 鿥⮛յ乃㰄⮛յNodeListյMapյSetםל const iterable =

    [10, 20, 30]; for (const value of iterable) { console.log(value); } IBUFOBJOUFSO
  18. /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
  19. 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
  20. 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
  21. 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
  22. tsc5ZQF4DSJQUDPNQJMFS ˝ ُؕؠٞخنعס5ZQF4DSJQUز٭ّמ׻זיꝧ氦׈׿יַ׾5ZQF4DSJQU؅䣽ֹג״סص٭ٜ ˝ IUUQTHJUIVCDPNNJDSPTPGU5ZQF4DSJQU ˝ 5ZQF4DSJQU؅+BWB4DSJQUמ㚺䬵 ؤ٤قٜؕ ׌׾嚀耆כؤ٤قٜؕ侇סꪐ氳㑔鉮冪嚀耆؅䬠❠׊יַ׾ ˝

    --noEmit؛وب٘٤؅♀ׄי׾כյꪐ氳㑔鉮冪嚀耆דׄ؅颦׼׎׾׆כֿך׀׾ ˝ 5ZQF4DSJQU־׼+BWB4DSJQU׫ס㚺䬵כ銧זי׵յ㑔ؓؿط٭ب٘٤璡ס⯡ꢜֿ׮כ؆ל ˝ +BWB4DSJQUٚ٤ذֿّؕ㲔车׌׾כ׀ס䨕׾艵ַמע䏅ꮶ؅┙ֻםַכ䓙זיַֽי荁ַ ˝ 鴫מ䬠❠׈׿יַ׾㑔מ⺬؂׎י傴ַי׵յ㲔꤀מעٚؕهٚٛס㲔逷כثٝיַיٚ٤ذؙّؕٚ٭ֿ颯׀׾׆כ׵燵מ ׻ׂ ֵ׾ ˝ +BWB4DSJQU׫ס㚺䬵舅⛮ע♏僀⺎耆ն#BCFM FTCVJMEםל ˝ 㛡ׂסوٞةؘؠعךעCBCFM؅✳榫׊יַ׾כ䓙ֹסךյ@babel/preset-typescript؅僗Ⲗמ׊גCBCFMך㚺䬵؅车ֹ亠ֿ錃 㲊ֿ邾ꥭ⴫׊ם־זג׽׊י؛تتْ enum؅✳זיַ׾כؤ٭غֿ鴑ⱶ׈׿׾סך䏅ꮶ؅┙ֻ׾նenumע䏲鳭׌׾؛هةؘؠعכtypeofםלס磝ײ⺬؂׎ך♏僀⺎耆םסךյ㓹儖氳מע⮵榫׊םַ׻ֹמ׊יַ׾׆כֿ㛡 ַն IBUFOBJOUFSO
  23. 㚺丗㲚銧侇ס㑔ؓؿط٭ب٘٤ // JavaScriptͷ৔߹ const a = 'hello'; // TypeScriptͷ৔߹͸ม਺໊ͱ=ͷؒʹ:Λஔ͍ͯܕΞϊςʔγϣϯΛॻ͘ const

    a: ʲ͜͜ʹܕΞϊςʔγϣϯʳ = 'hello'; // ྫ͑͹ const a: string = 'hello'; ׆׿ׂ׼ַדזג׼䫟鑜׊יׂ׿׾סךյ㲔꤀מע傴־םַ׆כ ׵㛡ַ IBUFOBJOUFSO
  24. ♏辐氳ם辐杯Ζ ˝ وِٛطؔه㑔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
  25. ♏辐氳ם辐杯Η ˝ ؛هةؘؠع ˝ +BWB4DSJQUס؛هةؘؠع⺱喋מ傴ַיյ⡁؅傴ׂכ׆؀מ㑔؅傴ׂ ˝ ؞٭⺲מ?؅♀ׄ׾כ؛وب٘ػٜם؞٭מםזיյ泸樋⺎耆מם׾ն const person: {

    name: string, age: number, address?: string } = { name: 'john', age: 21 } string | undefinedס׻ֹם鋗鳭כ⺱׋כ磆☭׈׿׾׆כ׵ֵ׾ն⡁ֿ⪌זיַ׾־לֹ־ך+BWB4DSJQUכ׊י㲔车׊ג꤀ס䨕׾艵ַֿ㚺؂׾׆כֵֿ׾ Object.keys()םל ס ךյ⸬㳡מע⺱׋ךעםַ׆כמ嫰䙫ն攐מ5ZQF4DSJQUך㵵⪌׈׿גexactOptionalPropertyTypes؅僗Ⲗמ׌׾כյUTDךס㑔鉮冪侇ס䨕׾艵ַ׵㚺؂׽ױ׌ն IBUFOBJOUFSO
  26. 6OJPO5ZQF ⺬✡㑔 邾丗ס㑔סַ׍׿־؅嵹ג׌ type Primitive = string | number |

    boolean | undefined | null; type Color = 'red' | 'green' | 'blue' | 'yellow' |'perple'; IBUFOBJOUFSO
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. any ˝ ⛰׼־ס⡁ֿ⪌זיַ׾׆כ؅炐׌նundefined־׼؛هةؘ ؠع־׼꞊丗ױך⛰ֿ⪌זיַי׵荁ַնtscֿ㑔ס吾錞؅׊ םַסךյas⺱喋מ鹴ׄ׼׿׾㕙⺬ע鹴ׄ׾ն let anything: any = {};

    // anyʹ͸ԿͰ΋୅ೖͰ͖Δ anything = () => {}; anything = null; anything.split(','); // anyͷ৔߹͸ϝιου΋ͳΜͰ΋ࢀরͰ͖Δ IBUFOBJOUFSO
  33. 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
  34. typeכinterface ˝ typeעؙؕٛؓت ˝ interfaceע؛هةؘؠعמ㑔؅♀ׄ׾⮯ס亠嫎ն ˝ 仴㰆ס׵סמ䏲־׼وٞقطؔ؅鴑ⱶך׀׾סעinterface ˝ ٚؕهֿٚٛ䬠❠׊גinterface؅⮵榫縖ֿ舅榺מ䦡䍖ך׀׾ ˝

    typeע⮯ס⺲⯥؅♀ׄ׾䑒釐ֵֿ׾ ˝ typeכinterfaceס✳ַ⮆ׄעؤ٭غ釨硜םלך荇չם孱孬׷╚䍖ֵֿ׾ סךյ齁מ⪌׿ף齁מ䏼זיׂד׈ַ IBUFOBJOUFSO
  35. ꞊丗 仴מئ٤وٜךע⛰䈱׵⭳י׀יַ׾ׄלյ䌕丗׷鲭׽⡁ס㑔ס傴׀亠 סقذ٭٤גה磆☭׊יֽ׀ױ׌ն 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
  36. 㑔䌕丗 (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
  37. 禈㑔䌕丗 ˝ 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
  38. 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
  39. 0WFSMPBETכ꞊丗ס㑔㲚銧 ˝ 㓹儖ע湾ׂ傴ׂס؅✳זיֽׄף荁ַך׌ type f = (x: number) => number;

    ˝ ⺱喋ס׆כ؅׆ס׻ֹמ׵傴ׄ׾ type f = { (x: number): number; } ˝ 0WFSMPBET؅㑔㲚銧כ⪦מ傴׀גַ㕙⺬ע䏲縖؅✳ֹ type func = { (x: number): number; (x: string): string; } IBUFOBJOUFSO
  40. never ˝ 祀㵚מ氦榟٬⮼鷼׊םַ׆כ؅辐׌㑔 ˝ ❆ֻף扛꡾ٜ٭وֵֿ׾꞊丗ע祀㵚מ㱭▼׊םַ꞊丗םסך鲭׽⡁עneverמם ׾ ˝ voidע♏⪌⺎耆דֿյneverמעneverסײ♏⪌⺎耆 חױ׽㚺丗מע㓹儖 氳מ♏⪌⭳全׍מؙٚ٭מם׾

    function infiniteLoop(): never { while (true) {} } TUSJDU/VMM$IFDLJOHֿ僗Ⲗמםזיַםַ㕙⺬סײ♏⪌⺎耆ն┉亠ך+BWB4DSJQUסٚ٤ذّؕ┕ךעundefinedםסךյ♏⪌׌׾׆כע׮כ؆לםַך׊׺ֹն IBUFOBJOUFSO
  41. 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
  42. ReadonlyReturnType ˝ Readonlyע؛هةؘؠع׷鿥⮛ס釐碛؅鐆ײ鱮ײ㵠榫מך׀׾ ˝ ⫋䅯氳מע鸵榫׈׿םַ׆כמ嫰䙫 type PersonRo = Readonly<Person> ˝

    ReturnTypeע꞊丗ס鲭׽⡁㑔כ׊י䐂׾ type Func = () => string; type ReturnVal = ReturnType<Func> // ReturnVal͸stringͱղऍ͞ΕΔ IBUFOBJOUFSO
  43. 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
  44. *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
  45. ◫䄐㑔 *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
  46. $POEJUJPOBM5ZQFT +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
  47. 㲚銧氳 EFDMBSBUJWF 6*מחַי ˝ 6*鼧⮆؅㲚銧氳מ鋗鳭׌׾亠嫎ס׆כ ˝ חױ׽յלַֹֹ׆ככַֹס؅ה׺זכ釤יַ׀ױ׌ ˝ ؘؗهؓوٛآ٭ب٘٤סٛشز⴫׷تُ٭عنؚ٤ؓوٛס氧㕙 ךյ(6*؅Ⳃ氳מ啶疣٬㚺催׌׾ꄆ釐䈱כ姲״׼׿׾(6*ס邾ꥭ䓪ֿ

    劲壿מ⺸┕׊גכַֹ塷⺒ֵֿ׽ױ׊ג ˝ א؆ם╈յ6*؅Ⳃ氳榟䡗׊יַ׾כյ(6*鼧⮆ס䳩⛼؅鴑ⱶ׌׾גצ מؤ٭غס邾ꥭ䓪ֿ냕ױזיַׂכַֹゖ갭מ׵泡ꪫ׊ֿהך׊ג IBUFOBJOUFSO
  48. 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
  49. +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
  50. +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
  51. 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
  52. 놹ֿ꧟ֻ׾♞䘶 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
  53. 'VODUJPO$PNQPOFOUךֵ׾ْٛشع ˝ 3FBDU$PNQPOFOUע꞊丗؅榫ַי辐杯׌׾׆כך꞊丗㑔وٞءِٚ٤ءס哭䒝؅⮵榫ך׀׾׻ֹמ׊יַ׾ ˝ חױ׽3FBDU$PNQPOFOUע3FBDU$PNQPOFOUױגעnull؅鲭׌꞊丗 ˝ ظ٭ذעِٖؕ٭ذهٜךֵ׾׻ֹמ׌׾ ˝ ؛هةؘؠع׷鿥⮛؅䣽ֹ꤀עؤم٭؅⛼䡗׊י־׼㚺催׌׾նArray.prototype.pushםל滭㙗氳ם㚺 催؅׊םַ׻ֹמ׌׾

    ˝ 䌕丗ס⡁־׼磵冽 3FBDU$PNQPOFOU ؅鲭׌硾睛꞊丗כ׊י辐杯׈׿׾ ˝ 1SFTFOUFS7JFXםלס㷺מ⮆ׄג䏲מյא׿׼؅磝ײ⺬؂׎ג⺬䡗꞊丗כ׊י3FBDU$PNQPOFOUֿ辐杯⭳全 ׾ ˝ 6OJU5FTUםלֿ癨ⶡמםזג 3FBDU$PNQPOFOUؠٚت؅禆䤔׊גDMBTT؅榫ַג亠嫎׵ֵ׾ֿյ㵧全氳ם䉬塛ֿ◀㲊׈׿יַ׾ג״յ꞊丗؅榫ַג亠嫎סײ؅✳榫׌׾׆כ؅䍚ׂ䫟㝢׊ױ׌ն IBUFOBJOUFSO
  54. '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
  55. 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
  56. 敯䛜 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
  57. useState ˝ useState()ך⮣僿⡁؅┙ֻ׾׆כֿ⭳全յ鲭׽⡁סذوٜסח泘ֿ 杯㏇ס⡁ךյח泘ֿTFUUFSמםזיַ׾ ˝ 鲭׽⡁ֿذوٜ 鿥⮛ םסךյ㞐׀ם⺲⯥؅חׄ׾סֿ癨ⶡ ˝ TFUUFS؅⽛שכ⫂鼧敯䛜ֿ催二׈׿ג׆כֿ$PNQPOFOUמ鵟湳׈׿

    יյ♞䘶%0.ס⫋榟䡗յ奂鬳յٝ٤رٛ٤ءס催二ֿ车؂׿׾ ˝ 䫟鑜ך׀םַ׵ס؅㑔䧗㲊׊גַ㕙⺬ע㑔䌕丗؅榫ַ׾׆כֿ⭳全׾ const [color, setColor] = useState<Color>('red'); IBUFOBJOUFSO
  58. useStateסTFUUFSמחַי ˝ 二׊ַ⡁؅峚׌ const [color, setColor] = useState<Color>('red'); const change2Blue

    = () => setColor('blue'); ˝ 泡⯥ס⡁؅⮵榫׊י二׊ַ⡁؅婊㲊׌׾ const [count, setCount] = useState(0); const increaseCount = () => setCount(prevCount => prevCount + 1); IBUFOBJOUFSO
  59. 二׊ַ⡁؅峚׌כ׀ס蛽כ׊狌 const [count, setCount] = useState(0); const increaseCount = ()

    => setCount(count + 1); כ׊י׊ױֹכյ const increaseDouble = () => { increment(); increment(); } ס׻ֹם׵ס؅⛼זגכ׀מյincreaseDouble؅⽛؆ך׵1׊־㘃ֻםַכ ַֹ杯霄מ鸿鷔׌׾ך׊׺ֹն IBUFOBJOUFSO
  60. ꞊丗⫂ס㚺丗تؤ٭وכ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
  61. ؤ٭ٜفشؠ꞊丗؅峚׌亠嫎ך傴׀泡׌ ❆ֻףյ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
  62. $PNQPOFOUס催二夵מ؜ؗ٤ذ٭ס丗؅ alertךٗ٭ا٭מ鵟湳׌׾ function Counter () { const [count, setCount] =

    useState(0); const increaseCount = () => setCount(prevCount => prevCount + 1); alert(count) return <div>{/* ུ */}</div> } ˝ alertע⺱僿氳מ㲔车׈׿׾꞊丗םסךյٗ٭ا٭ֿր0,ց؅鹟䥃׌׾ױ ך㲔车ֿ塛ױ׽յٝ٤رٛ٤ءֿ׈׿םׂםזי׊ױֹն IBUFOBJOUFSO
  63. 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
  64. 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
  65. 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
  66. useEffectכؠٛ٭٤ػشو ˝ useEffectע꞊丗؅鲭׌׆כךאס꞊丗ֿ域סⰜ⛼榫ֿ⽛צ⭳׈׿׾⯥מ㲔车׈׿׾ ˝ ׆׿؅⮵榫׌׾כⰜ⛼榫סؠٛ٭٤ػشوֿ⭳全׾ roomIdֿ㚺催׈׿׾כյزٔشعס⹿ַ頇鐆؅⹦׽寕׊յ二׊ַ頇鐆؅ꝧ㡎׌׾❆ useEffect(() => { const

    handler = () => {/* ৽͍͠ϝοηʔδΛड͚औͬͨͱ͖ͷॲཧ */}; chat.subscribe(roomId, handler); return () => { chat.unsubscribe(roomId); } }, [roomId]) 狜鿥⮛؅䧗㲊׊יַ׾㕙⺬םלעؓ٤ُؗ٤ع侇מ׵㲔车׈׿׾ IBUFOBJOUFSO
  67. 斻舅نشؠ $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
  68. 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
  69. ♀ꎰ 儖稴מ⪌׽⮉׼ם־זג馐ײ鱮؆ד遨餉׷鉮鐄מחַי傴ַיַױ׌ն艄⽏ֵֿ׿ף鐆؆ךׂד׈ַ氳םؤ٭ػ٭ך׌ն ˝ "SSPX'VODUJPOמחַי ˝ "SSPX'VODUJPOמ糋׀䬵ֻ⭳全םַآ٭ت ˝ "SSPX'VODUJPOכthis ˝ )PPLTס❣㰆ס奂鬳כ؛هةؘؠعס⺱┉䓪מחַי

    ˝ useMemo׷useCallback؅榫ַגقنؚ٭ُ٤ت䷉ャ ˝ 3FBDU$PNQPOFOU⫂ך%0.מؓؠجت׌׾ ˝ +BWB4DSJQU؅ؘؗهؓوٛآ٭ب٘٤ך䬠❠׌׾꤀מ✳榫׌׾ص٭ٜزؘؕ٤מחַי ˝ +BWB4DSJQU׷نٞ٤عؙ٤غ⼽鱨ס╚םص٭ٜמחַי ˝ +BWB4DSJQU׷نٞ٤عؙ٤غ⼽鱨䤗软ס嘅嶖 ⴫ מחַי IBUFOBJOUFSO
  70. 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
  71. thisסتؤ٭وס鷿ַמחַי ˝ "SSPX'VODUJPOדכتؤ٭وֿ㛙כ⺱׋מם׾ const person = { name: 'chris', say:

    function () { setTimeout( () => { console.log(`I'm ${this.name}`) } , 100); } }; person.say(); // I'm chris IBUFOBJOUFSO
  72. )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
  73. ❣㰆鿥⮛מ؛هةؘؠع؅⪌׿׾آ٭تמחַי const config = { theme: 'sports' } useEffect(() =>

    { loadConfig(config).then(() => {}) }, [config]) ס׻ֹם㕙⺬מעٝ٤رٛ٤ءס䈱מյconfigֿ⫋榟䡗׈׿׾ն׻זיյ 樟ם׾⡁כ׊י鏀閁׈׿י׊ױַյ夵㍑Ⱌ⛼榫ֿ⽛צ⭳׈׿י׊ױֹն׆ס ׻ֹם❆ס㕙⺬ע❣㰆מ[config.theme]כַֹ겧מ⡁؅傴ַי׊ױזי ׵荁ַֿյ❣㰆׌׾؛هةؘؠعמחַי湳זיַ׾䑒釐ֵֿ׾סךꦘ׊ ַն IBUFOBJOUFSO
  74. ب٤وٜם㍑鹴瓀 ˝ ┉樑癨ⶡם㍑鹴瓀ע$PNQPOFOUס㛙ך⮣僿⴫׊י׊ױֻף荁ַ const config = { theme: 'sports' }

    function Component () { useEffect(() => { loadConfig(config).then(() => {}) }, [config]); } ˝ ┉亠ךյ׆ס┩מע1SPQT؅⮵榫׊י؛هةؘؠع؅榟䡗׌׾םל׵׻ׂ ֵ׾סךյ׆ס亠嫎ֿ✳ֻ׾׆כע㵼םַ IBUFOBJOUFSO
  75. ؛هةؘؠعס⫋榟䡗؅㍑鹴׌׾ג״מ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
  76. 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
  77. 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
  78. %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
  79. 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
  80. create-react-appמחַי ˝ 3FBDU؅✳זגوٞةؘؠعס⛼䡗յ꞊鵽ص٭ٜס㵵⪌٬㲔车؅舅Ⳃ⴫׊יׂ׿׾ ˝ 㓹儖氳מעױ׍ע׆׿؅✳זיֽׄף0, ˝ XFCQBDL CBCFM FTMJOUםל钥չס錃㲊ס榟䡗׵舅Ⳃך车؂׿ױ׌ ˝

    npm startךٞ٭؜ٜꝧ氦梪㗞ס玮ה┕ׅյnpm testךٗؼشعطتعֿ㲔车ך׀׾ ˝ 鎋碷ע⫂鼧ך✳؂׿יַ׾react-scriptsמ꥗硜׈׿יַ׾ ˝ create-react-appך⮵榫׌׾ص٭ٜע㲊僿氳מ釤泡׈׿ג׽׊יַיյ䅻מ僃二ס3FBDUؤ ِٖؼطؔס湳釤ֿ孨־׈׿יַ׾ ˝ create-react-app؅ؚؗشز׌׾׆כךאַֹזג僃二סⳂ⺸כַֹ׵סמ׵鉴׿׼׿׾ סךյ3FBDUס⼽鱨מחַי湳׽גַ☔ע׆סَٛةعٛ؅釳ַיײ׾סֿ؛تتْ IBUFOBJOUFSO
  81. ם׏☼喋؅湳׾ס־ ˝ אס"1*ס䨕׾艵ַמחַי塜׊ַ䨕׾艵ַ؅㲊紶׊יַ׾סע☼喋ךֵ׾ն ˝ ┩ס╈מ⪜ꝧ׈׿יַ׾䗯㕔ֿ丗㛡ֵׂ׾ֿյאס䗯㕔ס塜׊׈؅僃磙氳מ ⟊錞׌׾ג״ס䗯㕔嶎ֿ☼喋ךֵ׾ն ˝ ❆ֻף+BWB4DSJQU׷$44םלס䨕׾艵ַֿؘؗههٚؗاꝴך樟ם׾㕙⺬յ אס侇מ塜׊׈؅⟊錞׊יׂ׿׾סע☼喋ךֵ׾ն ˝

    㲔꤀յنٞ٤عؙ٤غ؅╈䑏מ荇؆ם׆כ؅׊יַ׾כյ☼喋כهٚؗا ס㲔逷מ䄐樟ֵֿ׾׆כמ鸿鷔׊יյ㕔⼔׌׾׆כֵֿ׽ױ׌ն ؘؗههٚؗاמفء㕔⼔؅׌׾כ׀מ׷׾׆כפ׌גׄ仼鋗 IBUFOBJOUFSO
  82. &$."4DSJQUמחַי ˝ +BWB4DSJQUס嘅嶖☼喋ע&$."4DSJQUכַֹ⺲⯥ךյ&DNB*OUFSOBUJPOBMס╈ס5FDIOJDBM $PNNJUUFF5$כַֹ䤗软㡦⿦⚡ֿ╈䑏מ瓀㲊׈׿יַ׾ն ˝ 杯㏇ס☼喋עIUUQTHJUIVCDPNUDFDNBך畘杼׈׿יַיյ䅻מ僃二撶ֿ⪜ꝧ׈׿ 禈ׄיַ׾ն ˝ ׆ַֹֹ䅻מ僃二撶ֿ⪜ꝧ׈׿יַ׾䎬䌋؅-JWJOH4UBOEBSEכ⽛צױ׌ն ˝

    夵䇗僖ꮽסِ٭طؔ٤ءך&$."4DSJQUס׻ֹםذءֿ䣒ג׿יյف٭ة٘٤樑⺘ֿ♀ ┙׊ג׵ס׵⪜ꝧ׈׿ױ׌ֿյאס侇憠ךסتػشوب٘شعךֵ׽յאסف٭ة٘٤舅⛮ מעֵױ׽䙫⽏עםַך׌ CBCFM׷UTDס錃㲊ך⮵榫׌׾׆כ׵ֵ׽ױ׌ֿյ☼喋כ׊יעא؆םמ妳מ׌׾䑒釐עםַך׌ն׆סف٭ة٘٤כע斻玮׊יյ☼喋ס䬠勅ֿ鶟׳ذِؕ٤ءךא׿ב׿ס⭚杼硌מַֽי 㲔逷ֿ车؂׿יյ⮵榫⺎耆מם׾־׼ך׌նױגյ䏲鳭׊ױ׌ֿQPMZMMםלמ׻זי㲔车⺎耆מם׾׆כ׵ֵ׽ױ׌ն &DNB*OUFSOBUJPOBMע$םלס嘅嶖⴫⛼哅׵车זיַ׾ IBUFOBJOUFSO
  83. &$."4DSJQUס4UBHF ˝ &$."4DSJQUמע舅榺מ䬠勅 QSPQPTBM ؅⭳׌׆כֿ⭳全׾ ˝ (JUIVC┕ךQSPQPTBMֿ⪜ꝧ׈׿յJTTVF׷13׷5$סِ٭طؔ٤ءםל ךס閱鑜؅磬יյ4UBHFֿ┕ֿזג׽׌׾ ˝ 鞊♳縖ךֵ׾زٔ٤م؛٤סتط٭ة؅鶟״גַכַֹ䙫䓙׵䑒釐

    ˝ 妳מם׾وَٞ٭اֿٜם־ם־⹦׽鱮ױ׿םַ㕙⺬עյ*TTVF׷ِ٭ طؔ٤ءؿ٭ع؅釤׾כك٤عֵֿ׾־׵ ˝ א׿׼ע域ס׻ֹםتط٭ة؅磬יյ4UBHFמםזג䏲מ&$."4DSJQUס☼ 喋מ⹦׽鱮ױ׿׾ն IBUFOBJOUFSO
  84. 4UBHFס鎋碷 تط٭ة تط٭ةס哭釐  ؓؕظؓ敯䛜  嚀耆䬠勅  嚀耆ס☼喋傴غٚنع؅⛼䡗׊ג敯䛜 

    ☼喋כ׊יע׮ׯ㱭䡗׊יַיյهٚؗاס㲔逷׷نؔ٭غفشؠ؅姲״ ׾壿꣪  ☼喋瓀㲊ֿ㱭▼׊յח♓┕ס㲔逷ֿ㰆㏇׊יַ׾敯䛜 &$."4DSJQUu+BWB4DSJQU1SJNFSKTQSJNFS ╚מ4UBHF♓⯥侇憠ךס㲔逷םלעאס䏲ס☼喋㚺催םלס⺎耆䓪׵ֵ׾סךյهٚؗاסꝧ氦縖⺸ׄنٚء؅僗Ⲗמ׊יַ׾כ׀דׄ✳ֻג׽յQSFY؅♀ׄג⺲⯥ך"1*ֿ䬠❠׈׿׾ ׆כ׵ֵ׾նא׿׼׵㲔逷כ׊י錉㳊׈׿׾םלס稷׈עֵ׾ն ח♓┕ס+BWB4DSJQUסٚ٤ذّؕמ㲔逷ֿ㰆㏇׊יַ׾כַֹ׆כֿ姲״׼׿׾ն╚םٚ٤ذّؕע(PPHMF$ISPNF׷/PEFKTך✳榫׈׿יַ׾7׷4BGBSJך✳榫׈׿יַ׾ +BWB4DSJQU$PSFյ'JSFGPYך✳榫׈׿יַ׾4QJEFS.POLFZյ'BDFCPPLֿꝧ氦׊יַ׾)FSNFTםלֵֿ׾ն IBUFOBJOUFSO
  85. &$."4DSJQUס☼喋כ㲔逷 ˝ 4UBHFמםזג׽յ&$."4DSJQUמ⹦׽鱮ױ׿יַםׂי׵յؘؗههٚؗاםלמ㲔逷׈׿י✳榫⭳全׾׻ֹמם׾ ׆כֵֿ׾ ˝ 鴫מ㲔逷׈׿יַםַכյ☼喋מ⹦׽鱮״םַ ˝ אס敯䛜ך犉哕氳מ✳榫׌׾׆כךوَٞ٭اٜמنؔ٭غفشؠ؅׌׾׆כֿך׀׾ ˝ ױגյ㲔逷ֿםַ敯䛜ך׵ؤِٖؼطؔ׷core-jsמ׻זיQPMZMM㲔逷ֿ䬠❠׈׿ג׽յCBCFMמ׻׾عٚ٤تق

    ٜؕםלךؓوٛآ٭ب٘٤⫂ך✳榫ך׀׾׻ֹמם׾׆כֵֿ׾ ˝ א׿׼؅㲔榫׌׾׆כך׵وَٞ٭اٜמنؔ٭غفشؠֿך׀ג׽յ僗榫䓪؅炐׌׆כֿ⭳全׾ ˝ &$."4DSJQUסوَٞ٭اٜע䅻מ⪒יֿ0QFOךյא׿מ꞊؂׾ظؔت؜شب٘٤׵0QFOםסךյ艄⽏סֵ׾䬠勅ֿ ֵזג׼յ佭ꪜ釳ַיײיյ✳榫׊յَةطؔهם憠׷ゖ갭憠ֵֿ׿ף佭ꪜنؔ٭غفشؠ؅׌׾׆כךյ儔全ס +BWB4DSJQU梪㗞؅׻ׂ׌׾׆כמ笋ֿ׽ױ׌ն &$."4DSJQUסوَٞ٭اٜע㛡ׂס㕙⺬յאס䬠勅ֿրלס׻ֹםٓزي٭ب٘٤ֵֿ׾ס־ցյրלס׻ֹםゖ갭؅鉮婊׌׾ס־ցյրלס׻ֹםٗ٭تآ٭تֵֿ׾ס־ցםלֿ鋗 ׈׿יַ׾סךյאס僗榫䓪םל؅炐׌׆כ׵靹春מ笋ֿ׽ױ׌ն IBUFOBJOUFSO
  86. ؘؗههٚؗا┕ס+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$סⳡ⼔כ׊גն⹆縒<IUUQTGVUVSFBSDIJUFDUHJUIVCJPBSUJDMFTBלֹ׊י)5.-ֿ䉬塛׈׿גס־]نٖ٭زٔ٭䤗软هٞء> 䇗מ"QQMF٬.P[JMMB٬0QFSBס炘מ׻זי錃玮׈׿גնאס䏲յ8$כסؤِٖؼآ٭ب٘٤؅禈ׄםֿ׼׵هٚؗاي٤ر٭؅⹦׽鱮ײյ㛙㔃؅㒪״םֿ׼)5.--JWJOH 4UBOEBSE؅⪜ꝧ٬畘杼׊禈ׄיַג IBUFOBJOUFSO