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

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

Transcript

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

   View Slide

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

   View Slide

3. ه٭ع؞ٔ٤و
   ˝ ه٭ع؞ٔ٤وםסךյל؆ל؆ַ׀ױ׌
   ˝ 䣆؅Ⳃ־׎׾ـ٤ث؛٤ق٭عכ־׵םַך׌
   ˝ +BWB4DSJQU舅⛮؅湳׼םַ☔ע㵼׊糋ַי׀ׯ׽מם׾־׵׊׿ױ׎؆ֿյַח־
   䏔玮חכ䓙זי绂ַיַֽיׂד׈ַ
   ˝ ☪׌׃׌׬י؅杼鉮׊יַ׾䑒釐עםַך׌
   ˝ 䏲ⶐסز٭ّמ⹆ⱶ׊יסꝧ氦ס꤀מؤ٭غ؅鐆ײ傴׀׌׾כ׀מ䓙ַ⭳׊ג׽յ釤
   鲭׊ג׽յ磆☭׊יַ׾⹆縒䗯㕔؅׈׼מ釤י杼鉮׌׾꤀ס餉䫇־׽מ׊יׂד׈ַ
   ˝ 韬ゖעַחך׵堼鲛
   IBUFOBJOUFSO
   

   View Slide

4. ٓر٤ם+BWB4DSJQU؅傴ׂ┕ך釶ֻיֽ׀ג
   ַ哭䒝 NJO
   
   ˝ &4 &4
   ♓꡸מ+BWB4DSJQUמ⪌זג嚀耆؅╈䑏מ氵׈؆ֿ
   㲔꤀מؤ٭غ؅鐆׳꤀מ湳זיַֽי培׊ַ+BWB4DSJQU┕ס哭
   䒝מחַי磆☭׊ױ׌
   IBUFOBJOUFSO
   

   View Slide

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

   View Slide

6. "SSPX'VODUJPO
   ˝ 䌕丗ֿ邾丗ֵ׾㕙⺬ע()ך㍱ֹ
   ˝ ꞊丗⫂ס鋗鳭ֿ邾丗车מ峚׾כ׀ע{}כreturn؅榫ַ׾
   const hello = (name, lang) => {
   if (lang === 'ja') return `͜Μʹͪ͸ɺ${name}`;
   if (lang === 'es') return `Hola, ${name}`;
   return `Hello, ${name}`;
   }
   IBUFOBJOUFSO
   

   View Slide

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

   View Slide

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 {} ɾɾɾ ᶃ
   IBUFOBJOUFSO
   

   View Slide

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

   View Slide

10. 邾丗ס1SPNJTF؅䣽ֹ亠嫎
    const promises = [
    getFromCache(), // cache͕ۭͷͱ͖͸ࣦഊ͢Δ
    getFromApi()
    ]
    ˝ Promise.race()
    ˝ חך׵䡗Ⱶ׌׾כյאסPromiseס3FTPMWF؅䐂׾նאס⯥מל׿־ֿ㜊䷴׌׾כ3FKFDU
    מם׾ն
    ˝ Promise.any()
    ˝ 僃⮣מ䡗Ⱶ׊ג3FTPMWF؅䐂׾նאס⯥מ㜊䷴׊י׵扛釱׈׿׾ն⪒יסPromiseס㲔车ֿ
    㜊䷴׊ג㕙⺬מ3FKFDUמם׾ն
    IBUFOBJOUFSO
    

    View Slide

11. 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
    

    View Slide

12. 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
    

    View Slide

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

    View Slide

14. &$."4DSJQU.PEVMFT
    ˝ ☽סنٜؒؕ־׼ؕ٤َ٭ع׊י⮵榫ך׀׾׵סֿٓةٖ٭ٜ
    ˝ نֿٜؒؕ⮆־׿יַ׾׆כךյ㚺丗تؤ٭و ⺲⯥狜ꝴ
    םל׵⮆־׿׾
    ˝ 塷⺒氳磬穅ך$PNNPO+4כַֹ䎬䌋ֿ/PEFKTםל؅╈䑏מꝎׂ䫑榫׈׿
    י׀גֿյ&$."4DSJQUך嘅嶖⴫׈׿גٓةٖ٭ٜס☼磝ײֿ☪ךע
    /PEFKTյؘؗههٚؗاםלך׵䇶ׂئَ٭ع׈׿יַ׾
    㲔꤀מעئَ٭ع׊יַםַؘؗههٚؗا׷قنؚ٭ُ٤تסג״מ#BCFM؅✳זי㚺䬵׊ג䏲מյٓةٖ٭ٜ؅鉮ꃿ׊יח֐邾丗סنٜؒؕ؅ױכ״י鿥⟓׌׾ג״מXFCQBDLםל؅
    ⮵榫׌׾׆כֿ㛡ַն鎋碷ע♀ꎰր+BWB4DSJQU؅ؘؗهؓوٛآ٭ب٘٤ך䬠❠׌׾꤀מ✳榫׌׾ص٭ٜزؘؕ٤מחַיց؅⹆拨׊יׂד׈ַն
    &$."4DSJQUע+BWB4DSJQUס☼喋מֽׄ׾⺲燡ն&$."4DSJQU☼喋מחַיע♀ꎰր+BWB4DSJQU׷نٞ٤عؙ٤غ⼽鱨䤗软ס嘅嶖 ⴫
    מחַיցך鉮鐄׊יַױ׌ն
    module.exportsכַֹ攐墤ם؛هةؘؠع؅磬榺׊יؙؠتَ٭ع׊յrequire꞊丗؅⮵榫׊יؕ٤َ٭ع׌׾亠䌋նIUUQTOPEFKTPSHEPDTMBUFTUBQJNPEVMFTIUNM
    IBUFOBJOUFSO
    

    View Slide

15. EFGBVMUFYQPSU
    // module.js
    export default function doSomething () {}
    ˝ export defaultךؙؠتَ٭ع׌׾כյimport侇מע♳䙫
    ס⺲⯥؅錃㲊ך׀׾
    import awesome from './module'
    IBUFOBJOUFSO
    

    View Slide

16. ⺲⯥♀׀ؙؠتَ٭ع 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
    

    View Slide

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

    View Slide

18. 5JQT
    IBUFOBJOUFSO
    

    View Slide

19. .%/8FC%PD؅鐆׵ֹ
    IUUQTEFWFMPQFSNP[JMMBPSH
    ˝ +BWB4DSJQU׷)5.-յ$44յ%0.םלס⺨牊"1*מחַיע׵ה؀؆յ)551םל
    8FCמ꞊׌׾ֵ׼׹׾䤗软׷哭䒝מחַיס鉮鐄ֿ꥗磵׊יַ׾ؘؗهئؕع
    ˝ 3FBDUםלמחַיס鉮鐄׵僗׾
    ˝ ؘؗه┕מע僗霄扛霄סֵ׼׹׾䗯㕔ֿ鬇ֿזיַ׾סךյنٞ٤عؙ٤غ׷
    ؘؗهמחַיס׆כך㍭זג׼ױ׍ע.%/؅釤׾סֿ؛تتْ
    NP[JMMBסغْؕ٤┖מֵ׾ֿյ(PPHMF׷ُؕؠٞخنعםלֿ0QFO8FC%PDTכַֹ㍚⛮؅鵟׋י䶹䭤؅׊יַ׾IUUQTPQFODPMMFDUJWFDPNPQFOXFCEPDTVQEBUFTJOUSPEVDJOH
    PQFOXFCEPDT
    .%/ע.P[JMMB%FWFMPQFS/FUXPSLס樋
    IBUFOBJOUFSO
    

    View Slide

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-؅✳ֹכSFEJSFDUOPUJDFֿ辐炐׈׿יյאסױױً٭ةמע괊׬םַסך˟
    IBUFOBJOUFSO
    

    View Slide

21. 錃㲊ס喋㯸
    IBUFOBJOUFSO
    

    View Slide

22. GPSPG
    ˝ ⹚䐝⺎耆 JUFSBCMF
    ם؛هةؘؠعס釐碛؅ꯂ樑מ⹦׽⭳׎׾
    ˝ 鿥⮛յ乃㰄⮛յNodeListյMapյSetםל
    const iterable = [10, 20, 30];
    for (const value of iterable) {
    console.log(value);
    }
    IBUFOBJOUFSO
    

    View Slide

23. /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
    

    View Slide

24. 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
    

    View Slide

25. 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
    

    View Slide

26. 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
    

    View Slide

27. 5ZQF4DSJQUמחַי NJO
    
    IBUFOBJOUFSO
    

    View Slide

28. 5ZQF4DSJQUJT⛰
    +BWB4DSJQUמ㑔ؓؿط٭ب٘٤םל؅♀ׄ׼׿׾׻ֹמ׊גوٞءِٚ٤ء銧鏤ךյ㛡ׂס㕙⺬ע
    +BWB4DSJQUמ㚺䬵׊י־׼+BWB4DSJQUס⭚杼硌ך㲔车׌׾ն
    ˝ OPEFס氧㕙׷3FBDUס氧㕙םלךյئ٭فئؕغ׷نٞ٤عؙ٤غ؅嘦了׊י+BWB4DSJQU؅✳榫׊גא׆
    א׆㛻׀םؘؗهؓوٛآ٭ب٘٤סꝧ氦ֿ沸؆מ车؂׿׾׻ֹמםזג
    ˝ א׆א׆ס釨嘗ס☔丗ךא׆א׆ס釨嘗ס+BWB4DSJQUסؤ٭غ؅㱦⪒מ傴ׂג״מ㑔ס䗯㕔؅✳ַגַ
    ˝ 磝ײ鱮ײס"1*ֿ⛰؅鲭׊יׂ׾ס־նٚؕهֿٚٛלַֹֹ鲭׽⡁؅鲭׊יׂ׾ס־ն
    ˝ ٚ٤ذّؕך㲔车׊ג꤀מ⮣״יٚ٤ذؙّؕٚ٭ֿ颯׀׾כַֹסעꡔׁגַն
    ˝ Uncaught TypeError: Cannot read property 'foo' of undefined
    ˝ אסג״מ+BWB4DSJQUמꪐ氳㑔♀ׄ؅ⱶֻג"MUFSOBUJWF+BWB4DSJQUכ׊יס5ZQF4DSJQUֿ䶹䧏׈׿׾׻ֹ
    מםזג
    IBUFOBJOUFSO
    

    View Slide

29. tsc5ZQF4DSJQUDPNQJMFS
    ˝ ُؕؠٞخنعס5ZQF4DSJQUز٭ّמ׻זיꝧ氦׈׿יַ׾5ZQF4DSJQU؅䣽ֹג״סص٭ٜ
    ˝ IUUQTHJUIVCDPNNJDSPTPGU5ZQF4DSJQU
    ˝ 5ZQF4DSJQU؅+BWB4DSJQUמ㚺䬵 ؤ٤قٜؕ
    ׌׾嚀耆כؤ٤قٜؕ侇סꪐ氳㑔鉮冪嚀耆؅䬠❠׊יַ׾
    ˝ --noEmit؛وب٘٤؅♀ׄי׾כյꪐ氳㑔鉮冪嚀耆דׄ؅颦׼׎׾׆כֿך׀׾
    ˝ 5ZQF4DSJQU־׼+BWB4DSJQU׫ס㚺䬵כ銧זי׵յ㑔ؓؿط٭ب٘٤璡ס⯡ꢜֿ׮כ؆ל
    ˝ +BWB4DSJQUٚ٤ذֿّؕ㲔车׌׾כ׀ס䨕׾艵ַמע䏅ꮶ؅┙ֻםַכ䓙זיַֽי荁ַ
    ˝ 鴫מ䬠❠׈׿יַ׾㑔מ⺬؂׎י傴ַי׵յ㲔꤀מעٚؕهٚٛס㲔逷כثٝיַיٚ٤ذؙّؕٚ٭ֿ颯׀׾׆כ׵燵מ ׻ׂ
    ֵ׾
    ˝ +BWB4DSJQU׫ס㚺䬵舅⛮ע♏僀⺎耆ն#BCFM FTCVJMEםל
    ˝ 㛡ׂסوٞةؘؠعךעCBCFM؅✳榫׊יַ׾כ䓙ֹסךյ@babel/preset-typescript؅僗Ⲗמ׊גCBCFMך㚺䬵؅车ֹ亠ֿ錃
    㲊ֿ邾ꥭ⴫׊ם־זג׽׊י؛تتْ
    enum؅✳זיַ׾כؤ٭غֿ鴑ⱶ׈׿׾סך䏅ꮶ؅┙ֻ׾նenumע䏲鳭׌׾؛هةؘؠعכtypeofםלס磝ײ⺬؂׎ך♏僀⺎耆םסךյ㓹儖氳מע⮵榫׊םַ׻ֹמ׊יַ׾׆כֿ㛡
    ַն
    IBUFOBJOUFSO
    

    View Slide

30. 㑔㲚銧鼧⮆؅鐆״׾׻ֹמם؀ֹ
    5ZQF4DSJQUס♏辐氳ם辐杯םל؅磆☭׊יַ׀ױ׌ն
    ה׺זכ䣆⩕ך鍱׊גַ☔ע⪜䌋ס1MBZHSPVOEֽֿ䣆鬭ך׌ն
    IBUFOBJOUFSO
    

    View Slide

31. 㚺丗㲚銧侇ס㑔ؓؿط٭ب٘٤
    // JavaScriptͷ৔߹
    const a = 'hello';
    // TypeScriptͷ৔߹͸ม਺໊ͱ=ͷؒʹ:Λஔ͍ͯܕΞϊςʔγϣϯΛॻ͘
    const a: ʲ͜͜ʹܕΞϊςʔγϣϯʳ = 'hello';
    // ྫ͑͹
    const a: string = 'hello';
    ׆׿ׂ׼ַדזג׼䫟鑜׊יׂ׿׾סךյ㲔꤀מע傴־םַ׆כ
    ׵㛡ַ
    IBUFOBJOUFSO
    

    View Slide

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 = [1, 2, 3, 5, 8];
    const arr3: [string, number] = ['year', 2021]; // λϓϧ(Tuple)ܕͱ΋
    IBUFOBJOUFSO
    

    View Slide

33. ♏辐氳ם辐杯Η
    ˝ ؛هةؘؠع
    ˝ +BWB4DSJQUס؛هةؘؠع⺱喋מ傴ַיյ⡁؅傴ׂכ׆؀מ㑔؅傴ׂ
    ˝ ؞٭⺲מ?؅♀ׄ׾כ؛وب٘ػٜם؞٭מםזיյ泸樋⺎耆מם׾ն
    const person: {
    name: string,
    age: number,
    address?: string
    } = {
    name: 'john',
    age: 21
    }
    string | undefinedס׻ֹם鋗鳭כ⺱׋כ磆☭׈׿׾׆כ׵ֵ׾ն⡁ֿ⪌זיַ׾־לֹ־ך+BWB4DSJQUכ׊י㲔车׊ג꤀ס䨕׾艵ַֿ㚺؂׾׆כֵֿ׾ Object.keys()םל
    ס
    ךյ⸬㳡מע⺱׋ךעםַ׆כמ嫰䙫ն攐מ5ZQF4DSJQUך㵵⪌׈׿גexactOptionalPropertyTypes؅僗Ⲗמ׌׾כյUTDךס㑔鉮冪侇ס䨕׾艵ַ׵㚺؂׽ױ׌ն
    IBUFOBJOUFSO
    

    View Slide

34. type
    type؅✳ֹכ㑔辐杯מؙؕٛؓت؅♀ׄ׼׿׾
    type Person = {
    name: string,
    age: number,
    };
    type Team = Person[];
    IBUFOBJOUFSO
    

    View Slide

35. 6OJPO5ZQF ⺬✡㑔
    
    邾丗ס㑔סַ׍׿־؅嵹ג׌
    type Primitive = string | number | boolean | undefined | null;
    type Color = 'red' | 'green' | 'blue' | 'yellow' |'perple';
    IBUFOBJOUFSO
    

    View Slide

36. 㑔؝٭غ 5ZQF(VBSE
    מ✳ֻ׾➘⮵ם
    +BWB4DSJQUס庋畀㯸
    +BWB4DSJQUס庋畀㯸ס╈מע僗Ⲗמ✳ֹ׆כךյꪐ氳鉮冪侇מ
    5ZQF4DSJQUؤ٤قؕٚמ׻זי➘⮵מ✳榫׈׿׾׵סֵֿ׾ն
    typeofכin؅׆׆ךע磆☭׊ױ׌ն׆׿׼ע+BWB4DSJQUסٚ٤
    ذّؕ┕ךⳂ⛼׌׾׆כמ嫰䙫ն
    IBUFOBJOUFSO
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. 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
    

    View Slide

41. as؅榫ַג㑔ؓئ٭ب٘٤ 5ZQF"TTFSUJPO
    
    ˝ 5ZQF4DSJQUמ׻זי䫟鑜׈׿ג㑔؅┕傴׀׊גַכ׀מ✳ֹ
    ˝ 㑔؞ٔتعךעםַ ٚ٤ذّؕ┕ךס䨕׾艵ַֿם؆׼㚺؂
    ׾׆כעםַ
    
    ˝ 㛡ׂס㕙⺬ע㲹מם׾סךյ儖䎎מ䑒釐ם㕙⺬דׄ⮵榫׌׾
    IBUFOBJOUFSO
    

    View Slide

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

    View Slide

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

    View Slide

44. anyכunknown
    5ZQF4DSJQU┕ך┘㲊ם㑔؅䣽ֹג״ס亠嫎؅磆☭׊ױ׌ն
    IBUFOBJOUFSO
    

    View Slide

45. any
    ˝ ⛰׼־ס⡁ֿ⪌זיַ׾׆כ؅炐׌նundefined־׼؛هةؘ
    ؠع־׼꞊丗ױך⛰ֿ⪌זיַי׵荁ַնtscֿ㑔ס吾錞؅׊
    םַסךյas⺱喋מ鹴ׄ׼׿׾㕙⺬ע鹴ׄ׾ն
    let anything: any = {};
    // anyʹ͸ԿͰ΋୅ೖͰ͖Δ
    anything = () => {};
    anything = null;
    anything.split(','); // anyͷ৔߹͸ϝιου΋ͳΜͰ΋ࢀরͰ͖Δ
    IBUFOBJOUFSO
    

    View Slide

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

    View Slide

47. typeכinterface
    ˝ typeעؙؕٛؓت
    ˝ interfaceע؛هةؘؠعמ㑔؅♀ׄ׾⮯ס亠嫎ն
    ˝ 仴㰆ס׵סמ䏲־׼وٞقطؔ؅鴑ⱶך׀׾סעinterface
    ˝ ٚؕهֿٚٛ䬠❠׊גinterface؅⮵榫縖ֿ舅榺מ䦡䍖ך׀׾
    ˝ typeע⮯ס⺲⯥؅♀ׄ׾䑒釐ֵֿ׾
    ˝ typeכinterfaceס✳ַ⮆ׄעؤ٭غ釨硜םלך荇չם孱孬׷╚䍖ֵֿ׾
    סךյ齁מ⪌׿ף齁מ䏼זיׂד׈ַ
    IBUFOBJOUFSO
    

    View Slide

48. interface؅榫ַג䦡䍖
    GSPN5ZQF4DSJQU%PDVNFOUBUJPO&WFSZEBZ5ZQFT⫂%JFSFODFT#FUXFFO5ZQF"MJBTFTBOE*OUFSGBDFT
    IBUFOBJOUFSO
    

    View Slide

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

    View Slide

50. 㑔䌕丗 (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
    

    View Slide

51. 禈㑔䌕丗
    ˝ 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
    

    View Slide

52. 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
    

    View Slide

53. 0WFSMPBETכ꞊丗ס㑔㲚銧
    ˝ 㓹儖ע湾ׂ傴ׂס؅✳זיֽׄף荁ַך׌
    type f = (x: number) => number;
    ˝ ⺱喋ס׆כ؅׆ס׻ֹמ׵傴ׄ׾
    type f = {
    (x: number): number;
    }
    ˝ 0WFSMPBET؅㑔㲚銧כ⪦מ傴׀גַ㕙⺬ע䏲縖؅✳ֹ
    type func = {
    (x: number): number;
    (x: string): string;
    }
    IBUFOBJOUFSO
    

    View Slide

54. never
    ˝ 祀㵚מ氦榟٬⮼鷼׊םַ׆כ؅辐׌㑔
    ˝ ❆ֻף扛꡾ٜ٭وֵֿ׾꞊丗ע祀㵚מ㱭▼׊םַ꞊丗םסך鲭׽⡁עneverמם
    ׾
    ˝ voidע♏⪌⺎耆דֿյneverמעneverסײ♏⪌⺎耆 חױ׽㚺丗מע㓹儖
    氳מ♏⪌⭳全׍מؙٚ٭מם׾
    
    function infiniteLoop(): never {
    while (true) {}
    }
    TUSJDU/VMM$IFDLJOHֿ僗Ⲗמםזיַםַ㕙⺬סײ♏⪌⺎耆ն┉亠ך+BWB4DSJQUסٚ٤ذّؕ┕ךעundefinedםסךյ♏⪌׌׾׆כע׮כ؆לםַך׊׺ֹն
    IBUFOBJOUFSO
    

    View Slide

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

    View Slide

56. ׉זכדׄ浊״׾ؤ٭ػ٭
    ˝ ׆׆ױך؅杼鉮׊גכ׀מ鐆׳כ➘⮵םؤ٭ػ٭ך׌
    ˝ ה׺זכ׊גطؠؼشؠכ⺬؂׎י傴ַיֽ׀ױ׌
    IBUFOBJOUFSO
    

    View Slide

57. ReadonlyReturnType
    ˝ Readonlyע؛هةؘؠع׷鿥⮛ס釐碛؅鐆ײ鱮ײ㵠榫מך׀׾
    ˝ ⫋䅯氳מע鸵榫׈׿םַ׆כמ嫰䙫
    type PersonRo = Readonly
    ˝ ReturnTypeע꞊丗ס鲭׽⡁㑔כ׊י䐂׾
    type Func = () => string;
    type ReturnVal = ReturnType // ReturnVal͸stringͱղऍ͞ΕΔ
    IBUFOBJOUFSO
    

    View Slide

58. typeof庋畀㯸
    ˝ ׆ה׼ע⯥鳭ס׵סכע鷿ֹ5ZQF4DSJQU磝ײ鱮ײס׵סն㑔ؓ
    ؿط٭ب٘٤؅傴ׂ㕙䢥ך⮵榫׌׾ն
    ˝ +BWB4DSJQUך㲚銧׈׿ג⡁؅ꪐ氳鉮冪׊י㑔؅䐂׾
    const hello = () => 'hello';
    type Func = typeof hello;
    type P = ReturnType; // P͸stringͱղऍ͞ΕΔ
    IBUFOBJOUFSO
    

    View Slide

59. 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
    

    View Slide

60. *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
    

    View Slide

61. ◫䄐㑔 *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
    

    View Slide

62. $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
    

    View Slide

63. 3FBDUמחַי NJO
    
    IBUFOBJOUFSO
    

    View Slide

64. 3FBDUמחַי
    ׆ס珕ךע3FBDUמ꞊׌׾僃⛥꡾ס鐆ײ傴׀ֿ⭳全׾׻ֹמם׾׆
    כ؅泘䧗׊ױ׌ն
    IBUFOBJOUFSO
    

    View Slide

65. 㲚銧氳 EFDMBSBUJWF
    6*מחַי
    ˝ 6*鼧⮆؅㲚銧氳מ鋗鳭׌׾亠嫎ס׆כ
    ˝ חױ׽յלַֹֹ׆ככַֹס؅ה׺זכ釤יַ׀ױ׌
    ˝ ؘؗهؓوٛآ٭ب٘٤סٛشز⴫׷تُ٭عنؚ٤ؓوٛס氧㕙
    ךյ(6*؅Ⳃ氳מ啶疣٬㚺催׌׾ꄆ釐䈱כ姲״׼׿׾(6*ס邾ꥭ䓪ֿ
    劲壿מ⺸┕׊גכַֹ塷⺒ֵֿ׽ױ׊ג
    ˝ א؆ם╈յ6*؅Ⳃ氳榟䡗׊יַ׾כյ(6*鼧⮆ס䳩⛼؅鴑ⱶ׌׾גצ
    מؤ٭غס邾ꥭ䓪ֿ냕ױזיַׂכַֹゖ갭מ׵泡ꪫ׊ֿהך׊ג
    IBUFOBJOUFSO
    

    View Slide

66. 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
    

    View Slide

67. Ⳃ氳榟䡗סゖ갭憠
    ˝ ؤ٭غ؅釤׾דׄךעלַֹֹ䡗冽擻ֿ榟䡗׈׿׾ס־ْؕ٭
    ة׊ט׼ַ
    ˝ 6*ס鴑ⱶ׷榟䡗ֿאס㕙אס㕙ך傴־׿ֿהך꥗硜⴫ֿꦘ׊ׂ
    ם׽ֿה
    ˝ طتع׷אס☽錃銶┕ס䄄㜂םל׵ꦘ׊ׂם׾
    IBUFOBJOUFSO
    

    View Slide

68. 㲚銧氳6*ס❆
    ˝ )5.-ע㲚銧氳6*ס♏辐❆
    ˝ ؤ٭غס釤ג泘ֿאסױױ辐炐׈׿׾
    
    1
    2
    fizz
    4
    buzz
    
    IBUFOBJOUFSO
    

    View Slide

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

    View Slide

70. +49מחַי
    ˝ {}؅✳ֹ׆כך+BWB4DSJQUס䌋؅㷣ꝧך׀׾ն+49舅⛮׵ױג䌋םסךյ⪌׿㯸מ׊י׵㛻┓㜂ն
    ˝ ✳ֻ׾㕙䢥ע釐碛ס╈ױגע㷯䓪
    ˝ className class
    ׷htmlFor for
    םל┉鼧ע+BWB4DSJQUס◀硜鏤כ逇׾סך㚺催׈׿יַ׾
    const classname = "fizz-buzz-list";
    const itemProps = { className: 'fb-item', style: { listStyleType: 'square'} }
    const list = className={className}
    >
    {[1, 2, 3, 4, 5, 6].map((i) =>
    {fizzbuzz(1)}
    )}
    
    䌋 FYQSFTTJPO
    עאס㕙ך⡁؅鲭׌׵סյ㚺丗מ♏⪌ך׀׾׵סס׆כך׌նחױ׽յ㚺丗׷乃㰄⮛דׄךםׂյ꞊丗⽛צ⭳׊ֿ⭳全ױ׌ն鴫מJG乃םלע✳ֻםַסךյ兢♭⮆㹎؅׊ג
    ַ㕙⺬ע└ꯁ庋畀㯸؅✳זג׽׊ױ׌ն
    IBUFOBJOUFSO
    

    View Slide

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 <>
    
    {range.map(n => {fizzbuzz(n)})}
    
    ௥Ճ
    >
    }
    IBUFOBJOUFSO
    

    View Slide

72. 놹ֿ꧟ֻ׾♞䘶 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
    

    View Slide

73. 'VODUJPO$PNQPOFOUךֵ׾ْٛشع
    ˝ 3FBDU$PNQPOFOUע꞊丗؅榫ַי辐杯׌׾׆כך꞊丗㑔وٞءِٚ٤ءס哭䒝؅⮵榫ך׀׾׻ֹמ׊יַ׾
    ˝ חױ׽3FBDU$PNQPOFOUע3FBDU$PNQPOFOUױגעnull؅鲭׌꞊丗
    ˝ ظ٭ذעِٖؕ٭ذهٜךֵ׾׻ֹמ׌׾
    ˝ ؛هةؘؠع׷鿥⮛؅䣽ֹ꤀עؤم٭؅⛼䡗׊י־׼㚺催׌׾նArray.prototype.pushםל滭㙗氳ם㚺
    催؅׊םַ׻ֹמ׌׾
    ˝ 䌕丗ס⡁־׼磵冽 3FBDU$PNQPOFOU
    ؅鲭׌硾睛꞊丗כ׊י辐杯׈׿׾
    ˝ 1SFTFOUFS7JFXםלס㷺מ⮆ׄג䏲מյא׿׼؅磝ײ⺬؂׎ג⺬䡗꞊丗כ׊י3FBDU$PNQPOFOUֿ辐杯⭳全
    ׾
    ˝ 6OJU5FTUםלֿ癨ⶡמםזג
    3FBDU$PNQPOFOUؠٚت؅禆䤔׊גDMBTT؅榫ַג亠嫎׵ֵ׾ֿյ㵧全氳ם䉬塛ֿ◀㲊׈׿יַ׾ג״յ꞊丗؅榫ַג亠嫎סײ؅✳榫׌׾׆כ؅䍚ׂ䫟㝢׊ױ׌ն
    IBUFOBJOUFSO
    

    View Slide

74. '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
    

    View Slide

75. 1SPQTכ4UBUF
    ˝ 3FBDU$PNQPOFOUמע⡁؅䧏ח亠嫎ֿ㛻׀ׂחֵ׾
    ˝ ꞊丗ס䌕丗כ׊י⹨ׄ⹦׾1SPQTכ⫂鼧敯䛜؅⟊䧏׌׾4UBUF
    IBUFOBJOUFSO
    

    View Slide

76. 1SPQT؅峚׌⹨ׄ⹦׾
    ˝ ⹨ׄ⹦׾⣐ע꞊丗ס瑬䌕丗ך؛هةؘؠعכ׊י⹨ׄ⹦׾
    type Props = { name: string }
    const Welcome: React.FC = ({name}) => {
    return Welcome {name}
    }
    ˝ 峚׌⣐ 鈐⣐
    ע+49ך㷯䓪⡁כ׊י峚׌ն؛هةؘؠعס؞٭כ⡁ֿא׿ב
    ׿㷯䓪⺲כ⡁מ㵚䑴׌׾
    
    // Welcome John
    IBUFOBJOUFSO
    

    View Slide

77. 敯䛜 4UBUF
    ؅䣽ֹ
    ˝ useStateכַֹ攐墤ם꞊丗؅✳ֹ׆כך敯䛜؅䧏ח׆כֿ⭳全׾
    ˝ ׆ַֹזגuse־׼㡎ױ׾꞊丗ע3FBDUךنشؠ )PPLT
    כ⽛ף׿׾攐⮯ם꞊丗
    function Counter () {
    const [count, setCount] = useState(0);
    const increaseCount = () => setCount(prevCount => prevCount + 1);
    return
    Χ΢ϯτ: {count}
    Χ΢ϯτ
    
    }
    IBUFOBJOUFSO
    

    View Slide

78. 3FBDUס)PPLTמחַי
    IBUFOBJOUFSO
    

    View Slide

79. )PPLTס䫍
    3VMFTPG)PPLTˑ3FBDU
    ˝ ⺲⯥עuse־׼㡎״׾
    ˝ عشوٝيٜך⽛ש
    ˝ ifס╈םלך⽛ףםַ
    ˝ FBSMZSFUVSO׌׾⯥מ䑒׍⽛ש
    ׆׿׼עeslint-plugin-react-hooksך吾⭳׊יׂ׿׾׻ֹמ⭳全׾
    IBUFOBJOUFSO
    

    View Slide

80. ♏辐氳ם磝ײ鱮ײ)PPLTס磆☭
    IBUFOBJOUFSO
    

    View Slide

81. useState
    ˝ useState()ך⮣僿⡁؅┙ֻ׾׆כֿ⭳全յ鲭׽⡁סذوٜסח泘ֿ
    杯㏇ס⡁ךյח泘ֿTFUUFSמםזיַ׾
    ˝ 鲭׽⡁ֿذوٜ 鿥⮛
    םסךյ㞐׀ם⺲⯥؅חׄ׾סֿ癨ⶡ
    ˝ TFUUFS؅⽛שכ⫂鼧敯䛜ֿ催二׈׿ג׆כֿ$PNQPOFOUמ鵟湳׈׿
    יյ♞䘶%0.ס⫋榟䡗յ奂鬳յٝ٤رٛ٤ءס催二ֿ车؂׿׾
    ˝ 䫟鑜ך׀םַ׵ס؅㑔䧗㲊׊גַ㕙⺬ע㑔䌕丗؅榫ַ׾׆כֿ⭳全׾
    const [color, setColor] = useState('red');
    IBUFOBJOUFSO
    

    View Slide

82. useStateסTFUUFSמחַי
    ˝ 二׊ַ⡁؅峚׌
    const [color, setColor] = useState('red');
    const change2Blue = () => setColor('blue');
    ˝ 泡⯥ס⡁؅⮵榫׊י二׊ַ⡁؅婊㲊׌׾
    const [count, setCount] = useState(0);
    const increaseCount = () => setCount(prevCount => prevCount + 1);
    IBUFOBJOUFSO
    

    View Slide

83. 二׊ַ⡁؅峚׌כ׀ס蛽כ׊狌
    const [count, setCount] = useState(0);
    const increaseCount = () => setCount(count + 1);
    כ׊י׊ױֹכյ
    const increaseDouble = () => {
    increment();
    increment();
    }
    ס׻ֹם׵ס؅⛼זגכ׀מյincreaseDouble؅⽛؆ך׵1׊־㘃ֻםַכ
    ַֹ杯霄מ鸿鷔׌׾ך׊׺ֹն
    IBUFOBJOUFSO
    

    View Slide

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

    View Slide

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

    View Slide

86. useEffect
    ˝ 3FBDU$PNQPOFOU⫂ךⰜ⛼榫⭚杼׷ꪜ⺱僿מ⭚杼؅车ַגַ㕙
    ⺬מ⮵榫׌׾)PPLT
    ˝ %0.؅催二׊ג䏲מ⽛צ⭳׈׿׾⭚杼؅傴ׂ׆כֿ⭳全׾
    ˝ %0.ס催二䏲מQSPQT׷TUBUF؅⮵榫׊ג⭚杼؅㲔车׌׾׆כ
    ֿ⭳全׾
    IBUFOBJOUFSO
    

    View Slide

87. $PNQPOFOUס催二夵מ؜ؗ٤ذ٭ס丗؅
    alertךٗ٭ا٭מ鵟湳׌׾
    function Counter () {
    const [count, setCount] = useState(0);
    const increaseCount = () => setCount(prevCount => prevCount + 1);
    alert(count)
    return {/* ུ */}
    }
    ˝ alertע⺱僿氳מ㲔车׈׿׾꞊丗םסךյٗ٭ا٭ֿր0,ց؅鹟䥃׌׾ױ
    ך㲔车ֿ塛ױ׽յٝ٤رٛ٤ءֿ׈׿םׂםזי׊ױֹն
    IBUFOBJOUFSO
    

    View Slide

88. 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
    

    View Slide

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

    View Slide

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

    View Slide

91. useEffectכؠٛ٭٤ػشو
    ˝ useEffectע꞊丗؅鲭׌׆כךאס꞊丗ֿ域סⰜ⛼榫ֿ⽛צ⭳׈׿׾⯥מ㲔车׈׿׾
    ˝ ׆׿؅⮵榫׌׾כⰜ⛼榫סؠٛ٭٤ػشوֿ⭳全׾
    roomIdֿ㚺催׈׿׾כյزٔشعס⹿ַ頇鐆؅⹦׽寕׊յ二׊ַ頇鐆؅ꝧ㡎׌׾❆
    useEffect(() => {
    const handler = () => {/* ৽͍͠ϝοηʔδΛड͚औͬͨͱ͖ͷॲཧ */};
    chat.subscribe(roomId, handler);
    return () => {
    chat.unsubscribe(roomId);
    }
    }, [roomId])
    狜鿥⮛؅䧗㲊׊יַ׾㕙⺬םלעؓ٤ُؗ٤ع侇מ׵㲔车׈׿׾
    IBUFOBJOUFSO
    

    View Slide

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

    View Slide

93. 斻舅نشؠמחַיס5JQT
    ˝ 斻舅نشؠמ$PNQPOFOUס䏔Ⱏ؅⪦鵟⴫׌׾׆כך⮉׽⭳׊ג嚀耆סײ؅طتع⺎耆מם׾
    ˝ 斻舅نشؠך鲭׌؛هةؘؠع׷꞊丗םלעuseState׷useMemoյuseEffectך⺱┉䓪؅䥵⟊׊
    יֽׂ>
    ˝ 攐מ꞊丗מחַיעֹז־׽碛儢מ꞊丗؛هةؘؠع؅鲭׊י׊ױַֿהםסךյ妳מ׊יֽׂכ⺮
    ˝ 斻舅نشؠ؅⽛צ⭳׌⣐ֿ⺱┉䓪؅⟊䧏׌׾ג״מuseEffectמ峚׌ ׆כ؅吾鋀׌׾
    䑒釐ֿ⭳
    י׀י׊ױֹ
    ˝ 磵冽յאסױױךע⮵榫ך׀׍מuseEffect׌׾׆כמם׽յ磵冽氳מ⫋⮵榫䓪׵┖ֿזי׊ױ
    ֹ
    >鎋׊ׂע♀ꎰր)PPLTס❣㰆ס奂鬳כ؛هةؘؠعס⺱┉䓪מחַיցך鉮鐄׊יַױ׌ն
    IBUFOBJOUFSO
    

    View Slide

94. 3FBDU'SBHNFOUמחַי
    ˝ <>כ>ך㍱ֹכ3FBDU'SBHNFOU؅⛼׾׆כֿ⭳全׾
    ˝ 3FBDU$PNQPOFOUעחס&MFNFOUמםזיַ׾䑒釐ֵֿ׾סךյ׆׿؅✳؂םַכ┘釐םםל
    ך㍱؂םַכַׄםׂם׾
    ˝ ח♓┕ס3FBDU$PNQPOFOU؅┾׬׾דׄסכ׀מ僗Ⲗ
    function Component () {
    return <>
    hello
    
    
    ͜Μʹͪ͸
    >
    }
    keyםלסوٞقطؔ؅錃㲊׊גַ㕙⺬עכך׵♏榫⺎耆
    IBUFOBJOUFSO
    

    View Slide

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

    View Slide

96. ׵זכ湳׽גַ
    㵼׊馐ײ⭳׌ג״מ؛تتْס傴盈׷ؘؗهئؕعמחַיնױ׍ע5ZQF4DSJQU׷3FBDUע⪜
    䌋ئؕعסزٖ٭عٜٛؓ׷غ؞ْٖ٤عֿ⩗㲔׊יַ׾סךյא׿׼؅鐆׳ס׵؛تتْն
    ˝ +BWB4DSJQU+BWB4DSJQU1SJNFS鳿؂םַג״ס⪌ꝛ傴KTQSJNFS
    ˝ 5ZQF4DSJQUوٞءِٚ٤ء5ZQF4DSJQU
    ˝ 3FBDU3FBDUـ٤ث؛٤ٚ٭ؼ٤ء瑬撶
    ˝ %0.*OUSPEVDUJPOUPUIF%0.8FC"1*T].%/
    ⛰־㍭זג׆כ湳׽גַ׆כֵֿזג׼յ⦇׷ْ٤ذ٭אס☽骰鲣םؙ٤ةؼؓמם؆ך׵绂
    ַיײיׂד׈ַ
    IBUFOBJOUFSO
    

    View Slide

97. ♀ꎰ
    儖稴מ⪌׽⮉׼ם־זג馐ײ鱮؆ד遨餉׷鉮鐄מחַי傴ַיַױ׌ն艄⽏ֵֿ׿ף鐆؆ךׂד׈ַ氳םؤ٭ػ٭ך׌ն
    ˝ "SSPX'VODUJPOמחַי
    ˝ "SSPX'VODUJPOמ糋׀䬵ֻ⭳全םַآ٭ت
    ˝ "SSPX'VODUJPOכthis
    ˝ )PPLTס❣㰆ס奂鬳כ؛هةؘؠعס⺱┉䓪מחַי
    ˝ useMemo׷useCallback؅榫ַגقنؚ٭ُ٤ت䷉ャ
    ˝ 3FBDU$PNQPOFOU⫂ך%0.מؓؠجت׌׾
    ˝ +BWB4DSJQU؅ؘؗهؓوٛآ٭ب٘٤ך䬠❠׌׾꤀מ✳榫׌׾ص٭ٜزؘؕ٤מחַי
    ˝ +BWB4DSJQU׷نٞ٤عؙ٤غ⼽鱨ס╚םص٭ٜמחַי
    ˝ +BWB4DSJQU׷نٞ٤عؙ٤غ⼽鱨䤗软ס嘅嶖 ⴫
    מחַי
    IBUFOBJOUFSO
    

    View Slide

98. "SSPX'VODUJPOמ糋׀䬵ֻ⭳全םַآ٭ت
    ˝ function؅✳זיؤ٤تعٚؠذ꞊丗מ׊יַ׾ new׊יַ
    ׾
    
    ˝ arguments؅⹆拨׊יַ׾
    ˝ this؅⹆拨׊יַ׾
    ˝ ׆סآ٭تמחַי鉮鐄׊ױ׌
    IBUFOBJOUFSO
    

    View Slide

99. "SSPX'VODUJPOכthis
    ˝ "SSPX'VODUJPOכfunction؞٭٠٭غך榟䡗׊ג꞊丗כךע
    ╚מthisס䣽ַֿ㛻׀ׂ樟ם׾
    ˝ ׆ס׆כמ׻זיⶡ硾ם糋׀䬵ֻֿ┘⺎ם㕙⺬ֵֿ׾
    IBUFOBJOUFSO
    

    View Slide

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

     View Slide

101. thisסتؤ٭وס鷿ַמחַי
     ˝ "SSPX'VODUJPOדכتؤ٭وֿ㛙כ⺱׋מם׾
     const person = {
     name: 'chris',
     say: function () { setTimeout(
     () => { console.log(`I'm ${this.name}`) }
     , 100); }
     };
     person.say(); // I'm chris
     IBUFOBJOUFSO
     

     View Slide

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

     View Slide

103. ❣㰆鿥⮛מ؛هةؘؠع؅⪌׿׾آ٭تמחַי
     const config = { theme: 'sports' }
     useEffect(() => {
     loadConfig(config).then(() => {})
     }, [config])
     ס׻ֹם㕙⺬מעٝ٤رٛ٤ءס䈱מյconfigֿ⫋榟䡗׈׿׾ն׻זיյ
     樟ם׾⡁כ׊י鏀閁׈׿י׊ױַյ夵㍑Ⱌ⛼榫ֿ⽛צ⭳׈׿י׊ױֹն׆ס
     ׻ֹם❆ס㕙⺬ע❣㰆מ[config.theme]כַֹ겧מ⡁؅傴ַי׊ױזי
     ׵荁ַֿյ❣㰆׌׾؛هةؘؠعמחַי湳זיַ׾䑒釐ֵֿ׾סךꦘ׊
     ַն
     IBUFOBJOUFSO
     

     View Slide

104. ب٤وٜם㍑鹴瓀
     ˝ ┉樑癨ⶡם㍑鹴瓀ע$PNQPOFOUס㛙ך⮣僿⴫׊י׊ױֻף荁ַ
     const config = { theme: 'sports' }
     function Component () {
     useEffect(() => {
     loadConfig(config).then(() => {})
     }, [config]);
     }
     ˝ ┉亠ךյ׆ס┩מע1SPQT؅⮵榫׊י؛هةؘؠع؅榟䡗׌׾םל׵׻ׂ
     ֵ׾סךյ׆ס亠嫎ֿ✳ֻ׾׆כע㵼םַ
     IBUFOBJOUFSO
     

     View Slide

105. ؛هةؘؠعס⫋榟䡗؅㍑鹴׌׾ג״מ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
     

     View Slide

106. useCallbackך꞊丗؅ْٓ⴫׌׾
     ˝ ⡁⺱喋מ꞊丗؅ْٓ⴫׊גַ㕙⺬עuseCallback؅⮵榫׌׾
     ˝ ْٓ⴫׊םַכ夵ٝ٤رٛ٤ء侇מ꞊丗؛هةؘؠعֿ榟䡗
     ׈׿י׊ױֹ
     const handler = useCallback((val) => alert(val), []);
     useEffect(() => {
     Api.notification.subscribe(handler)
     }, [handler]);
     IBUFOBJOUFSO
     

     View Slide

107. 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
     

     View Slide

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

     View Slide

109. %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
     

     View Slide

110. +BWB4DSJQU؅ؘؗهؓوٛآ٭ب٘٤ך䬠❠
     ׌׾꤀מ✳榫׌׾ص٭ٜزؘؕ٤מחַי
     5ZQF4DSJQU+BWB4DSJQU؅㲔꤀סؘؗهؓوٛآ٭ب٘٤ךٗ٭
     ا٭סؘؗههٚؗاך㲔车׌׾꤀מעյַׂח־סص٭ٜ؅磝
     ײ⺬؂׎י㚺䬵׊ג׽׊ג׵ס؅䬠❠׌׾ն
     IBUFOBJOUFSO
     

     View Slide

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

     View Slide

112. XFCQBDLדכ٬٬٬
     ˝ 5ZQF4DSJQU־׼+BWB4DSJQUױךס㚺䬵כ◍䬵䓪סג״ס䳩⛼ע
     CBCFM babel-loader磬榺ך⮵榫
     ך车ֹ
     ˝ نٜؒؕס磵⺬םלעXFCQBDLס╚ג׾嚀耆
     ˝ 㳊ꄈ⯡峎ע5FSTFS webpack-terser-plugin磬榺ך⮵榫
     ך车
     ֹ
     IBUFOBJOUFSO
     

     View Slide

113. create-react-appמחַי
     ˝ 3FBDU؅✳זגوٞةؘؠعס⛼䡗յ꞊鵽ص٭ٜס㵵⪌٬㲔车؅舅Ⳃ⴫׊יׂ׿׾
     ˝ 㓹儖氳מעױ׍ע׆׿؅✳זיֽׄף0,
     ˝ XFCQBDL CBCFM FTMJOUםל钥չס錃㲊ס榟䡗׵舅Ⳃך车؂׿ױ׌
     ˝ npm startךٞ٭؜ٜꝧ氦梪㗞ס玮ה┕ׅյnpm testךٗؼشعطتعֿ㲔车ך׀׾
     ˝ 鎋碷ע⫂鼧ך✳؂׿יַ׾react-scriptsמ꥗硜׈׿יַ׾
     ˝ create-react-appך⮵榫׌׾ص٭ٜע㲊僿氳מ釤泡׈׿ג׽׊יַיյ䅻מ僃二ס3FBDUؤ
     ِٖؼطؔס湳釤ֿ孨־׈׿יַ׾
     ˝ create-react-app؅ؚؗشز׌׾׆כךאַֹזג僃二סⳂ⺸כַֹ׵סמ׵鉴׿׼׿׾
     סךյ3FBDUס⼽鱨מחַי湳׽גַ☔ע׆סَٛةعٛ؅釳ַיײ׾סֿ؛تتْ
     IBUFOBJOUFSO
     

     View Slide

114. +BWB4DSJQU׷نٞ٤عؙ٤غ⼽鱨䤗软ס嘅嶖
     ⴫
     מחַי
     ╚מهٚؗا┕ךⳂׂ+BWB4DSJQU׷%0.յ)5.-յ$44םלס"1*עא׿ב׿♓
     ┖ס׻ֹם☼喋ךא׿ב׿嘅嶖⴫׈׿יַ׾
     ˝ &$."4DSJQU
     ˝ 8)"58()5.--JWJOH4UBOEBSE
     ˝ 8)"58(%0.-JWJOH4UBOEBSE
     ˝ 8$$444QFDJDBUJPOT
     IBUFOBJOUFSO
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

119. &$."4DSJQUס☼喋כ㲔逷
     ˝ 4UBHFמםזג׽յ&$."4DSJQUמ⹦׽鱮ױ׿יַםׂי׵յؘؗههٚؗاםלמ㲔逷׈׿י✳榫⭳全׾׻ֹמם׾
     ׆כֵֿ׾
     ˝ 鴫מ㲔逷׈׿יַםַכյ☼喋מ⹦׽鱮״םַ
     ˝ אס敯䛜ך犉哕氳מ✳榫׌׾׆כךوَٞ٭اٜמنؔ٭غفشؠ؅׌׾׆כֿך׀׾
     ˝ ױגյ㲔逷ֿםַ敯䛜ך׵ؤِٖؼطؔ׷core-jsמ׻זיQPMZMM㲔逷ֿ䬠❠׈׿ג׽յCBCFMמ׻׾عٚ٤تق
     ٜؕםלךؓوٛآ٭ب٘٤⫂ך✳榫ך׀׾׻ֹמם׾׆כֵֿ׾
     ˝ א׿׼؅㲔榫׌׾׆כך׵وَٞ٭اٜמنؔ٭غفشؠֿך׀ג׽յ僗榫䓪؅炐׌׆כֿ⭳全׾
     ˝ &$."4DSJQUסوَٞ٭اٜע䅻מ⪒יֿ0QFOךյא׿מ꞊؂׾ظؔت؜شب٘٤׵0QFOםסךյ艄⽏סֵ׾䬠勅ֿ
     ֵזג׼յ佭ꪜ釳ַיײיյ✳榫׊յَةطؔهם憠׷ゖ갭憠ֵֿ׿ף佭ꪜنؔ٭غفشؠ؅׌׾׆כךյ儔全ס
     +BWB4DSJQU梪㗞؅׻ׂ׌׾׆כמ笋ֿ׽ױ׌ն
     &$."4DSJQUסوَٞ٭اٜע㛡ׂס㕙⺬յאס䬠勅ֿրלס׻ֹםٓزي٭ب٘٤ֵֿ׾ס־ցյրלס׻ֹםゖ갭؅鉮婊׌׾ס־ցյրלס׻ֹםٗ٭تآ٭تֵֿ׾ס־ցםלֿ鋗
     ׈׿יַ׾סךյאס僗榫䓪םל؅炐׌׆כ׵靹春מ笋ֿ׽ױ׌ն
     IBUFOBJOUFSO
     

     View Slide

120. ؘؗههٚؗا┕ס+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
     

     View Slide

121. ؘؗههٚؗاي٤رכ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
     

     View Slide

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

     View Slide