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

https://hatena.co.jp/recruit/intern/2022

Transcript

1. Frontend Boot Camp
   2022-08-23
   #hatenaintern
   

   View Slide

2. ׆סه٭ع؞ٔ٤وסإ٭ٜ
   "نٞ٤عؙ٤غ" JavaScript/TypeScript/React
   Web
   React TypeScript
   #hatenaintern
   

   View Slide

3. ( min)
   #hatenaintern
   

   View Slide

4. 杯♏סنٞ٤عؙ٤غמ
   חַי
   React
   ٝؕؓؗع؅磝׳׆כע׵ה؀؆յؓوٛ
   آ٭ب٘٤ֿ辐炐׈׿׾ױךס孱׿؅縒ֻ
   יײ׾כ䑒釐כ׈׿׾湳閁׵㛡ׂםזי׀
   ױ׌ն
   Frontend Developer Roadmap: Learn to
   become a modern frontend developer
   React JavaScript
   #hatenaintern
   

   View Slide

5. 喋չםⳂ⛼梪㗞ס┉❆
   א׿ב׿ס梪㗞מעյ׆׿׼ס䤗软מ׻זי⤓ֻ׾׆כֿך׀ױ׌ն
   IE
   Web
   (accessibility, a y)
   א׿ב׿յלס׻ֹמ㵚瓀׌׾ס־釤יַ׀ױ׌ն
   #hatenaintern
   

   View Slide

6. : React
   1.
   TypeScript JavaScript
   2.
   Web
   3. Web
   html
   4.
   (accessibility, a y)
   TypeScript - TypeScript Deep Dive
   #hatenaintern
   

   View Slide

7. : React
   ˝ Web
   ˝
   ˝ (accessibility,
   a y)
   ⪮⛮氳מעלֹס׻ֹמ㵚瓀׊יַׂס
   ־յꝧ氦ס孱׿כ⪦מ釤יַ׀ױ׌ն
   #hatenaintern
   

   View Slide

8. : React
   React JavaScript
   html
   > ls
   index.html main.js
   
   
   
   
   
   
   #hatenaintern
   

   View Slide

9. : React
   React/TypeScript
   
   
   
   
   
   
   
   
   
   // main.tsx
   const App = () => {
   const user: User | null = useUser()
   return (
   
   Α͏ͦ͜ɺ{user?.name ?? 'ήετ'}͞Μɻ
   
   )
   }
   const container = document.getElementById('root')
   const root = createRoot(container!)
   root.render()
   #hatenaintern
   

   View Slide

10. : React
    TypeScript
    JavaScript const user = useUser()
    TypeScript const user: User | null = useUser()
    jsx
    jsx const label = () => (...) HTML
    ES ?. ??
    => JSX TypeScript JavaScript
    Null (??) - JavaScript | MDN
    (?.) - JavaScript | MDN
    JSX React
    #hatenaintern
    

    View Slide

11. عٚ٤تقٜؕ
    僃二ס乃嫎ך傴ַגؤ٭غ؅㛡ׂס⹿ַ梪㗞⹿ַهٚؗاםלך׵
    Ⳃׂ׻ֹמ⹿ַ鋗嫎׫㚺䬵׌׾׆כ
    Null (??)
    const hello = (name) => `hello, ${name ?? "ήετ"}!`
    hello("hatena")
    // > hello, hatena!
    hello()
    // > hello, ήετ!
    #hatenaintern
    

    View Slide

12. عٚ٤تقٜؕ
    ES (ES ) Null
    (??) ES
    var hello = function hello(name) {
    return "hello, " + (name !== null && name !== void 0 ? name : "ήετ") + "!"
    }
    hello("hatena")
    // > hello, hatena!
    hello()
    // > hello, ήετ!
    #hatenaintern
    

    View Slide

13. ص٭ٜزؘؕ٤
    3
    (Rome , Deno )
    عٚ٤تقؕٚ
    Babel (JavaScript)
    SWC (Rust)
    esbuild (Golang)
    ف٤غٚ
    Webpack
    Rollup
    Parcel (SWC)
    Snowpack, Vite (esbuild)
    https://deno.land/
    https://rome.tools
    #hatenaintern
    

    View Slide

14. Web
    Chrome, IE, Safari, Firefox
    Web API
    JavaScript(ECMAScript) HTML DOM API CSS
    API poly ll
    JavaScript transpile
    2021 | gihyo.jp
    Web standards ( ) - MDN Web Docs : | MDN
    #hatenaintern
    

    View Slide

15. Web
    هٚؗاׇכסئَ٭ع敯媲ע♓┖סئؕعך澬鏀׌׾׆כֿך׀ױ׌ն
    MDN
    https://developer.mozilla.org/ja/docs/Web
    MDN
    Can I use
    https://caniuse.com
    mozilla Google Open Web Docs https://opencollective.com/open-web-docs/updates/
    introducing-open-web-docs
    #hatenaintern
    

    View Slide

16. (accessibility, a y)
    | MDN
    ؘؗهꝧ氦מֽׄ׾ؓؠجبلٛطؔכעյ⛰׼־ס杼榺מ׻׽耆ⱱמ⯆硜ֵֿ׾㕙⺬ך׵յ⺎耆ם꡾׽㛡ׂ
    ס☔չֿؘؗهئؕع؅✳榫ך׀׾׻ֹמ׌׾׆כ؅䙫⽏׊ױ׌նؓؠجبلٛطؔכעյ⠕☔ס骰⛮氳٬鏀
    湳氳耆ⱱ׷ؘؗه׫סؓؠجت亠嫎מ꞊؂׼׍յ⺎耆ם꡾׽ؓؠجت⺎耆םؤ٤ط٤ص؅ꝧ氦׌׾׆כך׌ն
    W C - Accessibility
    /
    #hatenaintern
    

    View Slide

17. (accessibility, a y)
    ( HTML)
    alt
    (Tab )
    HTML - | MDN
    Semantics ( ) - MDN Web Docs : | MDN
    #hatenaintern
    

    View Slide

18. قنؚ٭ُ٤ت㵚瓀
    ⮵榫⯆꡾ֿ־־זיַ׾鷐ַ٬┘㱦㲊םؕ٤ذ٭ؾشع؅✳זיַ׾ٗ٭ا٭ֿ
    ╚מ㵚霄כם׾ն
    js css
    1
    => 僃⮣סً٭ةמ䑒釐ם׵סדׄرؗ٤ٞ٭غ׊י碛企ׂ辐炐׌׾׬׀
    Cumulative Layout Shift (CLS) https://web.dev/i n/ja/cls/
    #hatenaintern
    

    View Slide

19. قنؚ٭ُ٤ت㵚瓀
    ⮵榫⯆꡾ֿ־־זיַ׾鷐ַ٬┘㱦㲊םؕ٤ذ٭ؾشع؅✳זיַ׾ٗ٭ا٭ֿ╚מ㵚霄כם
    ׾ն
    (CDN, Edge)
    CDN
    1
    (Code Splitting) (preload, defer, lazy)
    #hatenaintern
    

    View Slide

20. : React
    1.
    TypeScript JavaScript
    2.
    Transpile, Polyfill
    Bundle, Code Splitting
    3. Web
    html
    4.
    #hatenaintern
    

    View Slide

21. JavaScript ( min)
    #hatenaintern
    

    View Slide

22. JavaScript ( min)
    ES (ES ) JavaScript
    JavaScript
    JavaScript · JavaScript Primer #jsprimer
    #hatenaintern
    

    View Slide

23. 1/2
    // ม਺ͱએݴ
    var a = "a" // ม਺ʢάϩʔόϧʣ
    let b = "b" // ม਺ʢϩʔΧϧʣ
    const c = "c" // ఆ਺
    /* ஫ҙ
    * var Λ༻͍ͨม਺એݴ͸ɺ
    window ΦϒδΣΫτΛ্ॻ͖ͯ͠͠·͏
    */
    var console = null
    console.log("xxx")
    // Error: window.console is null
    const id = "1234" // string
    const name = null // null
    const age = 2022 // number
    const isAdmin = false // boolean
    // object
    const user = {
    id,
    username: name
    age,
    isAdmin,
    memo,
    }
    user.age // 2022
    // ະఆٛϓϩύςΟͩͱ undefined ͕ฦΔ
    user.abc
    #hatenaintern
    

    View Slide

24. 2/2
    // ؔ਺
    function getUser(id) {
    return db.users.find(id)
    }
    const getBlog = (id) => {
    return db.blogs.find(id)
    }
    // ഑ྻ
    const array1 = [1, 2]
    const array2 = new Array(1, 2)
    // ഑ྻॲཧ
    for (elm in array1) {
    console.log(elm)
    }
    array2.forEach((elm) => {
    console.log(elm)
    })
    array1.map((elm) => elm * 2)
    // [2, 4]
    array2.at(0)
    // 1
    #hatenaintern
    

    View Slide

25. Arrow Function
    ˝ function׷return؅✳؂׍מ꞊丗؅榟䡗ך׀׾
    ˝ 㓹儖氳מע׆ס亠嫎ך꞊丗؅榟䡗׊יֽׄףـُ׼םַ
    const hello = (name) => `Hello, ${name}`
    hello("world") // hello, world
    1 ()
    Tips: ()
    const getProps = () => ({ a: "foo", b: "bar" })
    this Arrow Function
    #hatenaintern
    

    View Slide

26. Arrow Function
    ˝ 䌕丗ֿ邾丗ֵ׾㕙⺬ע()ך㍱ֹ
    ˝ ꞊丗⫂ס鋗鳭ֿ邾丗车מ峚׾כ׀ע{}כreturn؅榫ַ׾
    const hello = (name, lang) => {
    if (lang === "ja") return `͜Μʹͪ͸ɺ${name}`
    if (lang === "es") return `Hola, ${name}`
    return `Hello, ${name}`
    }
    #hatenaintern
    

    View Slide

27. Promiseמחַי
    Pending( )
    (resolve) Fulfilled (reject) 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)
    })
    #hatenaintern
    

    View Slide

28. fetch؅✳זג❆
    fetch HTTP API Promise
    Promise console /
    /*
    Ϣʔβʔ৘ใΛऔಘ͢ΔAPIͷྫɻҎԼͷΑ͏ͳJSON͕ฦͬͯ͘Δͱ͍͏૝ఆɻ
    {
    user: {id: 1, name: 'hatena'}
    }
    */
    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 {} ɾɾɾ ᶃ
    #hatenaintern
    

    View Slide

29. Promise
    Promiseס鿥⮛؅⛼䡗׊յא׿؅䣽ֹ׆כך䴧⛍氳ם┾⮛⭚杼؅车ֹ׆כֿ⭳全׾ն
    const promises = urls.map((url) => fetch(url)) // ෳ਺ͷAPIͳͲΛฒྻʹୟ͘
    Promise.all()
    Resolve( ) 1 Reject
    Promise.allSettled()
    Resolve Reject Promise
    Promise: {status: 'fulfilled', value: resolveͨ͠஋},
    Promise: {status: 'rejected', reason: reject͞ΕͨΤϥʔ}
    #hatenaintern
    

    View Slide

30. Promise
    const promises = [
    getFromCache(), // cache͕ۭͷͱ͖͸ࣦഊ͢Δ
    getFromApi(),
    ]
    Promise.race()
    1 Promise Resolve
    Reject
    Promise.any()
    Resolve Promise
    Reject
    #hatenaintern
    

    View Slide

31. async/await
    async function await Promise
    try {} catch (e) {}
    async function 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: *********")
    }
    }
    ECMAScript Top-level await async function await
    #hatenaintern
    

    View Slide

32. async/await
    async function Promise
    Promise then
    Promise await
    getUser(1)
    .then(console.log) // {id: 1, name: 'hatena'}
    .catch(console.error)
    ˝ 扛⺲꞊丗כ׊י㲔车׌׾׆כ׵׵ה؀؆⭳全׾
    ;(async () => {
    const user = await getUser(1)
    console.log(user.name) // 'hatena'
    })()
    #hatenaintern
    

    View Slide

33. class
    ES 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
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritanceandtheprototypechain
    #hatenaintern
    

    View Slide

34. ECMAScript Modules
    ٓةٖ٭ٜ
    1 == 1
    import/export
    CommonJS Node.js
    ECMAScript Node.js
    Babel 1 webpack
    JavaScript
    ECMAScript JavaScript ECMAScript JavaScript ( )
    module.exports require https://nodejs.org/docs/latest/api/modules.html
    #hatenaintern
    

    View Slide

35. default export
    // module.js
    export default function doSomething() {}
    ˝ export defaultךؙؠتَ٭ع׌׾כյimport侇מע♳䙫ס⺲
    ⯥؅錃㲊ך׀׾
    import awesome from "./module"
    #hatenaintern
    

    View Slide

36. (named export)
    ˝ 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');
    #hatenaintern
    

    View Slide

37. ؕ٤َ٭عס亠嫎מחַי
    export
    import { log, hello } from "./namedModule"
    ˝ asךٛؾ٭ّ⭳全׾
    import { logType as LOGTYPE } from "./namedModule"
    * as export
    import * as Logger from "./namedModule"
    Logger.hello() // 'hello'
    (webpack TreeShaking ) * as
    #hatenaintern
    

    View Slide

38. Tips
    #hatenaintern
    

    View Slide

39. for...of
    (iterable)
    NodeList Map Set
    const iterable = [10, 20, 30]
    for (const value of iterable) {
    console.log(value)
    }
    #hatenaintern
    

    View Slide

40. Nullish coalescing operator ??
    JavaScript ||
    const rect = (width: number, height?: number) => ({
    width: width,
    height: height || 100, // ߴ͞Λলུͨ͠ͱ͖͸σϑΥϧτ஋Λ༩͑Δ
    })
    rect(50, 0) // {width: 50, height: 100}
    0 ''( ) Falsy height 0
    ?? null undefined ??
    ??
    !!0 !!'' boolean false JavaScript false null undefined NaN Falsy boolean true
    Truthy https://developer.mozilla.org/en-US/docs/Glossary/Falsy
    JavaScript || Truthy Falsy && Falsy Truthy
    #hatenaintern
    

    View Slide

41. Optional chaining ?.
    ˝ ؛هةؘؠعֿ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()ס磵冽؅䐂׼׿׾ն
    && Falsy null undefined && || Falsy
    Optional chaining
    #hatenaintern
    

    View Slide

42. Spread Syntax
    ˝ ...؅✳ֹכ鿥⮛׷؛هةؘؠع؅㷣ꝧ⭳全׾
    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, // σϑΥϧτ஋Λ౉͞Εͨ஋͕͋Ε͹্ॻ͖͢Δ
    })
    #hatenaintern
    

    View Slide

43. Rest Parameters
    ...
    Spread Syntax 1
    //
    const sum = (num1, num2, ...nums) =>
    num1 + num2 + nums.reduce((a, b) => a + b, 0)
    const numbers = [1, 2, 3]
    sum(3, ...numbers, 6) // 15
    #hatenaintern
    

    View Slide

44. TypeScript ( min)
    #hatenaintern
    

    View Slide

45. TypeScript is
    JavaScript
    JavaScript JavaScript
    node React JavaScript
    JavaScript
    API
    Uncaught TypeError: Cannot read property 'foo' of undefined
    JavaScript Alternative JavaScript TypeScript
    #hatenaintern
    

    View Slide

46. tsc: TypeScript compiler
    TypeScript TypeScript
    https://github.com/microsoft/TypeScript
    TypeScript JavaScript ( )
    --noEmit
    TypeScript JavaScript
    JavaScript
    ( )
    JavaScript Babel, esbuild
    babel @babel/preset-typescript babel
    enum enum typeof
    JavaScript ( )
    #hatenaintern
    

    View Slide

47. 㑔㲚銧鼧⮆؅鐆״׾׻ֹמם؀ֹ
    TypeScript
    Playground
    #hatenaintern
    

    View Slide

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

    View Slide

49. : 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)ܕͱ΋
    #hatenaintern
    

    View Slide

50. JavaScript
    ?
    const person: {
    name: string
    age: number
    address?: string
    } = {
    name: "john",
    age: 21,
    }
    string | undefined JavaScript (Object.keys() )
    TypeScript . exactOptionalPropertyTypes tsc
    #hatenaintern
    

    View Slide

51. type
    type؅✳ֹכ㑔辐杯מؙؕٛؓت؅♀ׄ׼׿׾
    type Person = {
    name: string
    age: number
    }
    type Team = Person[]
    #hatenaintern
    

    View Slide

52. Union Type ( )
    邾丗ס㑔סַ׍׿־؅嵹ג׌
    type Primitive = string | number | boolean | undefined | null
    type Color = "red" | "green" | "blue" | "yellow" | "purple"
    #hatenaintern
    

    View Slide

53. (Type Guard)
    JavaScript
    JavaScript
    TypeScript
    typeof in JavaScript
    #hatenaintern
    

    View Slide

54. typeof
    ( " " JavaScript ) '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'
    #hatenaintern
    

    View Slide

55. typeof
    ˝ 攐מnumber׷stringךֵ׾׆כמ⯆꡾׊גַכ׀מ값⭳
    // paddingʹ͸ۭനͷ਺·ͨ͸λϒจࣈͳͲ͕΍ͬͯ͘Δ͜ͱΛ૝ఆͨؔ͠਺
    const padLeft = (val: string, padding: string | number) => {
    if (typeof padding === "number") {
    return " ".repeat(padding) + val
    }
    // padding͕numberͰͳ͍ͷͰɺstringͰ͋Δͱਪ࿦͞ΕΔ
    return padding + val
    }
    #hatenaintern
    

    View Slide

56. in
    API
    type Fish = {
    name: string
    swim: () => void
    }
    type Bird = {
    name: string
    fly: () => void
    }
    const move = (x: Fish | Bird) => {
    if ("swim" in x) {
    // swim͕༗Δͷ͸FishܕͷΈ
    return x.swim()
    }
    // ͳͷͰɺ͜͜ʹ౸ୡ͢Δͱ͸BirdܕͰ͋Δͱ෼͔Δ
    return x.fly()
    }
    #hatenaintern
    

    View Slide

57. Object.hasOwn()
    2022/08/18 TypeScript ES
    Object.hasOwn()
    const move = (x: Fish | Bird) => {
    if (Object.hasOwn(x, "swim")) {
    // swim͕༗Δͷ͸FishܕͷΈ͚ͩͲɺ Fish͔ Bird͔ͷͲͪΒ͔Λ൑ఆͰ͖ͳ͍
    return x.swim() // error: Property 'swim' does not exist on type 'Fish | Bird'.
    }
    ...
    }
    Support for Object.hasOwn (lib.d.ts and narrowing) · Issue # ·
    microsoft/TypeScript
    #hatenaintern
    

    View Slide

58. Tagged Union Types
    ˝ type׷kindס׻ֹםوٞقطؔמٛطٜٚ㑔؅錃㲊׊יַֽיյאס╈骰؅===׷switch؅✳זי奂鬳׌׾׆כךյ㑔ס礓׽鱮ײ؅车ֹ
    ˝ ⠕☔氳ם䚉釶דכյinךס礓׽鱮ײ׻׽׵׆ה׼סقذ٭٤ס亠ֿ׻ׂ⮵榫׌׾妳ֿ׊ױ׌
    ˝ ٛطٜٚ㑔ס奂鬳ס亠ֿ傴ׂסֿ癨ⶡךյ־ח׆ה׼ס׮ֹֿ׻׽㱦⪒ך׌ն
    type Fish = {
    kind: "fish"
    name: string
    swim: () => void
    }
    type Bird = {
    kind: "bird"
    name: string
    fly: () => void
    }
    const move = (x: Fish | Bird) => {
    if (x.kind === "fish") {
    return x.swim()
    }
    return x.fly()
    }
    #hatenaintern
    

    View Slide

59. as (Type Assertion)
    TypeScript
    (
    )
    #hatenaintern
    

    View Slide

60. as JavaScript
    // ܕFooΛ௥Ճ͢Δ
    type Foo = {
    bar: number
    piyo: string
    }
    const something = (x: Foo) => {
    // ܕͱͯ͠͸߹͍ͬͯΔ͕ɺϥϯλΠϜ্Ͱͷ࣮ߦ࣌ʹ͸piyo͕undefinedʹͳΔͷͰΤϥʔ͕ى͖Δ
    return x.piyo.split(",")
    }
    var foo = {} as Foo // Fooͱͯ͠ѻ͑ΔΑ͏ʹ͓ͯ͘͠
    // ࣮ࡍʹ͸barͳͲ͸ແ͍͕Fooͱͯ͠Ξαʔγϣϯ͍ͯ͠ΔͷͰ౉ͤΔ
    something(foo)
    #hatenaintern
    

    View Slide

61. const
    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[]
    }
    const setPallet = (p: Pallet) => {
    /* do something */
    }
    const pallet = {
    colors: ["red"],
    } // ͜͜ʹ as const Λ෇͚ͳ͍ͱ{ color: string[] }ͱਪ࿦͞ΕͯΤϥʔʹͳΔ
    setPallet(pallet)
    #hatenaintern
    

    View Slide

62. any unknown
    TypeScript
    #hatenaintern
    

    View Slide

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

    View Slide

64. unknown
    any
    any unknown
    unknown {} | null | undefined
    const getObjectValues = (obj: {}) => Object.values(obj)
    // ݺͼग़͠ଆ͸unknownͳͷͰ޷͖ͳ஋Λ౉ͤΔ
    const stringifyForLog = (val: unknown) => {
    if (val === null || val === undefined) return "(anonymous)"
    return JSON.stringify(getObjectValues(val))
    }
    #hatenaintern
    

    View Slide

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

    View Slide

66. typeכinterface
    Type
    Type
    type Blog = {
    title: string
    content: string
    }
    // NG: Duplicate identifier 'Blog'.
    type Blog = {
    tags: string[]
    }
    // OK
    type NewBlog = Blog & {
    tags: string[]
    }
    Interface
    Interface
    ES Array at()
    TypeScript . Array
    // lib.es5.d.ts
    interface Array {
    length: number
    toString(): string
    ...
    }
    // lib.es2022.array.d.ts
    interface Array {
    at(index: number): T | undefined
    }
    #hatenaintern
    

    View Slide

67. ꞊丗
    仴מئ٤وٜךע⛰䈱׵⭳י׀יַ׾ׄלյ䌕丗׷鲭׽⡁ס㑔ס傴׀亠סقذ٭٤גה磆☭׊יֽ׀ױ׌ն
    const 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("|")
    }
    #hatenaintern
    

    View Slide

68. (Generics)
    TypeScript querySelector - Hatena Developer Blog
    const getJSON = (url: string): Promise => {
    // res.json͸anyͱͳΒͣʹܕҾ਺Ͱ౉͞Εͨ΋ͷͱղऍ͞ΕΔ
    return fetch(url).then((res) => res.json())
    }
    // ͜͜Ͱusers͸User[]ʹͳΔ
    const users = await getJSON("/api/users")
    // ͜͜Ͱblogs͸Blog[]ʹͳΔ
    const blogs = await getJSON("/api/blogs")
    #hatenaintern
    

    View Slide

69. :
    extends /
    const echo = (text: T): T => {
    return text
    }
    const a = echo("foo") // a ͷܕ͸ 'foo'
    const str: string = "foo"
    const b = echo(str) // b ͷܕ͸ 'string'
    #hatenaintern
    

    View Slide

70. never
    never
    void never never (
    )
    const infiniteLoop = (): never => {
    while (true) {}
    }
    strictNullChecking JavaScript undefined
    #hatenaintern
    

    View Slide

71. never؅榫ַג禿糵䓪زؘشؠ
    ˝ never؅榫ַ׾׆כך㑔؝٭غםלךס禿糵䓪؅زؘشؠך׀׾
    type Color = "red" | "yellow" | "purple"
    const magical = (color: Color) => {
    switch (color) {
    case "red":
    return "tomato"
    case "yellow":
    return "banana"
    default:
    // શͯͷcase͕໢ཏ͞Ε͍ͯΕ͹͜͜ʹ౸ୡ͢Δ͜ͱ͸ͳ͍
    // ͜ͷ৔߹͸'purple'͕୅ೖ͞ΕΔՄೳੑ͕͋ΔͷͰɺ੩తղੳ࣌ʹΤϥʔʹͳͬͯݕग़Ͱ͖Δ
    const val: never = color
    throw new Error(`"${color}" is not implemented`)
    }
    }
    #hatenaintern
    

    View Slide

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

    View Slide

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

    View Slide

74. typeof
    TypeScript
    JavaScript
    const hello = () => "hello"
    type Func = typeof hello
    type P = ReturnType // P͸stringͱղऍ͞ΕΔ
    #hatenaintern
    

    View Slide

75. keyof
    key union type
    const config = {
    checkJs: false,
    force: true,
    }
    // typeofͰconfigͷܕΛಘͯɺkeyofͰͦͷΦϒδΣΫτͷܕͷΩʔΛྻڍ͢Δ
    type ConfigKey = keyof typeof config // "checkJs" | "force"
    const getConfigVal = (key: ConfigKey) => config[key]
    getConfigVal("ignore") // Τϥʔͱͯ͠ݕग़Ͱ͖Δ
    #hatenaintern
    

    View Slide

76. Indexed Access Types
    JavaScript []
    typeof keyof JavaScript
    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'
    #hatenaintern
    

    View Slide

77. (Intersection Types)
    邾丗ס㑔؅磝ײ⺬؂׎י㑔؅榟䡗׌׾ն❆ֻףٗ٭ا٭ס嘤꡾מ
    䑴׋יٝتَ٤تס㑔؅㚺ֻ׾㕙⺬ע׆ַֹֹ䚉׋ն
    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
    #hatenaintern
    

    View Slide

78. Conditional Types
    JavaScript
    condition ? trueExpression : falseExpression // JavaScriptͷࡾ߲ԋࢉࢠ
    // SomeType͕OtherTypeΛຬͨͤ͹TrueTypeΛಘΔ
    SomeType extends OtherType ? TrueType : FalseType;
    Overloads
    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)
    #hatenaintern
    

    View Slide

79. Overloads
    Overloads
    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
    }
    #hatenaintern
    

    View Slide

80. Overloads
    ˝ 㓹儖ע湾ׂ傴ׂס؅✳זיֽׄף荁ַך׌
    type f = (x: number) => number
    ˝ ⺱喋ס׆כ؅׆ס׻ֹמ׵傴ׄ׾
    type f = {
    (x: number): number
    }
    Overloads
    type func = {
    (x: number): number
    (x: string): string
    }
    #hatenaintern
    

    View Slide

81. React ( min)
    #hatenaintern
    

    View Slide

82. React
    React
    View React
    https://ja.reactjs.org/
    #hatenaintern
    

    View Slide

83. ْؕ٭ة׊יײ׾
    TODO
    #hatenaintern
    

    View Slide

84. JavaScript
    #hatenaintern
    

    View Slide

85. JavaScript
    Ⳃ氳榟䡗סゖ갭憠
    UI
    #hatenaintern
    

    View Slide

86. React
    #hatenaintern
    

    View Slide

87. React
    UI
    UI
    GUI
    GUI
    #hatenaintern
    

    View Slide

88. (Virtual) DOM
    React DOM DOM DOM
    React DOM
    DOM
    UI
    key
    https://ja.reactjs.org/docs/reconciliation.html
    Document Object Model HTML XML
    https://zenn.dev/mizchi/books/ c c f cc c b
    #hatenaintern
    

    View Slide

89. React
    #hatenaintern
    

    View Slide

90. JSX
    JSX JavaScript
    My name is Clementine!
    React DOM HTML
    class className class
    JavaScript
    #hatenaintern
    

    View Slide

91. ؠٚتؤ٤َ٭ؾ٤عכ꞊丗ؤ٤َ٭ؾ٤ع
    React 2
    
    ؠٚتؤ٤َ٭ؾ٤ع
    class HelloMessage extends React.Component {
    render() {
    return Hello {this.props.name}
    }
    }
    ꞊丗ؤ٤َ٭ؾ٤ع
    const HelloMessage = ({ name }) => {
    return Hello {name}
    }
    #hatenaintern
    

    View Slide

92. ؠٚتؤ٤َ٭ؾ٤عכ꞊丗ؤ٤َ٭ؾ٤ع
    ؠٚتؤ٤َ٭ؾ٤عע㵧全氳ם䉬塛ֿ◀㲊׈׿יַ׾ג״յ꞊丗ؤ٤َ٭ؾ٤ع؅✳榫׌׾׆כ؅䍚ׂ䫟㝢׊ױ׌ն
    ؠٚتؤ٤َ٭ؾ٤ع
    React Error Boundary
    (Function Component)
    React Component
    React Component React Component
    null
    Presenter/View
    React Component
    Unit Test
    #hatenaintern
    

    View Slide

93. Function Component TypeScript
    TypeScript JSX .tsx
    () => JSX.Element
    React.FC
    type Props = { name: string }
    const Welcome: React.FC = ({ name }) => {
    return Welcome {name}
    }
    React Component undefined
    #hatenaintern
    

    View Slide

94. Props State
    React Component 2
    Props State
    #hatenaintern
    

    View Slide

95. Props /
    1
    type Props = { name: string }
    const Welcome: React.FC = ({ name }) => {
    return Welcome {name}
    }
    ( ) JSX
    
    // Welcome John
    #hatenaintern
    

    View Slide

96. React Fragmentמחַי
    <> > React Fragment
    React Component 1 Element
    2 React Component
    const Component = () => {
    return (
    <>
    hello
    
    
    ͜Μʹͪ͸
    >
    )
    }
    key
    #hatenaintern
    

    View Slide

97. Function Component Hooks
    Hooks React . 2019
    SFC ( Stateless Functional
    Component )
    #hatenaintern
    

    View Slide

98. (State)
    useState
    use
    React
    (Hooks)
    const Counter = () => {
    const [count, setCount] = useState(0)
    const increaseCount = ()
    => setCount((prevCount) => prevCount + 1)
    return (
    
    Χ΢ϯτ: {count}
    Χ΢ϯτ
    
    )
    }
    #hatenaintern
    

    View Slide

99. Hooks
    Rules of Hooks React
    use
    if
    early return
    ׆׿׼עeslint-plugin-react-hooksך吾⭳׊יׂ׿׾׻ֹמ⭳全׾
    #hatenaintern
    

    View Slide

100. Hooks
     #hatenaintern
     

     View Slide

101. useState
     useState() 1
     2 setter
     ( )
     setter Component
     DOM
     const [color, setColor] = useState("red")
     #hatenaintern
     

     View Slide

102. useState setter
     ˝ 二׊ַ⡁؅峚׌
     const [color, setColor] = useState("red")
     const change2Blue = () => setColor("blue")
     ˝ 泡⯥ס⡁؅⮵榫׊י二׊ַ⡁؅婊㲊׌׾
     const [count, setCount] = useState(0)
     const increaseCount = () => setCount((prevCount) => prevCount + 1)
     #hatenaintern
     

     View Slide

103. useEffect
     React Component
     Hooks
     DOM
     DOM props state
     #hatenaintern
     

     View Slide

104. Component
     alert
     const Counter = () => {
     const [count, setCount] = useState(0)
     const increaseCount = () => setCount((prevCount) => prevCount + 1)
     alert(count)
     return {/* ུ */}
     }
     alert OK
     #hatenaintern
     

     View Slide

105. useEffectס╈ךalert؅⽛ש
     const Counter = () => {
     const [count, setCount] = useState(0)
     const increaseCount = () => setCount((prevCount) => prevCount + 1)
     useEffect(() => {
     alert(count)
     })
     return {/* ུ */}
     }
     Component Component
     alert
     alert alert UI UI
     Component
     #hatenaintern
     

     View Slide

106. useEffectכ❣㰆鿥⮛
     2 ❣㰆؅辐׌鿥⮛؅峚׌
     Component
     useEffect(೚ҙͷॲཧؔ਺, [])
     state
     useEffect(೚ҙͷॲཧؔ਺, [state])
     state
     Component
     2 alert
     const [countA, setCountA] = useState(0)
     const [countB, setCountB] = useState(0)
     useEffect(() => {
     alert(`conutAͷ஋͕${countA}ʹߋ৽͞Ε·ͨ͠`)
     })
     useEffect(() => {
     alert(`conutAͷ஋͕${countB}ʹߋ৽͞Ε·ͨ͠`)
     })
     countA countB
     #hatenaintern
     

     View Slide

107. useEffectכ❣㰆鿥⮛
     ˝ ❣㰆鿥⮛؅錃㲊׌׾׆כךյא׿ב׿ס❣㰆鿥⮛⫂סַ׍׿־ס⡁ֿ㚺催׈׿גכ׀סײⰜ⛼榫ֿ⽛צ⭳׈׿׾׻ֹמ⭳全׾
     const [countA, setCountA] = useState(0)
     const [countB, setCountB] = useState(0)
     useEffect(() => {
     alert(`conutAͷ஋͕${countA}ʹߋ৽͞Ε·ͨ͠`)
     }, [countA])
     useEffect(() => {
     alert(`conutAͷ஋͕${countB}ʹߋ৽͞Ε·ͨ͠`)
     }, [countB])
     [] Component
     Component DOM ( ) (mount) DOM (unmount)
     Hooks
     #hatenaintern
     

     View Slide

108. useEffectכؠٛ٭٤ػشو
     ˝ useEffectע꞊丗؅鲭׌׆כךאס꞊丗ֿ域סⰜ⛼榫ֿ⽛צ⭳׈׿׾⯥מ㲔车׈׿׾
     ˝ ׆׿؅⮵榫׌׾כⰜ⛼榫סؠٛ٭٤ػشوֿ⭳全׾
     roomIdֿ㚺催׈׿׾כյزٔشعס⹿ַ頇鐆؅⹦׽寕׊յ二׊ַ頇鐆؅ꝧ㡎׌׾❆
     useEffect(() => {
     const handler = () => {
     /* ৽͍͠ϝοηʔδΛड͚औͬͨͱ͖ͷॲཧ */
     }
     chat.subscribe(roomId, handler)
     return () => {
     chat.unsubscribe(roomId)
     }
     }, [roomId])
     #hatenaintern
     

     View Slide

109. (Custom Hook)
     use Hook
     Hooks Component 1
     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
     }
     #hatenaintern
     

     View Slide

110. Tips
     Component
     useState useMemo useEffect useCallback
     ( )
     useEffect
     useCallback - uhyo/blog
     #hatenaintern
     

     View Slide

111. ֽ檄׿׈ױך׊ג
     TypeScript React
     TypeScript React
     JavaScript
     #hatenaintern
     

     View Slide

112. ♀ꎰ
     儖稴מ⪌׽⮉׼ם־זג馐ײ鱮؆ד遨餉׷鉮鐄מחַי傴
     ַיַױ׌ն艄⽏ֵֿ׿ף鐆؆ךׂד׈ַ氳םؤ٭ػ٭ך
     ׌ն
     泘域
     Arrow Function
     useState state
     Hooks
     useMemo useCallback
     React Component DOM
     JavaScript
     JavaScript
     JavaScript ( )
     #hatenaintern
     

     View Slide

113. Arrow Function
     function (new )
     arguments
     this
     #hatenaintern
     

     View Slide

114. Arrow Function this
     Arrow Function function
     this
     #hatenaintern
     

     View Slide

115. 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
     https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/
     setTimeout#thethisproblem
     #hatenaintern
     

     View Slide

116. thisסتؤ٭وס鷿ַמחַי
     Arrow Function
     const person = {
     name: "chris",
     say: function () {
     setTimeout(() => {
     console.log(`I'm ${this.name}`)
     }, 100)
     },
     }
     person.say() // I'm chris
     #hatenaintern
     

     View Slide

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

     View Slide

118. ꞊丗⫂ס㚺丗تؤ٭وכuseState
     ❆ֻףյcountֿ5ךֵ׾כ׌׾כ
     const 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ͷ··
     }
     }
     #hatenaintern
     

     View Slide

119. ؤ٭ٜفشؠ꞊丗؅峚׌亠嫎ך傴׀泡׌
     ❆ֻףյcountֿ5ךֵ׾כ׌׾כ
     const 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͞ΕΔ
     }
     }
     state
     #hatenaintern
     

     View Slide

120. Hooks
     === 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
     #hatenaintern
     

     View Slide

121. ❣㰆鿥⮛מ؛هةؘؠع؅⪌׿׾آ٭تמחַי
     const config = { theme: "sports" }
     useEffect(() => {
     loadConfig(config).then(() => {})
     }, [config])
     config
     [config.theme]
     #hatenaintern
     

     View Slide

122. ب٤وٜם㍑鹴瓀
     Component
     const config = { theme: "sports" }
     function Component() {
     useEffect(() => {
     loadConfig(config).then(() => {})
     }, [config])
     }
     Props
     #hatenaintern
     

     View Slide

123. useMemo
     useMemo React Hooks 1
     Component
     function WordCount({ children }) {
     // text͸stringͳͷͰɺͦͷ··ґଘ഑ྻʹग़དྷΔ
     const words = useMemo(() => children.split(" "), [text])
     useEffect(() => {
     alert(`୯ޠ਺͸${words.length}Ͱ͢`)
     }, [words])
     }
     Component children Lorem ipsum dolor sit amet
     #hatenaintern
     

     View Slide

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

     View Slide

125. useMemo׷useCallback؅榫ַגقنؚ٭ُ٤
     ت䷉ャ
     ˝ useMemo׷useCallbackע⡁׷꞊丗סْٓ⴫מ׻זיuseEffectםלס┘釐ם⽛צ⭳׊؅䤰⯆׌׾׆כמ׻זיقنؚ٭ُ٤ت
     ס䷉ャ؅僿䏨ך׀׾
     ˝ 攐מuseMemoךע❣㰆מ✳؂םַ㕙⺬ך׵յ⭚杼סꄆַ銶畀磵冽؅ْٓ⴫׌׾׆כךٝ٤رٛ٤ء侇סهٞشؠ؅䤰ֻ׾׆כ
     ׵⭳全׾
     function Component ({a, b}) => {
     const resultA = useMemo(() => superDuperHighCostCalculation(a), [a]);
     const resultB = useMemo(() => superDuperHighCostCalculation(b), [b]);
     return <>
     {a}͔ΒʮΊͪΌͪ͘Όॏ͍ܭࢉʯΛͨ݁͠Ռ: {resultA}
     {b}͔ΒʮΊͪΌͪ͘Όॏ͍ܭࢉʯΛͨ݁͠Ռ: {resultB}
     >
     }
     #hatenaintern
     

     View Slide

126. React Component DOM
     React 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 (
     
     
     
     )
     #hatenaintern
     

     View Slide

127. DOM
     DOM React
     const [text, setText] = useState("")
     const submit = (e) => {
     e.preventDefault()
     if (text < 100) return alert("101จࣈҎ্͕ඞཁͰ͢")
     createPost({ body: text })
     }
     return (
     
     setText(e.target.value)} />
     
     )
     #hatenaintern
     

     View Slide

128. JavaScript
     TypeScript/JavaScript
     #hatenaintern
     

     View Slide

129. TypeScript
     TypeScript JavaScript
     tsc babel
     JavaScript JavaScript
     API babel poly ll
     TS JS babel
     JavaScript JavaScript
     webpack JavaScript (bundle) ES Modules 1
     JavaScript JavaScript(+sourcemap)
     minify
     TS/JS sourcemap
     1 webpack Terser TreeShaking
     #hatenaintern
     

     View Slide

130. webpack
     TypeScript JavaScript
     babel(babel-loader )
     webpack
     Terser(webpack-terser-plugin )
     #hatenaintern
     

     View Slide

131. create-react-app
     React
     OK
     webpack, babel, eslint
     npm start npm test
     react-scripts
     create-react-app React
     create-react-app
     React
     #hatenaintern
     

     View Slide

132. JavaScript
     ( )
     JavaScript DOM HTML CSS API
     ECMAScript
     WHATWG HTML Living Standard
     WHATWG DOM Living Standard
     W C CSS Speci cations
     #hatenaintern
     

     View Slide

133. ם׏☼喋؅湳׾ס־
     API
     JavaScript CSS
     -
     #hatenaintern
     

     View Slide

134. ECMAScript
     JavaScript ECMAScript Ecma International Technical
     Committee TC
     https://github.com/tc /ecma
     Living Standard
     6 ECMAScript
     babel tsc
     poly ll
     Ecma International C#
     #hatenaintern
     

     View Slide

135. ECMAScript Stage
     ECMAScript (proposal)
     Github proposal issue PR TC
     Stage
     ⾒ Issue
     Stage ECMAScript
     #hatenaintern
     

     View Slide

136. Stage
     2
     ECMAScript · JavaScript Primer #jsprimer
     Stage pre x API
     2 JavaScript Google Chrome Node.js V Safari
     JavaScriptCore Firefox SpiderMonkey Facebook Hermes
     #hatenaintern
     

     View Slide

137. ECMAScript
     Stage ECMAScript
     core-js poly ll babel
     ECMAScript Open Open
     JavaScript
     ECMAScript
     #hatenaintern
     

     View Slide

138. JavaScript
     ECMAScript
     JavaScript ECMAScript
     location.assign WHATWG HTML Living Standard document.querySelector WHATWG DOM
     Living Standard
     WHATWG HTML/DOM Living Standard
     ECMAScript HTML DOM (Node.js )
     W C HTML HTML . 399 5 WHATWG 2021 1 29 WHATWG Living Standard
     W C / : [https://future-architect.github.io/articles/ a/ HTML | ]
     2004 Apple Mozilla Opera 3 W C HTML Living
     Standard
     #hatenaintern
     

     View Slide

139. WHATWG
     Google Chrome HTML DOM API
     Google Chrome Apple Moziila
     Chrome : Chrome Platform Status
     Mozilla : Mozilla Speci cation Positions
     W C Web Incubator Community Group
     https://scrapbox.io/pastak-pub/ WebAPI
     #hatenaintern
     

     View Slide

140. W C CSS Speci cations
     CSS CSS
     WHATWG W C
     All CSS speci cations
     #hatenaintern
     

     View Slide